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