शैंपेन और डोनट का आनंद लें! Chrome की अब तक की सबसे ज़्यादा स्टार वाली सुविधा को लॉन्च कर दिया गया है.
कल्पना करें कि स्की-रन रिकॉर्ड करने वाला कोई ऐसा ऐप्लिकेशन हो जो वीडियो को जगह की जानकारी के डेटा के साथ सिंक करता हो. इसके अलावा, एक ऐसा आसान वॉइस मेमो ऐप्लिकेशन हो जो आपको वीडियो रिकॉर्ड करने और उसे YouTube पर अपलोड करने की सुविधा देता हो. इसके लिए, आपको प्लग इन की ज़रूरत नहीं होगी.
MediaRecorder API की मदद से, किसी वेब ऐप्लिकेशन से ऑडियो और वीडियो रिकॉर्ड किया जा सकता है. यह सुविधा, फ़िलहाल Firefox, Android, और डेस्कटॉप के लिए उपलब्ध है.
इसे यहां आज़माएं.
एपीआई का इस्तेमाल करना आसान है. इसका उदाहरण देने के लिए, मैं 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
- 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 के साथ काम करने वाले एमआईएम टाइप की पूरी सूची यहां उपलब्ध है.
इसके बाद, डेटा हैंडलर जोड़ें और रिकॉर्डिंग शुरू करने के लिए 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();
रिकॉर्ड किए गए ब्लॉब के कलेक्शन से 'सुपर-ब्लॉब' बनाकर, वीडियो एलिमेंट में रिकॉर्ड किए गए ब्लॉब चलाएं:
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