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

Sam Dutton

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

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

MediaRecorder API आपको किसी वेब ऐप्लिकेशन से ऑडियो और वीडियो रिकॉर्ड करने की सुविधा देता है. अब यह Firefox के साथ-साथ Android के लिए Chrome और डेस्कटॉप में उपलब्ध है.

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

ध्यान दें: सहायता के बारे में जानकारी - 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 टाइप और आने वाले समय में ऑडियो और वीडियो के बिटरेट की जानकारी दी जा सकती है.

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

• audio/webm
• वीडियो/webm
• वीडियो/webm;codecs=vp8
• वीडियो/webm;codecs=vp9

स्टैटिक तरीके MediaRecorder.isTypeSupported() का इस्तेमाल करके देखें कि MIME टाइप काम करता है या नहीं. जैसे, 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 टाइप की पूरी सूची यहां दी गई है.

चेतावनी: अगर ब्राउज़र, दिए गए MIME टाइप के साथ काम नहीं करता है, तो इंस्टैंशिएट नहीं हो पाएगा. इसलिए, MediaRecorder.isTypeSupported() का इस्तेमाल करें या इसे आज़माएं/कैच करें — या अगर आप ब्राउज़र की डिफ़ॉल्ट सेटिंग से खुश हैं, तो 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 तर्क दिया जा सकता है, जो हर ब्लॉब के लिए कैप्चर किए जाने वाले मीडिया की लंबाई तय करता है.

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

mediaRecorder.stop();

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

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
• फ़ायरफ़ॉक्स: bugzil.la
• डेमो: github.com/webrtc/samples

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

डेमो

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

ऐप्लिकेशन कैंपेन

• पॉल लुइस के Voice Memos ऐप्लिकेशन में, अब 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