पब्लिश होने की तारीख: 4 मई, 2021
Media Capture and Streams API के संदर्भ में, MediaStreamTrack इंटरफ़ेस, स्ट्रीम में मौजूद किसी एक मीडिया ट्रैक को दिखाता है. आम तौर पर, ये ऑडियो या वीडियो ट्रैक होते हैं. हालांकि, दूसरे तरह के ट्रैक भी मौजूद हो सकते हैं.
MediaStream ऑब्जेक्ट में, शून्य या उससे ज़्यादा MediaStreamTrack ऑब्जेक्ट होते हैं. ये अलग-अलग ऑडियो या वीडियो ट्रैक को दिखाते हैं. हर MediaStreamTrack में एक या उससे ज़्यादा चैनल हो सकते हैं. चैनल, मीडिया स्ट्रीम की सबसे छोटी यूनिट को दिखाता है. जैसे, किसी स्पीकर से जुड़ा ऑडियो सिग्नल. जैसे, स्टीरियो ऑडियो ट्रैक में बाईं या दाईं ओर.
MediaStreamTrack के लिए इंसर्ट किए जा सकने वाले स्ट्रीम क्या हैं?
MediaStreamTrack के लिए इंसर्ट की जा सकने वाली स्ट्रीम का मुख्य मकसद, MediaStreamTrack के कॉन्टेंट को स्ट्रीम के कलेक्शन के तौर पर दिखाना है. स्ट्रीम को WHATWG Streams API के हिसाब से तय किया जाता है. इन स्ट्रीम में बदलाव करके, नए कॉम्पोनेंट जोड़े जा सकते हैं.
डेवलपर को वीडियो (या ऑडियो) स्ट्रीम का ऐक्सेस सीधे तौर पर देने से, वे स्ट्रीम में सीधे तौर पर बदलाव कर सकते हैं. इसके उलट, वीडियो में बदलाव करने के लिए पारंपरिक तरीकों का इस्तेमाल करने पर, डेवलपर को <canvas> जैसे इंटरमीडियरी का इस्तेमाल करना पड़ता है. (इस तरह की प्रोसेस के बारे में ज़्यादा जानकारी के लिए, उदाहरण के तौर पर वीडियो + कैनवस = जादू लेख पढ़ें.)
ब्राउज़र समर्थन
MediaStreamTrack के लिए इंसर्ट की जा सकने वाली स्ट्रीम की सुविधा, Chrome 94 से काम करती है.
इस्तेमाल के उदाहरण
MediaStreamTrack के लिए, स्ट्रीम में डाले जा सकने वाले वीडियो विज्ञापनों के इस्तेमाल के उदाहरणों में ये शामिल हैं, लेकिन इनके अलावा और भी उदाहरण हो सकते हैं:
- वीडियो कॉन्फ़्रेंसिंग के गैजेट, जैसे कि "मज़ेदार टोपियां" या वर्चुअल बैकग्राउंड.
- आवाज़ को प्रोसेस करने वाले सॉफ़्टवेयर, जैसे कि वोकोडर.
MediaStreamTrack के लिए, स्ट्रीम में जोड़े जा सकने वाले वीडियो इस्तेमाल करने का तरीका
MediaStreamTrack के साथ काम करने वाली, डाली जा सकने वाली स्ट्रीम का पता लगाने के लिए, यहां दिया गया तरीका अपनाएं.
if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
// Insertable streams for `MediaStreamTrack` is supported.
}
मुख्य सिद्धांत
MediaStreamTrack के लिए इंसर्ट की जा सकने वाली स्ट्रीम, WebCodecs के सुझाए गए कॉन्सेप्ट पर आधारित है. साथ ही, यह MediaStreamTrack को दो कॉम्पोनेंट में बांटती है:
MediaStreamTrackProcessor, जोMediaStreamTrackऑब्जेक्ट के सोर्स का इस्तेमाल करता है और मीडिया फ़्रेम की एक स्ट्रीम जनरेट करता है. खास तौर पर,VideoFrameयाAudioFrameऑब्जेक्ट. इसे ट्रैक सिंक के तौर पर देखा जा सकता है. यह ट्रैक से अनकोड किए गए फ़्रेम कोReadableStreamके तौर पर दिखा सकता है.MediaStreamTrackGenerator, जो मीडिया फ़्रेम की स्ट्रीम का इस्तेमाल करता है औरMediaStreamTrackइंटरफ़ेस दिखाता है. इसे किसी भी सिंक को दिया जा सकता है. जैसे,getUserMedia()से मिले ट्रैक को दिया जाता है. यह मीडिया फ़्रेम को इनपुट के तौर पर लेता है.
MediaStreamTrackProcessor
MediaStreamTrackProcessor ऑब्जेक्ट, readable प्रॉपर्टी को दिखाता है. इससे MediaStreamTrack से फ़्रेम पढ़ने की अनुमति मिलती है. अगर ट्रैक कोई वीडियो ट्रैक है, तो readable से पढ़े गए चंक, VideoFrame ऑब्जेक्ट होंगे. अगर ट्रैक कोई ऑडियो ट्रैक है, तो readable से पढ़े गए चंक, AudioFrame ऑब्जेक्ट होंगे.
MediaStreamTrackGenerator
इसी तरह, MediaStreamTrackGenerator ऑब्जेक्ट एक प्रॉपर्टी, writable को दिखाता है. यह एक WritableStream है, जो MediaStreamTrackGenerator में मीडिया फ़्रेम लिखने की अनुमति देता है. MediaStreamTrackGenerator खुद एक MediaStreamTrack है. अगर kind एट्रिब्यूट "audio" है, तो स्ट्रीम AudioFrame ऑब्जेक्ट स्वीकार करती है. इसके अलावा, किसी अन्य टाइप के ऑब्जेक्ट को स्वीकार नहीं करती. अगर तरह "video" है, तो स्ट्रीम VideoFrame ऑब्जेक्ट स्वीकार करती है. साथ ही, किसी अन्य टाइप के साथ काम नहीं करती. जब किसी फ़्रेम को writable में लिखा जाता है, तो फ़्रेम का close() तरीका अपने-आप लागू हो जाता है. इससे, उसके मीडिया संसाधनों को JavaScript से ऐक्सेस नहीं किया जा सकता.
MediaStreamTrackGenerator एक ऐसा ट्रैक होता है जिसके लिए कस्टम सोर्स लागू किया जा सकता है. इसके लिए, मीडिया फ़्रेम को इसके writable फ़ील्ड में लिखना होता है.
पूरी जानकारी को एक जगह इकट्ठा किया जा रहा है
इसका मुख्य मकसद, प्रोसेसिंग चेन बनाना है. इसके लिए, यह तरीका अपनाएं:
प्लैटफ़ॉर्म ट्रैक → प्रोसेसर → ट्रांसफ़ॉर्म → जनरेटर → प्लैटफ़ॉर्म सिंक
नीचे दिए गए उदाहरण में, बारकोड स्कैनर ऐप्लिकेशन के लिए इस चेन को दिखाया गया है. यह ऐप्लिकेशन, लाइव वीडियो स्ट्रीम में बारकोड का पता लगाता है.
const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];
const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });
const transformer = new TransformStream({
async transform(videoFrame, controller) {
const barcodes = await detectBarcodes(videoFrame);
const newFrame = highlightBarcodes(videoFrame, barcodes);
videoFrame.close();
controller.enqueue(newFrame);
},
});
trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);
const videoBefore = document.getElementById('video-before');
const videoAfter = document.getElementById('video-after');
videoBefore.srcObject = stream;
const streamAfter = new MediaStream([trackGenerator]);
videoAfter.srcObject = streamAfter;
डेमो
ऊपर दिए गए सेक्शन में, डेस्कटॉप या मोबाइल ब्राउज़र पर क्यूआर कोड स्कैनर का डेमो देखा जा सकता है. क्यूआर कोड को कैमरे के सामने रखें. ऐप्लिकेशन उसे पहचान लेगा और हाइलाइट कर देगा. ऐप्लिकेशन का सोर्स कोड GitHub पर देखा जा सकता है.
सुरक्षा और निजता से जुड़ी बातें
इस एपीआई की सुरक्षा, वेब प्लैटफ़ॉर्म में मौजूद मौजूदा तरीकों पर निर्भर करती है. डेटा को VideoFrame और AudioFrame इंटरफ़ेस का इस्तेमाल करके दिखाया जाता है. इसलिए, ओरिजिन-टेंटेड डेटा से निपटने के लिए, इन इंटरफ़ेस के नियम लागू होते हैं. उदाहरण के लिए, क्रॉस-ऑरिजिन रिसॉर्स से मिले डेटा को ऐक्सेस नहीं किया जा सकता.ऐसा इसलिए, क्योंकि ऐसे रिसॉर्स को ऐक्सेस करने पर पाबंदियां लागू होती हैं. जैसे, क्रॉस-ऑरिजिन इमेज या वीडियो एलिमेंट के पिक्सल को ऐक्सेस नहीं किया जा सकता. इसके अलावा, कैमरे, माइक्रोफ़ोन या स्क्रीन से मीडिया डेटा ऐक्सेस करने के लिए, उपयोगकर्ता की अनुमति ज़रूरी है. यह एपीआई जिस मीडिया डेटा को दिखाता है वह अन्य एपीआई के ज़रिए पहले से उपलब्ध है.
सुझाव/राय दें या शिकायत करें
Chromium टीम, MediaStreamTrack के लिए इंसर्ट की जा सकने वाली स्ट्रीम के बारे में आपके अनुभव जानना चाहती है.
हमें एपीआई डिज़ाइन के बारे में बताएं
क्या एपीआई के बारे में कुछ ऐसा है जो आपकी उम्मीद के मुताबिक काम नहीं करता? इसके अलावा, क्या कोई ऐसा तरीका या प्रॉपर्टी है जो मौजूद नहीं है और आपको अपने आइडिया को लागू करने के लिए उसकी ज़रूरत है? क्या आपको सुरक्षा मॉडल के बारे में कोई सवाल पूछना है या कोई टिप्पणी करनी है? GitHub repo पर, स्पेसिफ़िकेशन से जुड़ी समस्या की शिकायत करें या किसी मौजूदा समस्या के बारे में अपने विचार जोड़ें.
लागू करने से जुड़ी समस्या की शिकायत करना
क्या आपको Chromium के साथ कोई गड़बड़ी मिली? या क्या लागू करने का तरीका, स्पेसिफ़िकेशन से अलग है?
new.crbug.com पर जाकर गड़बड़ी की शिकायत करें. ज़्यादा से ज़्यादा जानकारी दें. साथ ही, गड़बड़ी को फिर से दिखाने के निर्देश दें. इसके अलावा, Components बॉक्स में Blink>MediaStream डालें.
एपीआई के लिए सहायता
क्या आपको MediaStreamTrack के लिए, स्ट्रीम में शामिल किए जा सकने वाले विज्ञापन इस्तेमाल करने हैं? आपकी सार्वजनिक तौर पर दी गई सहायता से, Chromium टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे अन्य ब्राउज़र वेंडर को यह पता चलता है कि इन सुविधाओं को सपोर्ट करना कितना ज़रूरी है.
@ChromiumDev को ट्वीट करें और हैशटैग
#InsertableStreams
का इस्तेमाल करें. साथ ही, हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.
काम के लिंक
Acknowledgements
MediaStreamTrack स्पेसिफ़िकेशन के लिए, स्ट्रीम में शामिल किए जा सकने वाले डेटा के बारे में Harald Alvestrand और Guido Urdaneta ने लिखा था.
इसकी समीक्षा Harald Alvestrand, Joe Medley,
Ben Wagner, Huib Kleinhout, और
François Beaufort ने की है.