MediaStreamTrack के लिए शामिल की जा सकने वाली स्ट्रीम

MediaStreamTrack का कॉन्टेंट ऐसी स्ट्रीम के तौर पर दिखाया गया है जिसमें छेड़छाड़ की जा सकती है या नया कॉन्टेंट जनरेट करने के लिए उसका इस्तेमाल किया जा सकता है

Thomas Steiner

बैकग्राउंड

मीडिया कैप्चर और स्ट्रीम एपीआई के संदर्भ में, 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स्प्लैश पर क्रिस मॉन्टगोमरी की हीरो इमेज.