Media Session API की मदद से, मीडिया सूचनाओं और प्लेबैक कंट्रोल को पसंद के मुताबिक बनाएं

हार्डवेयर मीडिया बटन के साथ इंटिग्रेट करने, मीडिया से जुड़ी सूचनाओं को पसंद के मुताबिक बनाने वगैरह का तरीका.

François Beaufort

Media Session API की शुरुआत की गई है, ताकि लोगों को यह पता चल सके कि उनके ब्राउज़र में अभी क्या चल रहा है और पेज पर वापस जाए बिना इसे कंट्रोल किया जा सकता है. इसकी मदद से, वेब डेवलपर अपने हिसाब से इस अनुभव को कस्टमाइज़ कर सकते हैं. इसके लिए, वे कस्टम मीडिया सूचनाओं में मौजूद मेटाडेटा, मीडिया इवेंट (जैसे, चलाना, रोकना, आगे/पीछे करना, ट्रैक बदलना), और वीडियो कॉन्फ़्रेंसिंग इवेंट (जैसे, माइक्रोफ़ोन को म्यूट/अन-म्यूट करना, कैमरे को चालू/बंद करना, और कॉल को हैंग अप करना) का इस्तेमाल करते हैं. ये पसंद के मुताबिक बदलाव, कई संदर्भों में उपलब्ध हैं. जैसे, डेस्कटॉप मीडिया हब, मोबाइल पर मीडिया सूचनाएं, और पहने जा सकने वाले डिवाइसों पर. इस लेख में, इन बदलावों के बारे में बताया गया है.

Media Session API के बारे में जानकारी

Media session API से कई फ़ायदे और सुविधाएं मिलती हैं:

• हार्डवेयर मीडिया बटन काम करते हैं.
• मीडिया से जुड़ी सूचनाएं मोबाइल, डेस्कटॉप, और जोड़े गए पहने जाने वाले डिवाइस पर पसंद के मुताबिक बनाई जाती हैं.
• मीडिया हब, डेस्कटॉप पर उपलब्ध है.
• लॉक स्क्रीन पर मीडिया कंट्रोल की सुविधा, ChromeOS और मोबाइल पर उपलब्ध है.
• पिक्चर में पिक्चर विंडो के कंट्रोल, ऑडियो चलाने, वीडियो कॉन्फ़्रेंसिंग, और स्लाइड दिखाने के लिए उपलब्ध हैं.
• मोबाइल पर Assistant इंटिग्रेशन की सुविधा उपलब्ध हो.

इनमें से कुछ बातों को कुछ उदाहरणों की मदद से समझाया गया है.

पहला उदाहरण: अगर उपयोगकर्ता अपने कीबोर्ड पर "अगला ट्रैक" मीडिया बटन दबाते हैं, तो वेब डेवलपर यह कार्रवाई कर सकते हैं. भले ही, ब्राउज़र फ़ोरग्राउंड में हो या बैकग्राउंड में.

दूसरा उदाहरण: अगर उपयोगकर्ताओं के डिवाइस की स्क्रीन लॉक होने के दौरान वे वेब पर पॉडकास्ट सुन रहे हैं, तो भी वे लॉक स्क्रीन पर मौजूद मीडिया कंट्रोल से "पीछे जाएं" आइकॉन दबा सकते हैं. इससे वेब डेवलपर, वीडियो चलाने के समय को कुछ सेकंड पीछे ले जा सकते हैं.

तीसरा उदाहरण: अगर उपयोगकर्ताओं के टैब में ऑडियो चल रहा है, तो वे डेस्कटॉप पर मीडिया हब से आसानी से वीडियो चलाना बंद कर सकते हैं. इससे वेब डेवलपर को उनकी स्थिति को मिटाने का मौका मिलता है.

चौथा उदाहरण: अगर उपयोगकर्ता वीडियो कॉल पर हैं, तो वे वेबसाइट को माइक्रोफ़ोन का डेटा ऐक्सेस करने से रोक सकते हैं. इसके लिए, उन्हें पिक्चर में पिक्चर विंडो में "माइक्रोफ़ोन को टॉगल करें" कंट्रोल को दबाना होगा.

यह काम दो अलग-अलग इंटरफ़ेस से किया जाता है: MediaSession इंटरफ़ेस और MediaMetadata इंटरफ़ेस. पहले सेटिंग की मदद से, उपयोगकर्ता उस कॉन्टेंट को कंट्रोल कर सकते हैं जो चल रहा है. दूसरे चरण में, MediaSession को यह बताया जाता है कि क्या कंट्रोल करने की ज़रूरत है.

