Ghi âm và quay video bằng MediaRecorder

Sam Dutton

Hãy lấy sâm panh và bánh rán ra! Tính năng được gắn dấu sao nhiều nhất trên Chrome từ trước đến nay đã được triển khai.

Hãy tưởng tượng một ứng dụng quay video trượt tuyết đồng bộ hoá video với dữ liệu Vị trí địa lý, hoặc một ứng dụng ghi âm giọng nói siêu đơn giản, hoặc một tiện ích cho phép bạn quay video và tải lên YouTube — tất cả đều không cần trình bổ trợ.

MediaRecorder API cho phép bạn ghi âm thanh và video từ một ứng dụng web. API này hiện có trong Firefox và Chrome dành cho Android và máy tính.

Hãy thử tại đây.

Ảnh chụp màn hình minh hoạ mediaRecorder trên Android Nexus 5X

API này rất đơn giản, tôi sẽ minh hoạ bằng cách sử dụng mã từ bản minh hoạ kho lưu trữ mẫu WebRTC. Xin lưu ý rằng bạn chỉ có thể sử dụng API này từ các nguồn gốc bảo mật: HTTPS hoặc localhost.

Trước tiên, hãy tạo MediaRecorder bằng MediaStream. Nếu muốn, hãy sử dụng tham số options để chỉ định định dạng đầu ra mong muốn:

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

MediaStream có thể từ:

  • Lệnh gọi getUserMedia().
  • Đầu nhận của cuộc gọi WebRTC.
  • Một bản ghi màn hình.
  • Âm thanh web sau khi triển khai vấn đề này.

Đối với options, bạn có thể chỉ định loại MIME và trong tương lai sẽ có tốc độ bit của âm thanh và video.

Loại MIME có nhiều hoặc ít giá trị cụ thể hơn, kết hợp cả vùng chứa và bộ mã hoá và giải mã. Ví dụ:

  • âm thanh/webm
  • video/webm
  • video/webm;codecs=vp8
  • video/webm;codecs=vp9

Sử dụng phương thức tĩnh MediaRecorder.isTypeSupported() để kiểm tra xem một loại MIME có được hỗ trợ hay không, ví dụ: khi bạn tạo bản sao 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 {
    // ...
}

Bạn có thể xem danh sách đầy đủ các loại MIME mà MediaRecorder hỗ trợ trong Chrome tại đây.

Tiếp theo, hãy thêm một trình xử lý dữ liệu và gọi phương thức start() để bắt đầu ghi:

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 {
    // ...
    }
}

Ví dụ này thêm một Blob vào mảng recordedChunks bất cứ khi nào có dữ liệu. Bạn có thể tuỳ ý cung cấp đối số timeSlice cho phương thức start() để chỉ định thời lượng nội dung nghe nhìn cần ghi lại cho mỗi Blob.

Khi bạn ghi xong, hãy thông báo cho MediaRecorder biết:

mediaRecorder.stop();

Phát các Blob đã được ghi lại trong một phần tử video bằng cách tạo một 'super-Blob' từ mảng các Blob đã được ghi lại:

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

Ngoài ra, bạn có thể tải lên máy chủ thông qua XHR hoặc sử dụng một API như YouTube (xem bản minh hoạ thử nghiệm bên dưới).

Bạn có thể tải xuống bằng một số cách hack đường liên kết:

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);
}

Phản hồi về API và bản minh hoạ

Khả năng ghi âm thanh và video mà không cần trình bổ trợ là một tính năng tương đối mới đối với ứng dụng web. Vì vậy, chúng tôi đặc biệt cảm ơn bạn đã phản hồi về các API này.

Chúng tôi cũng muốn biết những trường hợp sử dụng quan trọng nhất đối với bạn và những tính năng mà bạn muốn chúng tôi ưu tiên. Nhận xét về bài viết này hoặc theo dõi tiến trình tại crbug.com/262211.

Bản thu thử

Ứng dụng

  • Ứng dụng Voice Memos (Bản ghi âm giọng nói) của Paul Lewis hiện đã hỗ trợ MediaRecorder, được điền sẵn cho các trình duyệt không hỗ trợ âm thanh MediaRecorder.

Tiện ích bổ sung

  • MediaStreamRecorder của Muaz Khan là một thư viện JavaScript dùng để ghi âm và quay video, tương thích với MediaRecorder.
  • Recorderjs cho phép ghi âm từ nút API Âm thanh trên web. Bạn có thể xem thông tin này trong ứng dụng Voice Records của Paul Lewis.

Hỗ trợ trình duyệt

  • Chrome phiên bản 49 trở lên theo mặc định
  • Chrome phiên bản dành cho máy tính 47 và 48 có các tính năng Nền tảng web thử nghiệm được bật từ chrome://flags
  • Firefox từ phiên bản 25
  • Edge: "Đang được xem xét"

Thông số kỹ thuật

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

Thông tin API

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