บันทึกเสียงและวิดีโอด้วย MediaRecorder

Sam Dutton

หยิบแชมเปญและโดนัทขึ้นมาเลย ฟีเจอร์ Chrome ที่มีการติดดาวมากที่สุดเท่าที่เคยมีมาพร้อมใช้งานแล้ว

ลองนึกภาพเครื่องบันทึกการวิ่งสกีที่ซิงค์วิดีโอกับข้อมูลตำแหน่งทางภูมิศาสตร์ หรือแอปบันทึกเสียงที่ใช้งานง่ายสุดๆ หรือวิดเจ็ตที่ช่วยให้คุณบันทึกวิดีโอและอัปโหลดไปยัง YouTube ได้โดยไม่ต้องใช้ปลั๊กอิน

MediaRecorder API ช่วยให้คุณบันทึกเสียงและวิดีโอจากเว็บแอปได้ ซึ่งตอนนี้พร้อมใช้งานใน Firefox และ Chrome สำหรับ Android และเดสก์ท็อปแล้ว

ลองใช้ที่นี่

หมายเหตุ: ข้อมูลเกี่ยวกับการรองรับ - หากต้องการใช้ MediaRecorder ใน Chrome 47 และ 48 ให้เปิดใช้ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลองจากหน้า chrome://flags - การบันทึกเสียงใช้ได้ใน Firefox และใน Chrome 49 ขึ้นไป ส่วน Chrome 47 และ 48 รองรับเฉพาะการบันทึกวิดีโอ - ใน Chrome บน Android คุณสามารถบันทึกและดาวน์โหลดไฟล์บันทึกที่ทำด้วย MediaRecorder ได้ แต่ยังไม่พร้อมให้ดูไฟล์บันทึกในองค์ประกอบวิดีโอผ่าน window.URL.createObjectURL() ดูข้อบกพร่องนี้

API นี้ใช้งานง่าย เราจะสาธิตโดยใช้โค้ดจากตัวอย่างรีโป WebRTC โปรดทราบว่า API นี้ใช้ได้เฉพาะจากต้นทางที่ปลอดภัยเท่านั้น ได้แก่ HTTPS หรือ localhost

ก่อนอื่น ให้สร้างอินสแตนซ์ MediaRecorder ด้วย MediaStream คุณสามารถใช้พารามิเตอร์ options เพื่อระบุรูปแบบเอาต์พุตที่ต้องการได้ (ไม่บังคับ)

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

MediaStream อาจเป็นข้อมูลจากแหล่งต่อไปนี้

• การโทร getUserMedia()
• ปลายทางของการโทรผ่าน WebRTC
• การบันทึกหน้าจอ
• Web Audio เมื่อใช้ปัญหานี้

สำหรับ options คุณสามารถระบุประเภท MIME และอัตราบิตของเสียงและวิดีโอได้ในอนาคต

ประเภท MIME มีค่าที่เฉพาะเจาะจงมากกว่าหรือน้อยกว่า ซึ่งรวมคอนเทนเนอร์และโค้ดคิว เช่น

• audio/webm
• video/webm
• video/webm;codecs=vp8
• video/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 {
    // ...
}

ดูรายการประเภท MIME ทั้งหมดที่ MediaRecorder ใน Chrome รองรับได้ที่นี่

ข้อควรระวัง: การสร้างอินสแตนซ์จะดำเนินการไม่สำเร็จหากเบราว์เซอร์ไม่รองรับประเภท MIME ที่ระบุ ดังนั้นให้ใช้ MediaRecorder.isTypeSupported() หรือ try/catch หรือละเว้นอาร์กิวเมนต์ 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 {
    // ...
    }
}

ตัวอย่างนี้จะเพิ่ม Blob ลงในอาร์เรย์ recordedChunks ทุกครั้งที่มีข้อมูล วิธีการ start() สามารถเลือกให้อาร์กิวเมนต์ timeSlice ที่ระบุความยาวของสื่อที่จะบันทึกสำหรับ Blob แต่ละรายการได้

เมื่อบันทึกเสร็จแล้ว ให้บอก MediaRecorder ดังนี้

mediaRecorder.stop();

เล่น Blob ที่บันทึกไว้ในองค์ประกอบวิดีโอโดยสร้าง "Super-Blob" จากอาร์เรย์ของ Blob ที่บันทึกไว้ ดังนี้

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

หรือจะอัปโหลดไปยังเซิร์ฟเวอร์ผ่าน XHR หรือใช้ API เช่น 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);
}

ความคิดเห็นเกี่ยวกับ API และเดโม

ความสามารถในการบันทึกเสียงและวิดีโอโดยไม่ต้องใช้ปลั๊กอินนั้นค่อนข้างใหม่สำหรับเว็บแอป เราจึงขอขอบคุณอย่างยิ่งสำหรับความคิดเห็นเกี่ยวกับ API

• ข้อบกพร่องในการใช้งาน 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 (โค้ดเดียวกัน แต่ URL ง่ายขึ้นสำหรับอุปกรณ์เคลื่อนที่)
• บันทึกวิดีโอและอัปโหลดไปยัง YouTube ด้วยองค์ประกอบ <google-youtube-upload> ที่กําหนดเองเวอร์ชันทดลอง

แอป

• ตอนนี้แอปเสียงบันทึกของ Paul Lewis รองรับ MediaRecorder แล้ว โดยมีการทดแทนด้วย Polyfill สำหรับเบราว์เซอร์ที่ไม่รองรับเสียง MediaRecorder

โพลีฟิล

• MediaStreamRecorder ของ Muaz Khan เป็นไลบรารี JavaScript สำหรับการบันทึกเสียงและวิดีโอที่เข้ากันได้กับ MediaRecorder
• Recorderjs เปิดใช้การบันทึกจากโหนด Web Audio API คุณดูการทำงานจริงได้ในแอป Voice Memos ของ Paul Lewis

การสนับสนุนเบราว์เซอร์

• Chrome 49 ขึ้นไปโดยค่าเริ่มต้น
• Chrome เดสก์ท็อป 47 และ 48 ที่เปิดใช้ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลองจาก chrome://flags
• Firefox ตั้งแต่เวอร์ชัน 25
• Edge: "อยู่ระหว่างพิจารณา"

ข้อกำหนด

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

ข้อมูล API

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