उदाहरण के लिए, नीचे दी गई इमेज में दिखाया गया है कि ये इंटरफ़ेस, खास मीडिया कंट्रोल से कैसे जुड़े हैं. इस मामले में, मोबाइल पर मीडिया सूचना.

उपयोगकर्ताओं को बताएं कि क्या चल रहा है

जब कोई वेबसाइट ऑडियो या वीडियो चला रही होती है, तो उपयोगकर्ताओं को मोबाइल पर सूचना ट्रे या डेस्कटॉप पर मीडिया हब में, मीडिया से जुड़ी सूचनाएं अपने-आप मिल जाती हैं. दस्तावेज़ के टाइटल और मिलने वाली सबसे बड़ी आइकॉन इमेज का इस्तेमाल करके, ब्राउज़र सही जानकारी दिखाने की पूरी कोशिश करता है. Media Session API की मदद से, मीडिया की सूचना को पसंद के मुताबिक बनाया जा सकता है. इसके लिए, ज़्यादा जानकारी वाले मीडिया मेटाडेटा का इस्तेमाल किया जा सकता है. जैसे, टाइटल, कलाकार का नाम, एल्बम का नाम, और आर्टवर्क. इनके बारे में यहां बताया गया है.

Chrome, मीडिया की सूचनाएं दिखाने के लिए "पूरी" ऑडियो फ़ोकस का अनुरोध सिर्फ़ तब करता है, जब मीडिया की अवधि कम से कम पांच सेकंड हो. इससे यह पक्का होता है कि डिवाइस पर होने वाली सामान्य आवाज़ों, जैसे कि घंटी बजने पर सूचनाएं न दिखें.

// 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.
}

प्लेबैक खत्म होने पर, मीडिया सेशन को "रिलीज़" करने की कोई ज़रूरत नहीं होती, क्योंकि सूचना अपने-आप हट जाती है. हालांकि, अगला वीडियो चलने पर navigator.mediaSession.metadata का इस्तेमाल किया जाएगा. इसलिए, मीडिया चलाने के सोर्स में बदलाव होने पर, इसे अपडेट करना ज़रूरी है. इससे यह पक्का किया जा सकेगा कि मीडिया सूचना में काम की जानकारी दिखे.

मीडिया मेटाडेटा के बारे में ध्यान रखने वाली कुछ बातें यहां दी गई हैं.

• सूचना आर्टवर्क अरे, BLOB यूआरएल और डेटा यूआरएल के साथ काम करता है.
• अगर कोई आर्टवर्क तय नहीं किया गया है और <link rel=icon> का इस्तेमाल करके तय किए गए साइज़ में कोई आइकॉन इमेज मौजूद है, तो मीडिया सूचनाएं उसका इस्तेमाल करेंगी.
• Android के लिए Chrome में, सूचना के आर्टवर्क का टारगेट साइज़ 512x512 है. कम कीमत वाले डिवाइसों के लिए, यह 256x256 होता है.
• मीडिया एचटीएमएल एलिमेंट के title एट्रिब्यूट का इस्तेमाल, "अभी चल रहा है" macOS विजेट में किया जाता है.
• अगर मीडिया रिसॉर्स को एम्बेड किया गया है (उदाहरण के लिए, iframe में), तो Media Session API की जानकारी को एम्बेड किए गए कॉन्टेक्स्ट से सेट किया जाना चाहिए. स्निपेट यहां देखें.

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

मीडिया के मेटाडेटा में, हर चैप्टर की जानकारी भी जोड़ी जा सकती है. जैसे, सेक्शन का टाइटल, उसका टाइमस्टैंप, और स्क्रीनशॉट इमेज. इससे उपयोगकर्ता, मीडिया के कॉन्टेंट पर नेविगेट कर सकते हैं.

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' },
    ]
  }]
});

इससे लोगों को यह कंट्रोल करने की सुविधा मिलती है कि क्या चल रहा है

मीडिया सेशन ऐक्शन, ऐसी कार्रवाई होती है जिसे वेबसाइट, मौजूदा मीडिया चलाने के दौरान उपयोगकर्ताओं के लिए मैनेज कर सकती है. उदाहरण के लिए, "चलाएं" या "रोकें". कार्रवाइयां, इवेंट की तरह ही होती हैं और करीब-करीब इवेंट की तरह ही काम करती हैं. इवेंट की तरह ही, कार्रवाइयों को लागू करने के लिए, सही ऑब्जेक्ट पर हैंडलर सेट किए जाते हैं. इस मामले में, MediaSession का कोई इंस्टेंस. कुछ कार्रवाइयां तब ट्रिगर होती हैं, जब उपयोगकर्ता हेडसेट, किसी दूसरे रिमोट डिवाइस या कीबोर्ड के बटन दबाते हैं या मीडिया सूचना के साथ इंटरैक्ट करते हैं.

