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

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

François Beaufort

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

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

मीडिया सेशन एपीआई के कई फ़ायदे और सुविधाएं हैं:

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

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

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

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

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

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

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

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

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

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

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

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

सैंपल

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

संसाधन

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