MediaRecorder की मदद से ऑडियो और वीडियो रिकॉर्ड करें

Sam Dutton

शैंपेन और डोनट का आनंद लें! Chrome की अब तक की सबसे ज़्यादा स्टार वाली सुविधा लागू कर दी गई है.

कल्पना कीजिए कि एक स्की-रन रिकॉर्डर जो वीडियो को GeoLocation डेटा के साथ सिंक करता है, या कोई बेहद आसान वॉइस मेमो ऐप्लिकेशन है या फिर एक विजेट की मदद से वीडियो रिकॉर्ड करके उसे YouTube पर अपलोड करता है — और वह भी बिना प्लगिन के.

MediaRecorder API की मदद से, किसी वेब ऐप्लिकेशन से ऑडियो और वीडियो रिकॉर्ड किया जा सकता है. यह सुविधा, फ़िलहाल Firefox, Android, और डेस्कटॉप के लिए उपलब्ध है.

इसे यहां आज़माएं.

ध्यान दें: सहायता के बारे में जानकारी - Chrome 47 और 48 में MediaRecorder का इस्तेमाल करने के लिए, chrome://flags पेज पर जाकर वेब प्लैटफ़ॉर्म की एक्सपेरिमेंटल सुविधाएं चालू करें. - ऑडियो रिकॉर्डिंग की सुविधा, Firefox और Chrome 49 और उसके बाद के वर्शन में काम करती है. Chrome 47 और 48 में सिर्फ़ वीडियो रिकॉर्डिंग की सुविधा काम करती है. - Android पर Chrome में, MediaRecorder की मदद से की गई रिकॉर्डिंग को सेव और डाउनलोड किया जा सकता है. हालांकि, फ़िलहाल window.URL.createObjectURL() की मदद से, वीडियो एलिमेंट में रिकॉर्डिंग नहीं देखी जा सकती. यह गड़बड़ी देखें.

एपीआई का इस्तेमाल करना आसान है. इसका उदाहरण देने के लिए, मैं WebRTC के सैंपल रेपो डेमो से कोड का इस्तेमाल करूंगा. ध्यान दें कि एपीआई का इस्तेमाल सिर्फ़ सुरक्षित ऑरिजिन से किया जा सकता है: एचटीटीपीएस या localhost.

सबसे पहले, MediaStream के साथ MediaRecorder को इंस्टैंशिएट करें. इसके अलावा, अपनी पसंद का आउटपुट फ़ॉर्मैट तय करने के लिए, options पैरामीटर का इस्तेमाल करें:

var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);

MediaStream इनमें से किसी का हो सकता है:

• getUserMedia() कॉल.
• WebRTC कॉल का अंत.
• स्क्रीन रिकॉर्डिंग.
• यह समस्या लागू होने के बाद, वेब ऑडियो को ऐक्सेस करें.

options के लिए, एमआईएम टाइप और आने वाले समय में, ऑडियो और वीडियो की बिटरेट की जानकारी दी जा सकती है.

MIME टाइप में ज़्यादा या कम खास वैल्यू होती हैं. इनमें कंटेनर और कोडेक, दोनों शामिल होते हैं. उदाहरण के लिए:

• audio/webm
• video/webm
• video/webm;codecs=vp8
• video/webm;codecs=vp9

किसी MIME टाइप के साथ काम करने की सुविधा उपलब्ध है या नहीं, यह देखने के लिए स्टैटिक तरीके MediaRecorder.isTypeSupported() का इस्तेमाल करें. उदाहरण के लिए, MediaRecorder को इंस्टैंशिएट करते समय:

var options;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
    options = {mimeType: 'video/webm; codecs=vp9'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
    options = {mimeType: 'video/webm; codecs=vp8'};
} else {
    // ...
}

Chrome में MediaRecorder के साथ काम करने वाले एमआईएम टाइप की पूरी सूची यहां उपलब्ध है.

चेतावनी: अगर ब्राउज़र, बताए गए MIME टाइप के साथ काम नहीं करता है, तो इंस्टैंशिएशन पूरा नहीं होगा. इसलिए, MediaRecorder.isTypeSupported() या try/catch का इस्तेमाल करें. इसके अलावा, अगर आपको ब्राउज़र के डिफ़ॉल्ट MIME टाइप से काम चल रहा है, तो options आर्ग्युमेंट को हटा दें.

इसके बाद, डेटा हैंडलर जोड़ें और रिकॉर्डिंग शुरू करने के लिए start() तरीके को कॉल करें:

