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

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

Thomas Steiner

बैकग्राउंड

मीडिया कैप्चर और स्ट्रीम एपीआई के संदर्भ में, 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 ऑब्जेक्ट स्वीकार किए जाते हैं. किसी अन्य टाइप के ऑब्जेक्ट स्वीकार नहीं किए जाते. अगर kind का वैल्यू "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 repo पर, खास जानकारी से जुड़ी समस्या दर्ज करें या किसी मौजूदा समस्या में अपने सुझाव जोड़ें.

लागू करने से जुड़ी समस्या की शिकायत करना

क्या आपको Chromium को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने का तरीका, खास जानकारी से अलग है? new.crbug.com पर गड़बड़ी की शिकायत करें. इसमें ज़्यादा से ज़्यादा जानकारी शामिल करें. साथ ही, गड़बड़ी को दोहराने के लिए आसान निर्देश दें. इसके बाद, Components बॉक्स में Blink>MediaStream डालें. Glitch, तुरंत और आसानी से समस्या की जानकारी शेयर करने के लिए बहुत अच्छा है.

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

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

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

आभार

MediaStreamTrack स्पेसिफ़िकेशन के लिए, डाली जा सकने वाली स्ट्रीम को हराल्ड अल्वस्ट्रैंड और गुइडो उर्डानेटा ने लिखा था. इस लेख की समीक्षा, हराल्ड अल्वस्ट्रैंड, जो मेडली, बेन वाग्नर, हुइब क्लेनहाउट, और फ़्रांस्वा ब्यूफ़ोर्ट ने की है. Unsplash पर, Chris Montgomery की दी गई हीरो इमेज.