Media Session API'si ile medya bildirimlerini ve oynatma kontrollerini özelleştirme

Donanım medya tuşlarıyla entegrasyon, medya bildirimlerini özelleştirme ve daha fazlasını yapma.

François Beaufort

Kullanıcılara tarayıcılarında o anda ne çaldığını bildirmek ve bunu kontrol etmek için geri dönmesine gerek kalmadan Media Session API'si, tanıttık. Web geliştiricilerinin bu deneyimi özelleştirerek oynatma, duraklatma ve oynatma gibi medya etkinliklerindeki sesi kapatma/açma gibi video konferans etkinliklerini ve video konferans etkinliklerini arama, izleme mikrofonu açın/kapatın ve telefonu kapatın. Bu özelleştirmeler, masaüstü medya merkezleri, medya bildirimleri kullanıcılara ulaşabiliyoruz. Bu özelleştirmeleri bu makaleye göz atın.

Media Session API'si hakkında

Media session API'si çeşitli avantajlar ve özellikler sunar:

• Donanım medya tuşları desteklenir.
• Medya bildirimleri; mobil cihazlarda, masaüstünde ve eşlenmiş giyilebilir cihazlarda özelleştirilmiştir.
• Medya merkezi masaüstünde kullanılabilir.
• Kilit ekranı medya denetimleri, ChromeOS'te ve mobil cihazlarda kullanılabilir.
• Pencere içinde pencere kontrolleri ses çalma için kullanılabilir. video konferans ve slayt sunma gibi yöntemleri kullanabilirsiniz.
• Mobil cihazlarda Asistan entegrasyonu kullanılabilir.

Birkaç örnekle bu noktaların bazılarını görebilirsiniz.

1. Örnek: Kullanıcılar "sonraki parça"ya bastığında klavyedeki medya tuşunu kullanırken Web geliştiricileri, tarayıcı ön planda olsa da bu kullanıcı işlemini gerçekleştirebilir arka plana alabilirsiniz.

2. Örnek: Kullanıcılar, cihazları sırasında web'de bir podcast dinlerse kullanıcılar "geri sar" düğmesine basabilir. kilit simgesinden web geliştiricilerinin oynatma süresini birkaç puan geri taşıyabilmeleri için medya denetimlerini ekranlayın saniye.

3. Örnek: Kullanıcıların ses çalan sekmeleri varsa içeriği kolayca durdurabilirler medya merkezinden oynatabilirsiniz. Bu şekilde, web geliştiricilerine durumunu netleştirmesine yardımcı olabilir.

4. Örnek: Görüntülü görüşme yapan kullanıcılar "açma/kapatma" düğmesine mikrofon" simgesini tıklayın. mikrofon verisi alınıyor.

Bu işlem iki farklı arayüzle yapılır: MediaSession arayüzü MediaMetadata arayüzü. İlki, kullanıcıların satın alma işlemi yaparken çalıyor. İkincisi, MediaSession adlı müşteriye neyin kontrol edilmesi gerektiğini nasıl bildireceğinizdir.

Örnek vermek gerekirse, aşağıdaki resimde bu arayüzlerin belirli bir arayüzle ilişkisi medya denetimleri. Bu durumda mobil cihazda bir medya bildirimi.

Kullanıcılara hangi videonun çaldığını bildirin

Bir web sitesinde ses veya video oynatıldığında kullanıcılar otomatik olarak medya alır cihazınızdaki bildirim tepsisinde veya masaüstü. Tarayıcı, uygun bilgileri göstermek için dokümanın başlığını ve bulabildiği en büyük simge resmini gösterir. Medya Oturumu ile medya bildirimini biraz daha zengin medya ile özelleştirmek mümkündür başlık, sanatçı adı, albüm adı ve eser gibi meta verileri aşağıda görebilirsiniz.

Chrome "tam" istiyor ses odağı, medya bildirimlerinin yalnızca medya süresi en az 5 saniye olmalıdır. Bu sayede, arızi seslerin bildirimler gösterilmez.

// 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 "yayınlama" gerekmez medya oturumunda bildirimi otomatik olarak kaybolur. Gelecekteki Sonraki oynatma başlatıldığında navigator.mediaSession.metadata kullanılacak olabiliyor. Bu nedenle, medya oynatma kaynağı veya veya değişikliklerin medya bildirimlerinde ilgili bilginin gösterilmesi için kullanılır.

