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