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.
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.
- Lỗi triển khai MediaRecorder: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- Bản minh hoạ: github.com/webrtc/samples
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ử
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (cùng một mã, URL dễ sử dụng hơn cho thiết bị di động!)
- Quay video và tải lên YouTube bằng phần tử
<google-youtube-upload>
tuỳ chỉnh thử nghiệm
Ứ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