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

MediaStreamTrack के कॉन्टेंट को एक स्ट्रीम के तौर पर दिखाया जाता है. इसमें बदलाव किया जा सकता है या इसका इस्तेमाल नया कॉन्टेंट जनरेट करने के लिए किया जा सकता है

Thomas Steiner

बैकग्राउंड

Media Capture and Streams API के संदर्भ में, MediaStreamTrack इंटरफ़ेस, स्ट्रीम में मौजूद किसी एक मीडिया ट्रैक को दिखाता है. आम तौर पर, ये ऑडियो या वीडियो ट्रैक होते हैं. हालांकि, अन्य तरह के ट्रैक भी मौजूद हो सकते हैं. MediaStream ऑब्जेक्ट में, शून्य या उससे ज़्यादा MediaStreamTrack ऑब्जेक्ट होते हैं. ये अलग-अलग ऑडियो या वीडियो ट्रैक को दिखाते हैं. हर MediaStreamTrack में एक या उससे ज़्यादा चैनल हो सकते हैं. चैनल, मीडिया स्ट्रीम की सबसे छोटी यूनिट को दिखाता है. जैसे, किसी स्पीकर से जुड़ा ऑडियो सिग्नल. जैसे, स्टीरियो ऑडियो ट्रैक में बाईं या दाईं ओर.

MediaStreamTrack के लिए, स्ट्रीम में विज्ञापन डालने की सुविधा क्या है?

MediaStreamTrack के लिए इंसर्ट की जा सकने वाली स्ट्रीम का मुख्य मकसद, MediaStreamTrack के कॉन्टेंट को स्ट्रीम के कलेक्शन के तौर पर दिखाना है. WHATWG Streams API के मुताबिक, स्ट्रीम को इस तरह से तय किया जाता है. इन स्ट्रीम में बदलाव करके, नए कॉम्पोनेंट जोड़े जा सकते हैं.

डेवलपर को वीडियो (या ऑडियो) स्ट्रीम का ऐक्सेस सीधे तौर पर देने से, वे स्ट्रीम में सीधे तौर पर बदलाव कर सकते हैं. इसके उलट, वीडियो में बदलाव करने के लिए पारंपरिक तरीकों का इस्तेमाल करने पर, डेवलपर को <canvas> जैसे इंटरमीडियरी का इस्तेमाल करना पड़ता है. (इस तरह की प्रोसेस के बारे में ज़्यादा जानकारी के लिए, उदाहरण के तौर पर video + canvas = magic देखें.)

ब्राउज़र समर्थन

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

एपीआई के लिए सहायता दिखाना

क्या आपको MediaStreamTrack के लिए, स्ट्रीम में शामिल किए जा सकने वाले विज्ञापन इस्तेमाल करने हैं? आपकी सार्वजनिक राय से, Chromium टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे अन्य ब्राउज़र वेंडर को यह पता चलता है कि इन सुविधाओं को उपलब्ध कराना कितना ज़रूरी है.

@ChromiumDev को ट्वीट करें. इसके लिए, हैशटैग #InsertableStreams का इस्तेमाल करें. साथ ही, हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

Acknowledgements

MediaStreamTrack स्पेसिफ़िकेशन के लिए, स्ट्रीम में शामिल किए जा सकने वाले डेटा के बारे में Harald Alvestrand और Guido Urdaneta ने लिखा था. इस लेख की समीक्षा, हैराल्ड एल्वेस्ट्रैंड, जो मेडली, बेन वैगनर, हुइब क्लेइनहाउट, और फ़्रांस्वा बोफ़ोर्ट ने की है. Unsplash पर क्रिस मॉन्टगोमेरी की हीरो इमेज.