MediaStreamTrack
का कॉन्टेंट ऐसी स्ट्रीम के तौर पर दिखाया गया है जिसमें छेड़छाड़ की जा सकती है या नया कॉन्टेंट जनरेट करने के लिए उसका इस्तेमाल किया जा सकता है
बैकग्राउंड
मीडिया कैप्चर और स्ट्रीम एपीआई के संदर्भ में, MediaStreamTrack
इंटरफ़ेस, स्ट्रीम के एक ही मीडिया ट्रैक को दिखाता है. आम तौर पर, ये ऑडियो या वीडियो ट्रैक होते हैं. हालांकि, दूसरे तरह के ट्रैक भी मौजूद हो सकते हैं.
MediaStream
ऑब्जेक्ट में
शून्य या उससे ज़्यादा MediaStreamTrack
ऑब्जेक्ट हैं, जो अलग-अलग ऑडियो या वीडियो ट्रैक को दिखाते हैं. हर MediaStreamTrack
में एक या उससे ज़्यादा चैनल हो सकते हैं. चैनल, मीडिया स्ट्रीम की सबसे छोटी यूनिट को दिखाता है, जैसे कि किसी स्पीकर से जुड़ा ऑडियो सिग्नल. जैसे, स्टीरियो ऑडियो ट्रैक में बायां या दायां.
MediaStreamTrack
में शामिल की जा सकने वाली स्ट्रीम का क्या मतलब है?
MediaStreamTrack
के लिए, शामिल की जा सकने वाली स्ट्रीम का मुख्य मकसद यह है कि MediaStreamTrack
के कॉन्टेंट को स्ट्रीम के कलेक्शन के तौर पर दिखाया जाए. इसकी जानकारी, WHATWG
Streams API में दी गई है. नए कॉम्पोनेंट को पेश करने के लिए, इन स्ट्रीम में बदलाव किया जा सकता है.
डेवलपर को सीधे वीडियो या ऑडियो स्ट्रीम का ऐक्सेस देने से, वे सीधे स्ट्रीम में बदलाव लागू कर सकते हैं. वहीं दूसरी ओर, वीडियो में बदलाव करने के एक जैसे काम को पारंपरिक तरीकों से करने के लिए, डेवलपर को <canvas>
एलिमेंट जैसे मध्यस्थों का इस्तेमाल करना पड़ता है. (इस तरह की प्रोसेस की जानकारी के लिए, video + 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
में मीडिया फ़्रेम लिखने की अनुमति देता है जो खुद एक 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;
डेमो
ऊपर दिए गए सेक्शन में जाकर, क्यूआर कोड स्कैनर का डेमो देखा जा सकता है. यह डेमो, डेस्कटॉप या मोबाइल ब्राउज़र पर देखा जा सकता है. क्यूआर कोड को कैमरे के सामने रखें और ऐप्लिकेशन उसे पहचान लेगा और उसे हाइलाइट कर देगा. ऐप्लिकेशन का सोर्स कोड Glitch पर देखा जा सकता है.
सुरक्षा और निजता से जुड़ी बातें
इस एपीआई की सुरक्षा, वेब प्लैटफ़ॉर्म में पहले से मौजूद सिस्टम पर निर्भर करती है. VideoFrame
और AudioFrame
इंटरफ़ेस का इस्तेमाल करके डेटा को एक्सपोज़ किया जाता है. इसलिए, ऑरिजिन वाले डेटा से निपटने के लिए, उन इंटरफ़ेस के नियम लागू होते हैं. उदाहरण के लिए, ऐसे संसाधनों को ऐक्सेस करने पर मौजूदा पाबंदियों की वजह से, क्रॉस-ऑरिजिन रिसॉर्स का डेटा ऐक्सेस नहीं किया जा सकता. जैसे, क्रॉस-ऑरिजिन इमेज या वीडियो एलिमेंट के पिक्सल ऐक्सेस नहीं किया जा सकता. इसके अलावा, कैमरे, माइक्रोफ़ोन या स्क्रीन से मीडिया डेटा को ऐक्सेस करने की अनुमति उपयोगकर्ता की अनुमति पर निर्भर करती है. इस एपीआई की मदद से दिखाया जाने वाला मीडिया डेटा, अन्य एपीआई के ज़रिए पहले से ही उपलब्ध होता है.
सुझाव/राय दें या शिकायत करें
Chromium की टीम, MediaStreamTrack
के लिए शामिल की जा सकने वाली स्ट्रीम के बारे में आपके अनुभव जानना चाहती है.
हमें इस एपीआई के डिज़ाइन के बारे में बताएं
क्या एपीआई में ऐसा कुछ है जो आपकी उम्मीद के मुताबिक काम नहीं करता? या ऐसा नहीं है कि अपना आइडिया लागू करने के लिए, ऐसे तरीके या प्रॉपर्टी मौजूद नहीं हैं जिनकी ज़रूरत आपको है? क्या सुरक्षा मॉडल के बारे में आपका कोई सवाल या टिप्पणी है? इससे जुड़े GitHub रेपो के बारे में कोई खास समस्या दर्ज करें या किसी मौजूदा समस्या में अपने विचार जोड़ें.
लागू करने से जुड़ी समस्या की शिकायत करें
क्या आपको Chromium को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने की प्रक्रिया खास जानकारी से अलग है?
new.crbug.com पर गड़बड़ी की शिकायत करें. जितना हो सके ज़्यादा से ज़्यादा जानकारी शामिल करें, सामग्री को फिर से बनाने के आसान निर्देश दें और घटक बॉक्स में Blink>MediaStream
डालें.
Glitch का इस्तेमाल करके, तुरंत और आसान तरीकों को शेयर किया जा सकता है.
एपीआई के साथ काम करता है
क्या आपको MediaStreamTrack
के लिए ऐसी स्ट्रीम इस्तेमाल करनी हैं जिन्हें शामिल किया जा सकता है? आपकी सार्वजनिक सहायता से, Chromium की टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे दूसरे ब्राउज़र वेंडर को यह पता चलता है कि इन सुविधाओं की मदद करना कितना ज़रूरी है.
हैशटैग #InsertableStreams
का इस्तेमाल करके @ChromiumDev को एक ट्वीट भेजें
और हमें बताएं कि आप उसका इस्तेमाल कहां और कैसे कर रहे हैं.
मददगार लिंक
स्वीकार हैं
MediaStreamTrack
की खास जानकारी के लिए, शामिल की जा सकने वाली स्ट्रीम को हाराल्ड ऐल्वस्ट्रैंड और गिडो उर्दानेता ने लिखा था.
इस लेख की समीक्षा, हैराल्ड ऐल्वस्ट्रैंड, जो मेडली, बेन वैगनर, हुब क्लाइनहाउस, और फ़्रैंसुआ बोफ़ोर्ट ने की है. Unस्प्लैश पर क्रिस मॉन्टगोमरी की हीरो इमेज.