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