Ghi âm và quay video bằng MediaRecorder

Sam Dutton

Hãy phá tan sâm banh và bánh vòng thôi! Tính năng có gắn dấu sao nhiều nhất của Chrome hiện chưa được triển khai.

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

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

Hãy dùng thử tại đây.

Ảnh chụp màn hình bản 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 từ các nguồn gốc bảo mật: HTTPS hoặc localhost.

Trước tiên, hãy tạo thực thể cho MediaRecorder bằng MediaStream. Sử dụng tham số options để chỉ định định dạng đầu ra mong muốn (không bắt buộc):

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

MediaStream có thể đến từ:

  • Cuộc gọi getUserMedia().
  • Kết thúc nhận cuộc gọi WebRTC.
  • Một bản ghi màn hình.
  • Web Âm thanh, sau khi bạn triển khai vấn đề này.

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

Loại MIME có giá trị cụ thể hơn hoặc ít cụ thể hơn, kết hợp với 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 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 {
    // ...
}

Danh sách đầy đủ các loại MIME mà MediaRecorder hỗ trợ trong Chrome có 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 sẽ thêm Blob vào mảng recordedChunks bất cứ khi nào có dữ liệu. Phương thức start() có thể tuỳ ý cung cấp một đối số timeSlice chỉ định thời lượng nội dung nghe nhìn cần chụp cho mỗi Blob.

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

mediaRecorder.stop();

Phát các Blob đã ghi lại trong một thành phần video bằng cách tạo một "super-Blob" từ danh sách các Blob đã 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ột 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).

Có thể tải xuống bằng một số đường liên kết tấn công:

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 và quay video mà không cần trình bổ trợ còn khá mới đối với các ứng dụng web, vì vậy, chúng tôi đặc biệt đánh giá cao ý kiến phản hồi của bạn về các API.

Chúng tôi cũng muốn biết trường hợp sử dụng nào quan trọng nhất đối với bạn và những tính năng bạn muốn chúng tôi ưu tiên. Hãy bình luận 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 Bản ghi nhớ bằng giọng nói của Paul Lewis hiện có hỗ trợ MediaRecorder, được điền sẵn cho các trình duyệt không hỗ trợ âm thanh MediaRecorder.

Vải polyfill

  • MediaStreamRecorder của Muaz Khan là một thư viện JavaScript để ghi âm và quay video, tương thích với MediaRecorder.
  • Recorderjs cho phép ghi từ nút API Web Audio. Bạn có thể xem ví dụ thực tế trong ứng dụng Ghi chú bằng giọng nói của Paul Lewis.

Hỗ trợ trình duyệt

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

Thông số kỹ thuật

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

Thông tin về API

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