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

Sam Dutton

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

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

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

ลองใช้งานได้ที่นี่

หมายเหตุ: คำอธิบายเกี่ยวกับการสนับสนุน - หากต้องการใช้ Mediarecorder ใน Chrome 47 และ 48 ให้เปิดใช้ฟีเจอร์แพลตฟอร์มเว็บรุ่นทดลองจากหน้า chrome://flags - การบันทึกเสียงใช้ได้ใน Firefox และ Chrome 49 ขึ้นไป โดย Chrome 47 และ 48 รองรับเฉพาะการบันทึกวิดีโอเท่านั้น - คุณสามารถบันทึกและดาวน์โหลดไฟล์บันทึกที่สร้างด้วย Mediarecorder ใน Chrome บน Android ได้ แต่จะยังดูไฟล์บันทึกเสียงในองค์ประกอบวิดีโอผ่าน 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 มีค่าที่เจาะจงมากหรือน้อย โดยรวมคอนเทนเนอร์และตัวแปลงรหัส เช่น

• เสียง/Webm
• วิดีโอ/Webm
• วิดีโอ/webm;ตัวแปลงรหัส=vp8
• วิดีโอ/webm;ตัวแปลงรหัส=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() หรือลอง/จับ หรือละเว้นอาร์กิวเมนต์ 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> ที่กำหนดเองแบบทดลอง

แอป

• ตอนนี้แอป 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