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

Sam Dutton

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

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

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

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

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 รองรับได้ที่นี่

ถัดไป ให้เพิ่มตัวแฮนเดิลข้อมูลและเรียกใช้เมธอด 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> ที่กําหนดเองเวอร์ชันทดลอง

แอป

• ขณะนี้แอป Voice Memos ของ 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