इस लेख में, मीडिया स्ट्रीमिंग के ज़्यादा ऐडवांस कॉन्सेप्ट के बारे में बताया गया है. साथ ही, आपको स्ट्रीमिंग के अलग-अलग इस्तेमाल के उदाहरणों, प्रोटोकॉल, और एक्सटेंशन के बारे में भी पता चल जाना चाहिए. चलिए, व्याख्या से शुरू करते हैं कि स्ट्रीमिंग क्या है.
मीडिया स्ट्रीमिंग, मीडिया कॉन्टेंट को एक-एक करके डिलीवर करने और उसे फिर से चलाने का एक तरीका है. एक फ़ाइल लोड करने के बजाय, जो नेटवर्क के लिए ऑप्टिमाइज़ न किए जाने पर धीमा हो सकती है, प्लेयर एक मेनिफ़ेस्ट फ़ाइल पढ़ता है, जो यह बताता है कि टारगेट मीडिया किस तरह डेटा को अलग-अलग हिस्सों में बांटता है. बाद में, मीडिया हिस्से को रनटाइम के दौरान डाइनैमिक तरीके से एक साथ जोड़ दिया जाता है. शायद, अलग-अलग बिटरेट के आधार पर, जिसके बारे में आप बाद में जानेंगे.
ध्यान रखें कि आपकी वेबसाइट पर स्ट्रीमिंग की सुविधा उपलब्ध कराने के लिए, सर्वर को Range एचटीटीपी अनुरोध हेडर के साथ काम करना चाहिए. <video> और <source> टैग लेख में, Accept-Ranges हेडर के बारे में ज़्यादा जानें.
स्ट्रीमिंग के इस्तेमाल के उदाहरण
अलग-अलग मीडिया सेगमेंट और स्ट्रीम की जानकारी देने वाले ज़रूरी मेनिफ़ेस्ट तैयार करना बिलकुल आसान नहीं है. हालांकि, स्ट्रीमिंग से
इस्तेमाल के कुछ दिलचस्प उदाहरण मिल जाते हैं
जो सिर्फ़ स्टैटिक सोर्स फ़ाइलों के सेट के सेट <video> एलिमेंट की ओर इशारा करके हासिल नहीं किए जा सकते. बाद के सेक्शन में, आपको
वेब पेज में मीडिया जोड़ने के तरीके के बारे में ज़्यादा जानकारी मिलेगी. अगर आपको <video> एलिमेंट में कई फ़ाइलों को लोड करने के अलावा और भी सुविधाएं चाहिए, तो सबसे पहले आपको मल्टीमीडिया स्ट्रीम करने के कुछ
इस्तेमाल के उदाहरणों के बारे में जानना होगा.
- अडैप्टिव स्ट्रीमिंग में, मीडिया वाले हिस्से को कई बिट रेट में एन्कोड किया जाता है. साथ ही, क्लाइंट की मौजूदा बैंडविथ के हिसाब से सबसे अच्छी क्वालिटी वाला मीडिया सेगमेंट मीडिया प्लेयर को वापस भेज दिया जाता है.
- लाइव ब्रॉडकास्ट वह जगह है जहां मीडिया हिस्सों को कोड में बदला जाता है और रीयल टाइम में उपलब्ध कराया जाता है.
- मीडिया इंजेक्ट करना वह तरीका है जहां विज्ञापनों जैसे दूसरे मीडिया को स्ट्रीम में डाला जाता है. इसके लिए, प्लेयर को मीडिया सोर्स बदलने की ज़रूरत नहीं होती.
स्ट्रीमिंग प्रोटोकॉल
वेब पर सबसे ज़्यादा इस्तेमाल किए जाने वाले दो स्ट्रीमिंग प्रोटोकॉल हैं. डाइनैमिक अडैप्टिव स्ट्रीमिंग ओवर एचटीटीपी (DASH) और एचटीटीपी लाइव स्ट्रीमिंग (HLS). जो प्लेयर इन प्रोटोकॉल के साथ काम करते हैं वे जनरेट की गई मेनिफ़ेस्ट फ़ाइल फ़ेच करेंगे. साथ ही, वे यह तय करेंगे कि कौनसे मीडिया हिस्से का अनुरोध करना है, और इसके बाद उन्हें आखिरी मीडिया फ़ॉर्मैट में जोड़ देगा.
कोई स्ट्रीम चलाने के लिए <video> का इस्तेमाल किया जा रहा है
कई ब्राउज़र पर आपकी स्ट्रीम, मूल रूप से नहीं चलेगी. हालांकि, HLS में HLS की मदद से वीडियो चलाने की सुविधा है, लेकिन ब्राउज़र आम तौर पर नेटिव DASH की सुविधा नहीं
चलाते हैं. इसका मतलब है कि अक्सर <video> एलिमेंट में मौजूद <source> को मेनिफ़ेस्ट फ़ाइल में ले जाना ही काफ़ी नहीं होता.
<video controls>
<source src="manifest.mpd" type="application/dash+xml">
</video>
असल में, असल में आपको जिस चीज़ की कमी महसूस हो सकती है वह असल में छिपी हुई ताकत होती है. स्ट्रीम कारगर होती हैं और स्ट्रीम का इस्तेमाल करने वाले ऐप्लिकेशन की अलग-अलग ज़रूरतें होती हैं.
मेनिफ़ेस्ट फ़ाइलें आम तौर पर सिंगल मीडिया के कई वैरिएंट के बारे में बताती हैं. अलग-अलग बिटरेट, कई ऑडियो ट्रैक, और यहां तक कि अलग-अलग फ़ॉर्मैट में एन्कोड किए गए एक ही मीडिया के बारे में सोचें.
ऐसा हो सकता है कि कुछ ऐप्लिकेशन, वीडियो को बड़ी संख्या में बफ़र रखना चाहें. ऐसे में हो सकता है कि दूसरे ऐप्लिकेशन, आने वाले किसी एपिसोड के शुरुआती कुछ सेकंड के वीडियो प्रीफ़ेच करना चाहें और कुछ ऐप्लिकेशन ज़रूरत के हिसाब से स्ट्रीमिंग के लिए अपने तरीके से नियम लागू करना चाहें. यहां आपको मीडिया स्ट्रीम चलाने के लिए, ब्राउज़र में पहले से मौजूद किसी सुविधा की ज़रूरत होगी और उम्मीद है कि एक तरह की सुविधा मौजूद है.
मीडिया स्रोत एक्सटेंशन
हालांकि, अच्छी बात यह है कि W3C ने मीडिया सोर्स एक्सटेंशन (एमएसई) नाम की कुछ जानकारी दी है. इसकी मदद से JavaScript हमारी मीडिया स्ट्रीम जनरेट कर सकता है. कम शब्दों में कहें, तो MSE डेवलपर को किसी <video> एलिमेंट में MediaSource ऑब्जेक्ट जोड़ने की अनुमति देता है. साथ ही, वह MediaSource इंस्टेंस से जुड़े बफ़र में सबमिट किए गए मीडिया डेटा को वापस चला सकता है.
बुनियादी उदाहरण
const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
'sourceopen',
() => {
const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const buffer = mediaSource.addSourceBuffer(mimeString);
buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
}
);
ऊपर दिए गए आसान उदाहरण में कुछ बातें बताई गई हैं:
<video>के हिसाब से, इसे किसी यूआरएल से मीडिया डेटा मिल रहा है.- जनरेट किया गया यूआरएल,
MediaSourceइंस्टेंस का सिर्फ़ पॉइंटर है. MediaSourceइंस्टेंस एक या उससे ज़्यादाSourceBufferइंस्टेंस बनाता है.- इसके बाद हम बस बाइनरी मीडिया डेटा को बफ़र में जोड़ते हैं, जैसे कि
fetchका इस्तेमाल करके.
हालांकि, ये बुनियादी सिद्धांत आसान हैं और डैश और एचएलएस के साथ काम करने वाले वीडियो प्लेयर को शुरुआत से लिखा जा सकता है, लेकिन ज़्यादातर लोग पहले से मौजूद मैच्योर ओपन सोर्स सलूशन में से किसी एक को चुनते हैं. जैसे, Shaka Player, JW Player या Video.js.
हालांकि, हमने Kino नाम का एक डेमो मीडिया PWA बनाया है. इससे पता चलता है कि आपको स्ट्रीमिंग के लिए अपनी ऐसी बेसिक मीडिया वेबसाइट कैसे डेवलप करनी चाहिए जो सिर्फ़ <video> एलिमेंट का इस्तेमाल करके, ऑफ़लाइन मीडिया चलाने की सुविधा देती हो. फ़्रेमवर्क और डिजिटल राइट मैनेजमेंट में मदद करने के साथ-साथ, अन्य सुविधाओं के लिए भी हमारे रोडमैप में कई प्लान हैं. इसलिए, समय-समय पर अपडेट देखते रहें या किसी सुविधा का अनुरोध करें.
इसके बारे में ज़्यादा जानने के लिए, ऑफ़लाइन स्ट्रीमिंग के साथ पीडब्ल्यूए लेख में जाएं.
मीडिया हिस्से का फ़ॉर्मैट
लंबे समय तक, डैश और एचएलएस को अलग-अलग फ़ॉर्मैट में एन्कोड करने के लिए मीडिया हिस्से की ज़रूरत पड़ती थी. हालांकि, साल 2016 में HLS में स्टैंडर्ड फ़्रैगमेंट MP4 (fMP4) फ़ाइलें जोड़ी गई थीं. HLS ऐसा फ़ॉर्मैट है जो DASH में भी काम करता है.
fMP4 कंटेनर और H.264 कोडेक, दोनों का इस्तेमाल करके बनाए गए वीडियो के हिस्से, दोनों प्रोटोकॉल के साथ काम करते हैं. साथ ही, ये वीडियो ज़्यादातर प्लेयर पर चलाए जा सकते हैं. इससे कॉन्टेंट प्रोड्यूसर अपने वीडियो को सिर्फ़ एक बार एन्कोड कर सकते हैं. इससे समय और डिस्क में बचा स्टोरेज बचता है.
बेहतर क्वालिटी और फ़ाइलों का कम साइज़ पाने के लिए, VP9 जैसे बेहतर फ़ॉर्मैट का इस्तेमाल करके, मीडिया हिस्से के कई सेट को कोड में बदला जा सकता है. हालांकि, आगे बढ़ने से पहले आपको वेब के लिए मीडिया फ़ाइलें तैयार करने का तरीका सीखना होगा और यह आगे है.