Medya meta verileriyle ilgili dikkat edilmesi gereken birkaç nokta vardır.

• Bildirim posteri dizisi, blob URL'lerini ve veri URL'lerini destekler.
• Herhangi bir poster tanımlanmamışsa ve istediğiniz boyutta bir simge resmi (<link rel=icon> kullanılarak belirtilir) varsa medya bildirimleri bunu kullanır.
• Android için Chrome'da bildirim posterlerinin hedef boyutu: 512x512. Örneğin, düşük teknoloji cihazlarda 256x256.
• Medya HTML öğesinin title özelliği, "Şimdi oynatılıyor"da kullanılır macOS widget'ı.
• Medya kaynağı yerleştirilmişse (ör. iFrame içine) Media Session API'si bilgileri, yerleştirilmiş bağlamdan ayarlanmalıdır. Aşağıdaki snippet'i inceleyin.

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

Medya meta verilerine bölüm başlığı, zaman damgası ve ekran görüntüsü gibi tek tek bölüm bilgileri de ekleyebilirsiniz. Bu, kullanıcıların medya içeriği arasında gezinmesine olanak tanır.

navigator.mediaSession.metadata = new MediaMetadata({
  // title, artist, album, artwork, ...
  chapterInfo: [{
    title: 'Chapter 1',
    startTime: 0,
    artwork: [
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  }, {
    title: 'Chapter 2',
    startTime: 42,
    artwork: [
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  }]
});

Kullanıcıların oynatılan içeriği kontrol etmesine izin verin

Medya oturumu işlemi, bir web sitesinin geçerli medya oynatmayla etkileşimde bulunan kullanıcılara gösterilecek. İşlemler ve olaylarla hemen hemen aynı şekilde işler. Etkinlikler gibi işlemler de uygun bir nesnede işleyicilerin ayarlanmasıyla uygulanır. Bu durumda MediaSession. Bazı işlemler, kullanıcılar şuna bastığında tetiklenir: başka bir uzak cihazdaki veya klavyedeki düğmeleri kullanabilir ya da medya bildirimine dokunun.

Bazı medya oturumu işlemleri desteklenmeyebilir. Bu nedenle, ayarlarken try…catch bloğunu kullanın.

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 işlem işleyicisinin ayarını iptal etmek, null değerine ayarlamak kadar kolaydır.

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.`);
}

Medya oturumu işlem işleyicileri, ayarlandıktan sonra medya oynatmaları boyunca kullanılabilir olmaya devam eder. Bu, bir etkinliği işleme dışında, etkinlik işleyici kalıbına benzer. tarayıcının, herhangi bir varsayılan davranışı artık yapmadığı ve bunu tarayıcıdaki Web sitesinin medya işlemini desteklediğini gösteren bir işaret. Dolayısıyla, medya işlemi kontrolleri uygun işlem işleyici ayarlanmadığı sürece gösterilmez.

Oynat / duraklat

"play" işlemi, kullanıcının medya oynatmayı devam ettirmek istediğini gösterir "pause" bunu geçici olarak durdurmak istediğinizi gösteriyor.

"Oynat/duraklat" simgesi her zaman bir medya bildiriminde gösterilir ve medya etkinlikleri tarayıcı tarafından otomatik olarak işlenir. Varsayılan ayarları geçersiz kılmak için davranış, "oynatma" tutma ve "pause" (duraklat) medya işlemleri gerçekleştirilecektir.

Tarayıcı, arama veya video oynatma sırasında bir web sitesinin medya oynatmadığını yükleniyor. Bu durumda, Emin olmak için "playing" veya "paused" adlı kullanıcıya navigator.mediaSession.playbackState Web sitesinin kullanıcı arayüzü, medya bildirim kontrolleriyle senkronize oluyor.

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

"previoustrack" işlemi, kullanıcının başından itibaren oynatıldığına dair bir konsepte bağlı olarak medya oynatıldığında oynatma listesindeki bir önceki öğeye gidin oynatma listesi kavramına sahip.

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

Sonraki parça

"nexttrack" işlemi, kullanıcının medya oynatmayı şu klasöre taşımak istediğini gösterir: oynatma listesindeki bir sonraki öğe.

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

Durdur

"stop" işlemi, kullanıcının medya oynatmayı durdurmak istediğini ve durumu silebilirsiniz.

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

Geri / ileri sar

"seekbackward" işlemi, kullanıcının medyayı taşımak istediğini gösterir oynatma süresinde kısa bir süre geriye doğru, "seekforward" ise istekte bulunduğunu gösterir medya oynatma süresini kısa bir süre ileri taşımak için kullanılır. Her iki durumda da, kısa süre birkaç saniye anlamına gelir.

İşlem işleyicide sağlanan seekOffset değeri, işlemin gerçekleşmesi için gereken saniye cinsinden süredir. medya oynatma süresini değiştirebilirim. Bu bilgi sağlanmamışsa (örneğin, undefined) makul bir süre kullanmalısınız (ör. 10-30 saniye).

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 sar

"seekto" işlemi, kullanıcının medya oynatmayı taşımak istediğini gösterir zaman alabilir.

İşlem işleyicide sağlanan seekTime değeri, işlemin gerçekleşmesi için gereken saniye cinsinden süredir. medya oynatma süresini taşıyabilir.

İşlem işleyicide sağlanan fastSeek boole değeri, işlem bir dizinin parçası olarak birden çok kez çağrılıyor ve bu son çağrı değil bu sırada çalışır.

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

Bildirimde medya oynatma konumunu doğru şekilde göstermek çok basittir. aşağıda gösterildiği gibi uygun bir zamanda ayarlamak için kullanılır. İlgili içeriği oluşturmak için kullanılan konum durumu, medya oynatma hızı, süresi ve geçerli saat.

Süre belirtilmelidir ve pozitif olmalıdır. Pozitif olmalıdır. daha kısa olabilir. 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, null olarak ayarlamak kadar kolaydır.

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

Video konferans işlemleri

Kullanıcı, video görüşmesini Pencere İçinde Pencere penceresine yerleştirdiğinde, tarayıcı, mikrofon, kamera ve telefonu kapatma kontrolleri görüntüleyebilir. Kullanıcı bunları tıkladığında web sitesi bunları video üzerinden işler. konferans işlemleriyle ilgili daha fazla bilgi edinebilirsiniz. Örnek için Video Konferans örneğine bakın.

Mikrofonu aç/kapat

"togglemicrophone" işlemi, kullanıcının sesi kapatmak veya açmak istediğini gösterir mikrofon simgesine dokunun. setMicrophoneActive(isActive) yöntemi, tarayıcıya Web sitesinin mikrofonu etkin olarak kabul edip etmediği.

let isMicrophoneActive = false;

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

Kameralar arasında geçiş yap

"togglecamera" işlemi, kullanıcının etkin durumdaki kameranızı açabilir veya kapatabilirsiniz. setCameraActive(isActive) yöntemi, Tarayıcı, web sitesini etkin olarak kabul eder.

let isCameraActive = false;

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

Kapatın.

"hangup" işlemi, kullanıcının bir görüşmeyi sonlandırmak istediğini gösterir.

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

Slaytlarla ilgili işlemleri sunma

Kullanıcı slaytlarını Pencere İçinde Pencere penceresine yerleştirdiğinde, tarayıcı, slaytlar arasında gezinmeyle ilgili kontroller görüntüleyebilir. Kullanıcı web sitesi bunları Media Session API aracılığıyla işler. Örneğin, Örneğin, Slaytlar'ı sunma örneğini inceleyin.

Önceki slayt

"previousslide" işlemi, kullanıcının önceki slaytta bulabilirsiniz.

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

Sonraki slayt

"nextslide" işlemi, kullanıcının sonraki slayta gitmek istediğini gösterir dikkat edin.

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

Örnekler

Blender Foundation'ı içeren bazı Medya Oturumu örneklerine göz atın ve Jan Morgenstern'ın çalışması.

Kaynaklar

• Medya Oturumu Spesifikasyonu: wicg.github.io/mediasession
• Spesifikasyon Sorunları: github.com/WICG/mediasession/issues
• Chrome Hataları: crbug.com