Media Session API ile medya bildirimlerini ve oynatma kontrollerini özelleştirin

Kullanıcıların tarayıcılarında o anda neyin oynatıldığını bilmelerini ve onu başlatan sayfaya dönmeden kontrol etmelerini sağlamak için Media Session API tanıtıldı. Web geliştiricilerinin bu deneyimi, özel medya bildirimlerindeki meta veriler, oynatma, duraklatma, arama, parça değiştirme gibi medya etkinlikleri ve mikrofonu sessize alma/açma, kamerayı açma/kapatma ve telefonu kapatma gibi video konferans etkinlikleri aracılığıyla özelleştirmesine olanak tanır. Bu özelleştirmeler, masaüstü medya merkezleri, mobil cihazlardaki medya bildirimleri ve hatta giyilebilir cihazlar dahil olmak üzere çeşitli bağlamlarda mevcuttur. Bu özelleştirmeleri bu makalede anlatacağım.

Medya oturumu API’si çeşitli avantajlar ve yetenekler sağlar:

• Donanım ortam anahtarları desteklenir.
• Medya bildirimleri mobil, masaüstü ve eşleştirilmiş giyilebilir cihazda özelleştirilir.
• bu medya merkezi masaüstünde mevcuttur.
• Kilit ekranı medya kontrolleri şu adreste mevcuttur: ChromeOS ve mobil.
• Resim içinde Resim pencere kontrolleri aşağıdakiler için kullanılabilir: ses çalma, video konferansVe sunum slaytları.
• Mobilde Asistan entegrasyonu mevcuttur.

Birkaç örnek bu noktalardan bazılarını açıklayacaktır.

Örnek 1: Kullanıcılar klavyelerinin “sonraki parça” medya tuşuna basarsa, web geliştiricileri, tarayıcı ister ön planda ister arka planda olsun, bu kullanıcı eylemini gerçekleştirebilir.

Örnek 2: Kullanıcılar, cihaz ekranları kilitliyken web’de bir podcast dinliyorsa, kilit ekranı medya kontrollerinden “geriye doğru ara” simgesine basabilir, böylece web geliştiricileri oynatma süresini birkaç saniye geri alabilir.

Örnek 3: Kullanıcıların ses çalan sekmeleri varsa, web geliştiricilerinin durumlarını temizleme şansı olması için masaüstündeki medya merkezinden oynatmayı kolayca durdurabilirler.

Örnek 4: Kullanıcılar bir video aramasındaysa, web sitesinin mikrofon verilerini almasını durdurmak için Resim içinde Resim penceresindeki “mikrofonu değiştir” kontrolüne basabilirler.

Bunların hepsi iki farklı arayüz aracılığıyla yapılır: MediaSession arayüz ve MediaMetadata arayüz. İlki, kullanıcıların çalan her şeyi kontrol etmesine izin verir. ikincisi nasıl anlattığın MediaSession nelerin kontrol edilmesi gerekiyor.

Örnek olarak, aşağıdaki resim bu arayüzlerin belirli medya kontrolleriyle, bu durumda mobil cihazlarda bir medya bildirimiyle nasıl ilişkili olduğunu göstermektedir.

Kullanıcıların ne çaldığını bilmelerini sağlayın #

Bir web sitesi ses veya video oynatırken, kullanıcılar mobil cihazdaki bildirim tepsisinde veya masaüstündeki medya hub’ında otomatik olarak medya bildirimleri alır. Tarayıcı, belgenin başlığını ve bulabildiği en büyük simge görüntüsünü kullanarak uygun bilgileri göstermek için elinden gelenin en iyisini yapar. Media Session API ile, medya bildirimini aşağıda gösterildiği gibi başlık, sanatçı adı, albüm adı ve çizim gibi bazı daha zengin medya meta verileriyle özelleştirmek mümkündür.

Chrome, yalnızca medya süresi bittiğinde medya bildirimlerini göstermek için “tam” ses odağı ister en az 5 saniye. Bu, çınlama gibi tesadüfi seslerin bildirim göstermemesini sağlar.

// After media (video or audio) starts playing
await document.querySelector("video").play();
if ("mediaSession" in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Never Gonna Give You Up',
artist: 'Rick Astley',
album: 'Whenever You Need Somebody',
artwork: [
{ src: 'https://via.placeholder.com/96',   sizes: '96x96',   type: 'image/png' },
{ src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
{ src: 'https://via.placeholder.com/192', sizes: '192x192', type: 'image/png' },
{ src: 'https://via.placeholder.com/256', sizes: '256x256', type: 'image/png' },
{ src: 'https://via.placeholder.com/384', sizes: '384x384', type: 'image/png' },
{ src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
]
});
// TODO: Update playback state.
}

