हार्डवेयर मीडिया कुंजियों के साथ इंटिग्रेट करने, मीडिया सूचनाओं को पसंद के मुताबिक बनाने वगैरह का तरीका.
उपयोगकर्ताओं को यह बताने के लिए कि उनके ब्राउज़र में फ़िलहाल क्या चल रहा है और उसे कंट्रोल करने के लिए, Media Session API लॉन्च किया गया है. ऐसा, लॉन्च करने वाले पेज पर वापस जाए बिना किया जा सकता है. इसकी मदद से वेब डेवलपर, कस्टम मीडिया सूचनाओं में मौजूद मेटाडेटा के ज़रिए, इस अनुभव को पसंद के मुताबिक बना सकते हैं. साथ ही, मीडिया इवेंट जैसे कि चलाना, रोकना, खोजना, ट्रैक बदलना, और म्यूट/अनम्यूट जैसे, माइक्रोफ़ोन, टर्नऑन/टर्नऑफ़ कैमरा, और कॉल काटना शामिल है. ये कस्टमाइज़ेशन कई कॉन्टेक्स्ट में उपलब्ध हैं. इनमें डेस्कटॉप मीडिया हब, मोबाइल पर मीडिया सूचनाएं और यहां तक कि पहने जाने वाले डिवाइस पर भी उपलब्ध हैं. मैं इस लेख में इन कस्टमाइज़ेशन के बारे में बताऊँगा.
Media Session API के बारे में जानकारी
Media Session API कई फ़ायदे और क्षमताएं उपलब्ध कराता है:
- हार्डवेयर मीडिया कुंजियां इस्तेमाल की जा सकती हैं.
- मीडिया से जुड़ी सूचनाओं को मोबाइल, डेस्कटॉप, और पहने जाने वाले डिवाइस से अपनी पसंद के मुताबिक बनाया जा सकता है.
- मीडिया हब, डेस्कटॉप पर उपलब्ध है.
- लॉक स्क्रीन पर मीडिया कंट्रोल करने की सुविधा, ChromeOS और मोबाइल पर उपलब्ध है.
- ऑडियो प्लेबैक, वीडियो कॉन्फ़्रेंसिंग, और प्रज़ेंटिंग स्लाइड के लिए, पिक्चर में पिक्चर विंडो के कंट्रोल उपलब्ध हैं.
- मोबाइल पर Assistant को इंटिग्रेट करने की सुविधा उपलब्ध है.
कुछ उदाहरणों में, इनमें से कुछ बातें बताई गई हैं.
उदाहरण 1: अगर उपयोगकर्ता अपने कीबोर्ड का "अगला ट्रैक" मीडिया बटन दबाते हैं, तो वेब डेवलपर उपयोगकर्ता की यह कार्रवाई मैनेज कर सकते हैं. भले ही, ब्राउज़र फ़ोरग्राउंड में हो या बैकग्राउंड में.
उदाहरण 2: अगर उपयोगकर्ता डिवाइस की स्क्रीन लॉक होने पर भी वेब पर पॉडकास्ट सुनते हैं, तो वे लॉक स्क्रीन मीडिया कंट्रोल से "पीछे जाएं" आइकॉन दबा सकते हैं. इससे वेब डेवलपर वीडियो चलाने के समय को कुछ सेकंड पीछे ले जाएंगे.
उदाहरण 3: अगर उपयोगकर्ताओं के पास ऑडियो चलाने वाले टैब हैं, तो वे डेस्कटॉप पर मीडिया हब से वीडियो चलाने की सुविधा को आसानी से रोक सकते हैं. इससे वेब डेवलपर को अपनी स्टेटस हटाने का मौका मिल जाता है.
उदाहरण 4: अगर उपयोगकर्ता वीडियो कॉल में हैं, तो वे पिक्चर में पिक्चर विंडो में "टॉगल माइक्रोफ़ोन" कंट्रोल दबा सकते हैं, ताकि वेबसाइट को माइक्रोफ़ोन डेटा लेने से रोका जा सके.
यह काम दो अलग-अलग इंटरफ़ेस से किया जाता है: 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 का इस्तेमाल अगली बार वीडियो शुरू होने पर किया जाएगा. इसलिए, जब मीडिया प्लेबैक सोर्स बदलता है, तब उसे अपडेट करना ज़रूरी होता है. इससे यह पक्का किया जा सकता है कि मीडिया नोटिफ़िकेशन में काम की जानकारी दिखे.
मीडिया मेटाडेटा के बारे में कुछ बातों का ध्यान रखना ज़रूरी है.
- सूचना आर्टवर्क का कलेक्शन, ब्लॉब यूआरएल और डेटा यूआरएल के साथ काम करता है.
- अगर कोई आर्टवर्क नहीं बताया गया है और पसंद के साइज़ का कोई आइकॉन इमेज (
<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>
उपयोगकर्ताओं को यह कंट्रोल करने की अनुमति दें कि कौनसा कॉन्टेंट चल रहा है
मीडिया सेशन के लिए की जाने वाली कार्रवाई, एक ऐसी कार्रवाई होती है (उदाहरण के लिए, "चलाएं" या "रोकें") जिसे वेबसाइट, उपयोगकर्ताओं के लिए तब मैनेज कर सकती है, जब वे किसी मौजूदा मीडिया प्लेबैक से इंटरैक्ट करते हैं. कार्रवाइयां,
इवेंट की तरह ही काम करती हैं. इवेंट की तरह,
इस मामले में, सही ऑब्जेक्ट (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.
});
ब्राउज़र सहायता
- 111
- 111
- x
- x
अगली स्लाइड
"nextslide" कार्रवाई से पता चलता है कि स्लाइड दिखाते समय उपयोगकर्ता, अगली स्लाइड पर जाना चाहता है.
navigator.mediaSession.setActionHandler('nextslide', () => {
// Show next slide.
});
ब्राउज़र सहायता
- 111
- 111
- x
- x
सैंपल
ब्लेंडर फ़ाउंडेशन और जेन मॉर्गनस्टर्न के काम वाले मीडिया सेशन के कुछ सैंपल देखें.
संसाधन
- मीडिया सेशन की खास जानकारी: wicg.github.io/mediasession
- खास जानकारी से जुड़ी समस्याएं: github.com/WICG/mediasession/issues
- Chrome की गड़बड़ियां: crbug.com