इस लेख में, आपको मीडिया स्ट्रीमिंग के बेहतर कॉन्सेप्ट के बारे में बताया जाएगा. साथ ही, आपको स्ट्रीमिंग के इस्तेमाल के अलग-अलग उदाहरणों, प्रोटोकॉल, और एक्सटेंशन के बारे में अच्छी समझ होनी चाहिए. आइए, सबसे पहले यह जानते हैं कि स्ट्रीमिंग असल में क्या है.
मीडिया स्ट्रीमिंग, एक-एक करके मीडिया कॉन्टेंट को डिलीवर करने और उसे चलाने का एक तरीका है. एक फ़ाइल लोड होने के बजाय, जो नेटवर्क के लिए ऑप्टिमाइज़ न किए जाने पर धीमी हो सकती है, प्लेयर मेनिफ़ेस्ट फ़ाइल को पढ़ता है. इसमें यह बताया जाता है कि टारगेट मीडिया को डेटा के अलग-अलग हिस्सों में कैसे बांटा जाता है. बाद में, मीडिया हिस्से रनटाइम के दौरान डाइनैमिक तौर पर एक साथ स्टिच किए जाते हैं—शायद अलग-अलग बिटरेट पर, जिनके बारे में आप बाद में जानेंगे.
ध्यान रखें कि आपकी वेबसाइट पर स्ट्रीमिंग की सुविधा उपलब्ध कराने के लिए, सर्वर को Range एचटीटीपी अनुरोध हेडर के साथ काम करना होगा. Accept-Ranges हेडर के बारे में ज़्यादा जानने के लिए, <video> और <source> टैग लेख पढ़ें.
स्ट्रीमिंग के इस्तेमाल के उदाहरण
मीडिया हिस्से और स्ट्रीम के बारे में जानकारी देने वाले ज़रूरी मेनिफ़ेस्ट
बनाने का तरीका आसान नहीं है. हालांकि, स्ट्रीमिंग करने से इस्तेमाल के कुछ ऐसे दिलचस्प उदाहरण सामने आ जाते हैं
जिनके लिए सिर्फ़ <video> एलिमेंट को स्टैटिक सोर्स फ़ाइलों के सेट में
दिखाया नहीं जा सकता. बाद के सेक्शन में, आपको वेब पेज में मीडिया जोड़ने के तरीके के बारे में ज़्यादा जानकारी मिलेगी. सबसे पहले, अगर आपको <video> एलिमेंट में कई फ़ाइलें लोड करने के अलावा और जानना है, तो मल्टीमीडिया स्ट्रीम करने के लिए
इस्तेमाल के कुछ उदाहरणों के बारे में जानें.
- अडैप्टिव स्ट्रीमिंग वह है जिसमें मीडिया हिस्से कई बिटरेट में एन्कोड किए जाते हैं. साथ ही, क्लाइंट के मौजूदा बैंडविथ के हिसाब से सबसे अच्छी क्वालिटी वाला मीडिया हिस्सा फ़िट मीडिया प्लेयर पर दिखता है.
- लाइव ब्रॉडकास्ट: इसमें मीडिया के हिस्सों को कोड में बदला जाता है और उन्हें रीयल-टाइम में उपलब्ध कराया जाता है.
- मीडिया इंजेक्ट करना, वह जगह है जहां प्लेयर को बिना मीडिया सोर्स बदले, विज्ञापनों जैसे दूसरे मीडिया को स्ट्रीम में डाला जाता है.
स्ट्रीमिंग के प्रोटोकॉल
वेब पर आम तौर पर इस्तेमाल किए जाने वाले दो स्ट्रीमिंग प्रोटोकॉल हैं, डाइनैमिक अडैप्टिव स्ट्रीमिंग ओवर एचटीटीपी (डीएएसएच) और एचटीटीपी लाइव स्ट्रीमिंग (एचएलएस). इन प्रोटोकॉल के साथ काम करने वाले प्लेयर, जनरेट की गई मेनिफ़ेस्ट फ़ाइल फ़ेच करेंगे और यह पता लगाएंगे कि किस मीडिया हिस्से का अनुरोध करना है. इसके बाद, इन प्रोटोकॉल को फ़ाइनल मीडिया अनुभव में शामिल किया जाएगा.
स्ट्रीम चलाने के लिए, <video> का इस्तेमाल किया जा रहा है
कई ब्राउज़र आपकी स्ट्रीम को नेटिव तौर पर नहीं चलाएंगे. 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का इस्तेमाल करके.
ये बुनियादी सिद्धांत आसान हैं. साथ ही, शुरुआत से डैश और HLS के साथ काम करने वाला वीडियो प्लेयर बनाया जा सकता है. हालांकि, ज़्यादातर लोग पहले से मौजूद ओपन सोर्स सलूशन में से किसी एक को चुनते हैं. जैसे, Shaka Player, JW Player या Video.js.
हालांकि, हमने Kino नाम का एक डेमो मीडिया PWA बनाया है जिससे यह पता चलता है कि आपको एक ऐसी बेसिक स्ट्रीमिंग मीडिया वेबसाइट
बनाने के लिए क्या करना है जो सामान्य <video> एलिमेंट का इस्तेमाल करके
ऑफ़लाइन मीडिया चलाने की सुविधा देती हो. अन्य सुविधाओं के साथ-साथ फ़्रेमवर्क और डिजिटल राइट मैनेजमेंट को बढ़ावा देने के लिए भी हमारे रोडमैप में कई प्लान हैं. इसलिए, समय-समय पर अपडेट देखते रहें या किसी सुविधा के लिए अनुरोध करें.
ऑफ़लाइन स्ट्रीमिंग के साथ PWA लेख में, इसके बारे में ज़्यादा जानें.
मीडिया हिस्सों का फ़ॉर्मैट
लंबे समय तक, DASH और HLS को अलग-अलग फ़ॉर्मैट में कोड में बदलने के लिए मीडिया हिस्से की ज़रूरत होती थी. हालांकि, 2016 में स्टैंडर्ड फ़्रैगमेंटेड MP4 (fMP4) फ़ाइलों के लिए सहायता HLS में जोड़ी गई थी. HLS एक ऐसा फ़ॉर्मैट है जो DASH भी काम करता है.
fMP4 कंटेनर और H.264 कोडेक का इस्तेमाल करने वाले वीडियो हिस्सों, दोनों प्रोटोकॉल पर काम करते हैं. साथ ही, ज़्यादातर प्लेयर इन्हें चला सकते हैं. इससे कॉन्टेंट प्रोड्यूसर सिर्फ़ एक बार अपने वीडियो को कोड में बदल सकते हैं. इससे समय और डिस्क की मेमोरी की बचत होती है.
बेहतर क्वालिटी और कम साइज़ वाली फ़ाइलों के लिए, हो सकता है कि आप VP9 जैसे बेहतर फ़ॉर्मैट का इस्तेमाल करके, मीडिया हिस्सों के कई सेट को कोड में बदलना चाहें. हालांकि, आगे बढ़ने से पहले आपको वेब के लिए मीडिया फ़ाइलें तैयार करने का तरीका जानना होगा.