Oynatma sona erdiğinde, bildirim otomatik olarak kaybolacağından medya oturumunu “serbest bırakmaya” gerek yoktur. aklınızda bulundurun navigator.mediaSession.metadata yine de bir sonraki oynatma başladığında kullanılacaktır. Bu nedenle, medya bildiriminde ilgili bilgilerin gösterildiğinden emin olmak için medya oynatma kaynağı değiştiğinde onu güncellemek önemlidir.

Medya meta verileri hakkında dikkat edilmesi gereken birkaç nokta vardır.

• Bildirim resmi dizisi, blob URL’lerini ve veri URL’lerini destekler.
• Hiçbir çizim tanımlanmamışsa ve bir simge görüntüsü varsa (kullanılarak belirtilir) &LTlink rel=icon>) arzu edilen bir boyutta, medya bildirimleri bunu kullanır.
• Android için Chrome’da bildirim resmi hedef boyutu: 512x512. Düşük kaliteli cihazlar için, 256x256.
• bu title ortam HTML öğesinin özniteliği, “Şimdi yürütülüyor” macOS widget’ında kullanılır.
• Medya kaynağı katıştırılmışsa (örneğin bir iframe’de), Media Session API bilgisi katıştırılmış bağlamdan ayarlanmalıdır. Aşağıdaki snippet’e bakın.

iframe id="iframe">
video>.../video>
/iframe>
script>
iframe.contentWindow.navigator.mediaSession.metadata = new MediaMetadata({
title: 'Never Gonna Give You Up',
...
});
/script>

Kullanıcıların neyin çaldığını kontrol etmesine izin ver #

Medya oturumu eylemi, bir web sitesinin kullanıcılar için mevcut medya oynatmayla etkileşime girdiklerinde işleyebileceği bir eylemdir (örneğin “oynat” veya “duraklat”). Eylemler, olaylara benzerdir ve olaylarla hemen hemen aynı şekilde çalışır. Olaylar gibi, eylemler de işleyicileri uygun bir nesneye ayarlayarak uygulanır. MediaSession, bu durumda. Bazı işlemler, kullanıcılar bir kulaklıktan, başka bir uzak cihazdan, klavyeden düğmelere bastığında veya bir medya bildirimiyle etkileşime girdiğinde tetiklenir.

Bazı ortam oturumu eylemleri desteklenmeyebileceğinden, bir try…catch ayarlarken engelleyin.

const actionHandlers = [
['play',          () => { /* ... */ }],
['pause',         () => { /* ... */ }],
['previoustrack', () => { /* ... */ }],
['nexttrack',     () => { /* ... */ }],
['stop',          () => { /* ... */ }],
['seekbackward',  (details) => { /* ... */ }],
['seekforward',   (details) => { /* ... */ }],
['seekto',        (details) => { /* ... */ }],
/* Video conferencing actions */
['togglemicrophone', () => { /* ... */ }],
['togglecamera',     () => { /* ... */ }],
['hangup',           () => { /* ... */ }],
/* Presenting slides actions */
['previousslide', () => { /* ... */ }],
['nextslide',     () => { /* ... */ }],
];
for (const [action, handler] of actionHandlers) {
try {
navigator.mediaSession.setActionHandler(action, handler);
} catch (error) {
console.log(`The media session action "${action}" is not supported yet.`);
}
}

Bir medya oturumu eylem işleyicisinin ayarını kaldırmak, onu ayarlamak kadar kolaydır. null.

try {
// Unset the "nexttrack" action handler at the end of a playlist.
navigator.mediaSession.setActionHandler('nexttrack', null);
} catch (error) {
console.log(`The media session action "nexttrack" is not supported yet.`);
}

Ayarlandıktan sonra, medya oturumu eylem işleyicileri, medya oynatmaları boyunca devam edecektir. Bu, olay dinleyici modeline benzer, ancak bir olayı işlemek, tarayıcının herhangi bir varsayılan davranışı yapmayı durdurması ve bunu web sitesinin medya eylemini desteklediğine dair bir sinyal olarak kullanması anlamına gelir. Bu nedenle, uygun eylem işleyici ayarlanmadığı sürece medya eylem kontrolleri gösterilmeyecektir.

