इस पेज का अनुवाद Cloud Translation API से किया गया है.

कैनवस, वीडियो या ऑडियो एलिमेंट से MediaStream कैप्चर करें

सैम डटन

Twitter GitHub Glitch Mastodon होम पेज

captureStream() तरीके का इस्तेमाल करके, <canvas><audio> या <video> एलिमेंट से MediaStream कैप्चर किया जा सकता है.

इसकी मदद से, इनमें से किसी भी एलिमेंट के वीडियो या ऑडियो स्ट्रीम को रिकॉर्ड किया जा सकता है या WebRTC के ज़रिए लाइव स्ट्रीम किया जा सकता है. इसके अलावा, इन एलिमेंट को <canvas> में इफ़ेक्ट या दूसरे MediaStream के साथ इस्तेमाल किया जा सकता है. दूसरे शब्दों में, captureStream() की मदद से MediaStream मीडिया को कैनवस, ऑडियो या वीडियो एलिमेंट के बीच या किसी RTCPeerConnection या MediaRecorder पर आगे और पीछे ले जाता है.

नीचे दिए गए डेमो (WebRTC नमूनों से उपलब्ध) बाईं ओर कैनवस एलिमेंट से कैप्चर किया गया MediaStream, दाईं ओर मौजूद वीडियो एलिमेंट से WebRTC पीयर कनेक्शन के ज़रिए स्ट्रीम किया जाता है:

(यहां ज़्यादा कैनवस और वीडियो के लिंक दिए गए हैं.)

captureStream() कोड आसान है.

<canvas> के लिए:

var canvas = document.querySelector('canvas');
var video = document.querySelector('video');

// Optional frames per second argument.
var stream = canvas.captureStream(25);
// Set the source of the <video> element to be the stream from the <canvas>.
video.srcObject = stream;

<video> के लिए:

var leftVideo = document.getElementById('leftVideo');
var rightVideo = document.getElementById('rightVideo');

leftVideo.onplay = function() {
    // Set the source of one <video> element to be a stream from another.
    var stream = leftVideo.captureStream();
    rightVideo.srcObject = stream;
};

ध्यान दें: captureStream() को सिर्फ़ तब कॉल किया जा सकता है, जब वीडियो एलिमेंट के ज़रिए वीडियो चलाया जा सकता हो. इसी वजह से, इसे onplay हैंडलर में जोड़ा गया है.

लेकिन क्यों?

captureStream() तरीके का इस्तेमाल करके, कैनवस और मीडिया एलिमेंट से रिकॉर्ड या लाइव स्ट्रीम किया जा सकता है:

<canvas> से गेम प्ले रिकॉर्ड और स्ट्रीम करें
कैमरे से वीडियो कैप्चर करें, फिर अतिरिक्त कॉन्टेंट या इफ़ेक्ट जोड़ें
<canvas> का इस्तेमाल करके, कई वीडियो के लिए 'पिक्चर में पिक्चर' इफ़ेक्ट बनाएं
<canvas> में वीडियो और इमेज (फ़ाइलों या कैमरे या दोनों से) को जोड़ें
किसी फ़ाइल से चलाया गया लाइव स्ट्रीम वीडियो
वीडियो या वॉइस मेल के लिए, रिकॉर्ड किए गए ऑडियो या वीडियो मैसेज का इस्तेमाल करना

यह ज़रूरी है कि captureStream(), JavaScript को MediaStream में बनाने और "सामान इंजेक्ट" करने की सुविधा देता है.

छोटा प्रिंट

अगर captureStream() को किसी ऐसे मीडिया एलिमेंट के साथ इस्तेमाल किया जाता है जो एन्क्रिप्ट किए गए मीडिया एक्सटेंशन की मदद से, कॉन्टेंट की सुरक्षा लागू करता है, तो एक अपवाद दिखेगा.
<canvas> से कैप्चर करते समय, ज़्यादा से ज़्यादा फ़्रेम रेट तब सेट किया जाता है, जब captureStream() कॉल किया जाता है. उदाहरण के लिए, canvas.captureStream(10) का मतलब है कि कैनवस, 0 से 10 FPS (फ़्रेम प्रति सेकंड) के बीच का आउटपुट देता है. जब <canvas> पर कुछ भी पेंट नहीं होता, तो कुछ भी कैप्चर नहीं होता. <canvas> के 30 FPS (फ़्रेम प्रति सेकंड) पर पेंट होने पर भी 10 FPS (फ़्रेम प्रति सेकंड) को कैप्चर किया जाता है. captureStream की खास जानकारी में ज़्यादा चर्चा वाली एक गड़बड़ी फ़ाइल की गई है.
किसी captureStream() वीडियो के डाइमेंशन उस <canvas> से मेल खाते हैं जिस पर उसे कॉल किया गया था.

डेमो