var recordedChunks = [];

var options = {mimeType: 'video/webm;codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
    if (event.data.size > 0) {
    recordedChunks.push(event.data);
    } else {
    // ...
    }
}

इस उदाहरण में, डेटा उपलब्ध होने पर recordedChunks कलेक्शन में Blob जोड़ा जाता है. start() तरीके में, एक timeSlice आर्ग्युमेंट दिया जा सकता है. यह आर्ग्युमेंट हर एक Blob में कैप्चर किए जाने वाले मीडिया की लंबाई बताता है.

रिकॉर्डिंग पूरी हो जाने पर, MediaRecorder को बताएं:

mediaRecorder.stop();

रिकॉर्ड किए गए ब्लॉब के कलेक्शन से 'सुपर-ब्लॉब' बनाकर, वीडियो एलिमेंट में रिकॉर्ड किए गए ब्लॉब चलाएं:

function play() {
    var superBuffer = new Blob(recordedChunks);
    videoElement.src =
    window.URL.createObjectURL(superBuffer);
}

इसके अलावा, XHR के ज़रिए किसी सर्वर पर अपलोड किया जा सकता है या YouTube जैसे एपीआई का इस्तेमाल किया जा सकता है. इसके लिए, नीचे दिया गया प्रयोग के तौर पर उपलब्ध डेमो देखें.

लिंक को हैक करके भी डाउनलोड किया जा सकता है:

function download() {
    var blob = new Blob(recordedChunks, {
    type: 'video/webm'
    });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.style = 'display: none';
    a.href = url;
    a.download = 'test.webm';
    a.click();
    window.URL.revokeObjectURL(url);
}

एपीआई और डेमो पर राय, शिकायत या सुझाव

वेब ऐप्लिकेशन में बिना प्लगिन के ऑडियो और वीडियो रिकॉर्ड करने की सुविधा, वेब ऐप्लिकेशन में काफ़ी नई है. इसलिए, एपीआई के बारे में आपके सुझाव, शिकायत या राय खास तौर पर आपके लिए मायने रखते हैं.

• MediaRecorder लागू करने से जुड़ी गड़बड़ी: crbug.com/262211
• Chrome: crbug.com/new
• Firefox: bugzil.la
• डेमो: github.com/webrtc/samples

हम यह भी जानना चाहते हैं कि आपके लिए, इस्तेमाल के कौनसे उदाहरण सबसे ज़्यादा अहम हैं. साथ ही, आपको किन सुविधाओं को प्राथमिकता देनी है. इस लेख पर टिप्पणी करें या crbug.com/262211 पर अपनी प्रगति को ट्रैक करें.

डेमो

• webrtc.github.io/samples/src/content/getusermedia/record
• simpl.info/mr (एक ही कोड, मोबाइल के लिए आसान यूआरएल!)
• एक्सपेरिमेंट के तौर पर उपलब्ध कस्टम <google-youtube-upload> एलिमेंट का इस्तेमाल करके, वीडियो रिकॉर्ड करना और उसे YouTube पर अपलोड करना

ऐप्लिकेशन

• पॉल लुइस का वॉइस मेमो ऐप्लिकेशन अब MediaRecorder में काम करता है. यह मीडिया रिकॉर्डर की सुविधा वाले ब्राउज़र के लिए पॉलीफ़िल किया गया है. ऐसा उन ब्राउज़र के लिए किया जा सकता है जिनमें MediaRecorder ऑडियो काम नहीं करता.

पॉलीफ़िल

• मुआज़ खान की MediaStreamRecorder, ऑडियो और वीडियो रिकॉर्ड करने के लिए JavaScript लाइब्रेरी है. यह MediaRecorder के साथ काम करती है.
• Recorderjs, Web Audio API नोड से रिकॉर्डिंग करने की सुविधा देता है. आप पॉल लुइस के वॉइस मेमो ऐप्लिकेशन में इसे काम करते हुए देख सकते हैं.

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

• Chrome 49 और उसके बाद के वर्शन में डिफ़ॉल्ट रूप से
• Chrome डेस्कटॉप 47 और 48, जिसमें chrome://flags से प्रयोग के लिए वेब प्लैटफ़ॉर्म की सुविधाएं चालू की गई हैं
• Firefox 25 और उसके बाद के वर्शन
• Edge: 'समीक्षा में है'

खास जानकारी

w3c.github.io/mediacapture-record/MediaRecorder.html

एपीआई की जानकारी

developer.mozilla.org/en/docs/Web/API/MediaRecorder_API