Oynat durdur #

bu "play" eylem, kullanıcının medya oynatmaya devam etmek istediğini belirtir. "pause" geçici olarak durdurma arzusunu gösterir.

“Oynat/duraklat” simgesi her zaman bir medya bildiriminde gösterilir ve ilgili medya olayları tarayıcı tarafından otomatik olarak işlenir. Varsayılan davranışlarını geçersiz kılmak için medya eylemlerini aşağıda gösterildiği gibi “oynat” ve “duraklat” işlemlerini gerçekleştirin.

Tarayıcı, örneğin ararken veya yüklerken bir web sitesinin medya oynatmadığını düşünebilir. Bu durumda, ayarlayarak bu davranışı geçersiz kılın. navigator.mediaSession.playbackState ile "playing" veya "paused" web sitesi kullanıcı arayüzünün medya bildirim kontrolleriyle senkronize kalmasını sağlamak için.

const video = document.querySelector('video');
navigator.mediaSession.setActionHandler('play', async () => {
// Resume playback
await video.play();
});
navigator.mediaSession.setActionHandler('pause', () => {
// Pause active playback
video.pause();
});
video.addEventListener('play', () => {
navigator.mediaSession.playbackState = 'playing';
});
video.addEventListener('pause', () => {
navigator.mediaSession.playbackState = 'paused';
});

Önceki parça #

bu "previoustrack" action, kullanıcının medya oynatmanın bir başlama nosyonu varsa, mevcut medya oynatmayı baştan başlatmak istediğini veya medya oynatmanın bir çalma listesi kavramı varsa, oynatma listesindeki önceki öğeye gitmek istediğini belirtir.

navigator.mediaSession.setActionHandler('previoustrack', () => {
// Play previous track.
});

Sonraki parça #

bu "nexttrack" eylem, medya oynatmanın bir oynatma listesi kavramı varsa, kullanıcının oynatma listesindeki bir sonraki öğeye medya oynatmayı taşımak istediğini belirtir.

navigator.mediaSession.setActionHandler('nexttrack', () => {
// Play next track.
});

Durmak #

bu "stop" eylem, kullanıcının medya oynatmayı durdurmak ve uygunsa durumu temizlemek istediğini belirtir.

navigator.mediaSession.setActionHandler('stop', () => {
// Stop playback and clear state if appropriate.
});

Geri / ileri ara #

bu "seekbackward" eylem, kullanıcının medya oynatma süresini kısa bir süre geriye almak istediğini gösterir. "seekforward" medya oynatma süresini kısa bir süre ileri alma isteğini gösterir. Her iki durumda da kısa bir süre birkaç saniye anlamına gelir.

bu seekOffset eylem işleyicide sağlanan değer, medya oynatma süresini hareket ettirmek için saniye cinsinden süredir. sağlanmadığı takdirde (örneğin undefined), o zaman mantıklı bir süre (örneğin 10-30 saniye) kullanmalısınız.

const video = document.querySelector('video');
const defaultSkipTime = 10; /* Time to skip in seconds by default */
navigator.mediaSession.setActionHandler('seekbackward', (details) => {
const skipTime = details.seekOffset || defaultSkipTime;
video.currentTime = Math.max(video.currentTime - skipTime, 0);
// TODO: Update playback state.
});
navigator.mediaSession.setActionHandler('seekforward', (details) => {
const skipTime = details.seekOffset || defaultSkipTime;
video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
// TODO: Update playback state.
});

Belirli bir zamana bakın #

bu "seekto" eylemi, kullanıcının medya oynatma süresini belirli bir zamana taşımak istediğini belirtir.

bu seekTime eylem işleyicide sağlanan değer, medya oynatma süresini taşımak için saniye cinsinden süredir.

bu fastSeek eylem işleyicide sağlanan boolean, eylem bir dizinin parçası olarak birden çok kez çağrılıyorsa ve bu, o dizideki son çağrı değilse doğrudur.

const video = document.querySelector('video');
navigator.mediaSession.setActionHandler('seekto', (details) => {
if (details.fastSeek && 'fastSeek' in video) {
// Only use fast seek if supported.
video.fastSeek(details.seekTime);
return;
}
video.currentTime = details.seekTime;
// TODO: Update playback state.
});

Oynatma konumunu ayarla #

