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

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

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

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

Media session API के कई फ़ायदे और क्षमताएं हैं:

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

कुछ उदाहरणों में, इनमें से कुछ बातें दिखाई गई हैं.

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

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

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

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

यह काम दो अलग-अलग इंटरफ़ेस से किया जाता है: 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 का इस्तेमाल किया जाएगा. इसलिए, मीडिया प्लेबैक का सोर्स बदलने पर इसे अपडेट करना ज़रूरी है, ताकि यह पक्का किया जा सके कि मीडिया से जुड़ी सूचना में काम की जानकारी दिखे.

मीडिया मेटाडेटा के बारे में कुछ बातों का ध्यान रखना ज़रूरी है.

• सूचना आर्टवर्क का कलेक्शन, ब्लॉब यूआरएल और डेटा यूआरएल के साथ काम करता है.
• अगर किसी आर्टवर्क के बारे में नहीं बताया गया है और पसंद के मुताबिक साइज़ में आइकॉन इमेज (<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.
});

सैंपल

मीडिया सेशन के कुछ सैंपल देखें, जिनमें ब्लेंडर फ़ाउंडेशन और जैन मॉर्गनस्टर्न के काम दिखाए गए.

संसाधन

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