ऐसा हो सकता है कि मीडिया सेशन की कुछ कार्रवाइयां काम न करें. इसलिए, हमारा सुझाव है कि उन्हें सेट करते समय try…catch ब्लॉक का इस्तेमाल करें.

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

मीडिया सेशन ऐक्शन हैंडलर को अनसेट करना उतना ही आसान है जितना उसे 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.`);
}

एक बार सेट हो जाने पर, मीडिया सेशन के ऐक्शन हैंडलर, मीडिया चलाने पर बने रहेंगे. यह इवेंट लिसनर पैटर्न जैसा ही है. हालांकि, किसी इवेंट को मैनेज करने का मतलब है कि ब्राउज़र कोई भी डिफ़ॉल्ट तरीका इस्तेमाल करना बंद कर देता है. साथ ही, इसका इस्तेमाल इस सिग्नल के तौर पर करता है कि वेबसाइट, मीडिया ऐक्शन के साथ काम करती है. इसलिए, जब तक सही ऐक्शन हैंडलर सेट नहीं किया जाता, तब तक मीडिया ऐक्शन कंट्रोल नहीं दिखेंगे.

चलाएं / रोकें

"play" कार्रवाई से पता चलता है कि उपयोगकर्ता मीडिया चलाना फिर से शुरू करना चाहता है, जबकि "pause" से पता चलता है कि वह इसे कुछ समय के लिए रोकना चाहता है.

मीडिया से जुड़ी सूचना में "चलाएं/रोकें" आइकॉन हमेशा दिखाया जाता है और ब्राउज़र, मिलते-जुलते मीडिया इवेंट अपने-आप मैनेज करता है. डिफ़ॉल्ट व्यवहार को बदलने के लिए, मीडिया की "चलाएं" और "रोकें" कार्रवाइयों को यहां दिखाए गए तरीके से मैनेज करें.

उदाहरण के लिए, ब्राउज़र किसी वेबसाइट को चलाने या लोड करते समय, उस वेबसाइट के मीडिया को न चलाने का विचार कर सकता है. इस मामले में, navigator.mediaSession.playbackState को "playing" या "paused" पर सेट करके, इस व्यवहार को बदलें. इससे यह पक्का किया जा सकेगा कि वेबसाइट का यूज़र इंटरफ़ेस (यूआई), मीडिया सूचना कंट्रोल के साथ सिंक रहे.

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';
});

पिछला ट्रैक

"previoustrack" कार्रवाई से पता चलता है कि उपयोगकर्ता, मीडिया चलाने की शुरुआत से मौजूदा मीडिया चलाना चाहता है या अगर मीडिया चलाने की शुरुआत से मौजूदा मीडिया चलाना चाहता है, तो प्लेलिस्ट के पिछले आइटम पर जाना चाहता है.

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

अगला ट्रैक

"nexttrack" कार्रवाई से पता चलता है कि अगर मीडिया चलाने की सुविधा में प्लेलिस्ट की जानकारी है, तो उपयोगकर्ता मीडिया चलाने की सुविधा को प्लेलिस्ट के अगले आइटम पर ले जाना चाहता है.

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

रोकें

"stop" कार्रवाई से पता चलता है कि उपयोगकर्ता मीडिया चलाना बंद करना चाहता है और अगर ज़रूरी हो, तो स्थिति को हटाना चाहता है.

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

वीडियो को पीछे / आगे ले जाना

"seekbackward" कार्रवाई से पता चलता है कि उपयोगकर्ता, मीडिया के चलने का समय थोड़ा पीछे ले जाना चाहता है. वहीं, "seekforward" से पता चलता है कि उपयोगकर्ता, मीडिया के चलने का समय थोड़ा आगे ले जाना चाहता है. दोनों ही मामलों में, शॉर्ट पीरियड का मतलब कुछ सेकंड है.

ऐक्शन हैंडलर में दी गई seekOffset वैल्यू, सेकंड में वह समय होता है जिससे मीडिया प्लेबैक का समय आगे बढ़ता है. अगर यह नहीं दिया गया है (उदाहरण के लिए undefined), तो आपको एक सही समय का इस्तेमाल करना चाहिए (उदाहरण के लिए, 10-30 सेकंड).

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

किसी खास समय पर जाएं

"seekto" कार्रवाई से पता चलता है कि उपयोगकर्ता, मीडिया चलाने के समय को किसी खास समय पर ले जाना चाहता है.

ऐक्शन हैंडलर में दी गई seekTime वैल्यू, मीडिया चलाने के समय को सेकंड में बदलने के लिए होती है.

अगर किसी क्रम के हिस्से के तौर पर कार्रवाई को कई बार कॉल किया जा रहा है और यह उस क्रम में आखिरी कॉल नहीं है, तो ऐक्शन हैंडलर में दिया गया fastSeek बूलियन सही होता है.

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

वीडियो चलाने की पोज़िशन सेट करें

सूचना में मीडिया चलाने की जगह को सही तरीके से दिखाना उतना ही आसान है जितना कि सही समय पर जगह की स्थिति सेट करना. इसका उदाहरण नीचे दिया गया है. पोज़िशन की स्थिति, मीडिया चलाने की दर, अवधि, और मौजूदा समय का कॉम्बिनेशन होती है.

अवधि की वैल्यू दी जानी चाहिए और वह पॉज़िटिव होनी चाहिए. पोज़िशन पॉज़िटिव होनी चाहिए और अवधि से कम होनी चाहिए. वीडियो चलाने की दर 0 से ज़्यादा होनी चाहिए.

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();
});

पोज़िशन की स्थिति को null पर सेट करने की तरह ही, उसे रीसेट करना भी आसान है.

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

वीडियो कॉन्फ़्रेंसिंग से जुड़ी कार्रवाइयां

जब उपयोगकर्ता अपने वीडियो कॉल को पिक्चर में पिक्चर विंडो में डालता है, तो ब्राउज़र में माइक्रोफ़ोन और कैमरे के साथ-साथ कॉल को हैंग करने के कंट्रोल दिख सकते हैं. जब उपयोगकर्ता उन पर क्लिक करता है, तो वेबसाइट उन्हें वीडियो कॉन्फ़्रेंसिंग की इन कार्रवाइयों के ज़रिए मैनेज करती है. उदाहरण के लिए, वीडियो कॉन्फ़्रेंसिंग का सैंपल देखें.

माइक्रोफ़ोन को टॉगल करना

"togglemicrophone" कार्रवाई से पता चलता है कि उपयोगकर्ता माइक्रोफ़ोन को म्यूट या अनम्यूट करना चाहता है. setMicrophoneActive(isActive) तरीका, ब्राउज़र को बताता है कि फ़िलहाल वेबसाइट माइक्रोफ़ोन को चालू मानती है या नहीं.

let isMicrophoneActive = false;

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

कैमरा टॉगल करें

"togglecamera" कार्रवाई से पता चलता है कि उपयोगकर्ता, चालू कैमरे को चालू या बंद करना चाहता है. setCameraActive(isActive) तरीके से पता चलता है कि ब्राउज़र, वेबसाइट को चालू मानता है या नहीं.

let isCameraActive = false;

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

कॉल खत्म करें

"hangup" कार्रवाई से पता चलता है कि उपयोगकर्ता कॉल खत्म करना चाहता है.

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

स्लाइड प्रज़ेंट करने से जुड़ी कार्रवाइयां

जब उपयोगकर्ता अपने स्लाइड प्रज़ेंटेशन को पिक्चर में पिक्चर विंडो में डालता है, तो ब्राउज़र में स्लाइड पर नेविगेट करने के लिए कंट्रोल दिख सकते हैं. जब उपयोगकर्ता उन पर क्लिक करता है, तो वेबसाइट उन्हें Media Session API के ज़रिए मैनेज करती है. उदाहरण के लिए, स्लाइड दिखाने का सैंपल देखें.

पिछली स्लाइड

"previousslide" कार्रवाई से पता चलता है कि उपयोगकर्ता स्लाइड दिखाते समय, पिछली स्लाइड पर वापस जाना चाहता है.

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

अगली स्लाइड

"nextslide" कार्रवाई से पता चलता है कि स्लाइड दिखाते समय, उपयोगकर्ता अगली स्लाइड पर जाना चाहता है.

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

सैंपल

Blender Foundation और Jan Morgenstern के काम वाले कुछ मीडिया सेशन के सैंपल देखें.

संसाधन

• मीडिया सेशन स्पेसिफ़िकेशन: wicg.github.io/mediasession
• खास जानकारी से जुड़ी समस्याएं: github.com/WICG/mediasession/issues
• Chrome में गड़बड़ियां: crbug.com