Medya oynatma konumunu bir bildirimde doğru bir şekilde görüntülemek, aşağıda gösterildiği gibi konum durumunu uygun bir zamanda ayarlamak kadar basittir. Konum durumu, ortam oynatma hızı, süre ve geçerli zamanın bir birleşimidir.

Süre sağlanmalı ve pozitif olmalıdır. Pozisyon pozitif ve süreden az olmalıdır. Oynatma hızı 0’dan büyük olmalıdır.

const video = document.querySelector('video');
function updatePositionState() {
if ('setPositionState' in navigator.mediaSession) {
navigator.mediaSession.setPositionState({
duration: video.duration,
playbackRate: video.playbackRate,
position: video.currentTime,
});
}
}
// When video starts playing, update duration.
await video.play();
updatePositionState();
// When user wants to seek backward, update position.
navigator.mediaSession.setActionHandler('seekbackward', (details) => {
/* ... */
updatePositionState();
});
// When user wants to seek forward, update position.
navigator.mediaSession.setActionHandler('seekforward', (details) => {
/* ... */
updatePositionState();
});
// When user wants to seek to a specific time, update position.
navigator.mediaSession.setActionHandler('seekto', (details) => {
/* ... */
updatePositionState();
});
// When video playback rate changes, update position state.
video.addEventListener('ratechange', (event) => {
updatePositionState();
});

Konum durumunu sıfırlamak, onu ayarlamak kadar kolaydır. null.

// Reset position state when media is reset.
navigator.mediaSession.setPositionState(null);

Video konferans işlemleri #

Kullanıcı görüntülü aramasını Resim İçinde Resim penceresine koyduğunda, tarayıcı mikrofon, kamera ve kapatma için kontrolleri görüntüleyebilir. Kullanıcı bunları tıkladığında, web sitesi bunları aşağıdaki video konferans işlemleri aracılığıyla işler. Bir örnek için bkz. Video Konferans örneği.

Mikrofonu değiştir #

bu "togglemicrophone" eylemi, kullanıcının mikrofonun sesini kapatmak veya açmak istediğini belirtir. bu setMicrophoneActive(isActive) yöntem, tarayıcıya web sitesinin o anda mikrofonu etkin olarak kabul edip etmediğini söyler.

let isMicrophoneActive = false;
navigator.mediaSession.setActionHandler('togglemicrophone', () => {
if (isMicrophoneActive) {
// Mute the microphone.
} else {
// Unmute the microphone.
}
isMicrophoneActive = !isMicrophoneActive;
navigator.mediaSession.setMicrophoneActive(isMicrophoneActive);
});

Kamerayı değiştir #

bu "togglecamera" eylemi, kullanıcının aktif kamerayı açmak veya kapatmak istediğini belirtir. bu setCameraActive(isActive) yöntem, tarayıcının web sitesini etkin olarak kabul edip etmediğini gösterir.

let isCameraActive = false;
navigator.mediaSession.setActionHandler('togglecamera', () => {
if (isCameraActive) {
// Disable the camera.
} else {
// Enable the camera.
}
isCameraActive = !isCameraActive;
navigator.mediaSession.setCameraActive(isCameraActive);
});

Telefonu kapatmak #

bu "hangup" eylem, kullanıcının aramayı bitirmek istediğini gösterir.

navigator.mediaSession.setActionHandler('hangup', () => {
// End the call.
});

Slayt eylemleri sunma #

Kullanıcı slayt sunumunu Resim içinde Resim penceresine koyduğunda, tarayıcı slaytlar arasında gezinmek için kontroller görüntüleyebilir. Kullanıcı bunları tıkladığında, web sitesi bunları Media Session API aracılığıyla işler. Bir örnek için bkz. Slayt örneğini sunma.

Bir onceki slayt #

bu "previousslide" eylemi, kullanıcının slaytları sunarken bir önceki slayda geri dönmek istediğini belirtir.

navigator.mediaSession.setActionHandler('previousslide', () => {
// Show previous slide.
});

Sonraki slayt #

bu "nextslide" eylemi, kullanıcının slaytları sunarken bir sonraki slayda geçmek istediğini belirtir.

navigator.mediaSession.setActionHandler('nextslide', () => {
// Show next slide.
});

Örnekler #

bazılarına göz atın Medya Oturumu örnekleri özellikli Blender Vakfı Ve Jan Morgenstern’in çalışması.

Kaynaklar #