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

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

Sam Dutton

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 फ़्रेम प्रति सेकंड (एफ़पीएस) के बीच आउटपुट देता है. जब <canvas> पर कुछ भी नहीं दिखाया जाता है, तब कुछ भी कैप्चर नहीं होता. साथ ही, <canvas> को 30 FPS पर दिखाने पर भी 10 FPS कैप्चर होता है. captureStream स्पेसिफ़िकेशन में, ज़्यादा चर्चा वाला एक बग दर्ज किया गया है.
captureStream() वीडियो के डाइमेंशन, उस <canvas> से मेल खाते हैं जिस पर इसे लागू किया गया था.

डेमो