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 की दी गई हीरो इमेज.