Ghi MediaStream từ canvas, phần tử video hoặc âm thanh

Sam Dutton

Phương thức captureStream() cho phép bạn chụp MediaStream từ phần tử <canvas>, <audio> hoặc <video>.

Điều này cho phép ghi lại luồng video hoặc âm thanh từ bất kỳ phần tử nào trong số này, phát trực tiếp qua WebRTC hoặc kết hợp với các hiệu ứng hoặc MediaStream khác trong <canvas>. Nói cách khác, captureStream() cho phép MediaStream truyền nội dung đa phương tiện qua lại giữa các phần tử canvas, âm thanh hoặc video — hoặc đến RTCPeerConnection hoặc MediaRecorder.

Trong bản minh hoạ sau (có trong mẫu WebRTC), MediaStream được chụp từ phần tử canvas ở bên trái được truyền trực tuyến qua kết nối ngang hàng WebRTC đến phần tử video ở bên phải:

(Bạn có thể xem các đường liên kết đến các ví dụ khác về canvas và video ở bên dưới.)

Mã captureStream() rất đơn giản.

Đối với <canvas>:

var canvas = document.querySelector('canvas');
var video = document.querySelector('video');

// Optional frames per second argument.
var stream = canvas.captureStream(25);
// Set the source of the <video> element to be the stream from the <canvas>.
video.srcObject = stream;

Đối với <video>:

var leftVideo = document.getElementById('leftVideo');
var rightVideo = document.getElementById('rightVideo');

leftVideo.onplay = function() {
    // Set the source of one <video> element to be a stream from another.
    var stream = leftVideo.captureStream();
    rightVideo.srcObject = stream;
};

Nhưng tại sao?

Phương thức captureStream() cho phép bạn ghi hoặc phát trực tiếp từ canvas và các phần tử nội dung nghe nhìn:

  • Ghi lại và phát trực tiếp quá trình chơi trò chơi từ <canvas>
  • Quay video bằng máy ảnh, sau đó thêm nội dung hoặc hiệu ứng khác
  • Tạo hiệu ứng hình trong hình từ nhiều video thông qua <canvas>
  • Kết hợp video và hình ảnh (từ tệp hoặc máy ảnh hoặc cả hai) trong <canvas>
  • Video phát trực tiếp từ tệp
  • Sử dụng tin nhắn video hoặc tin nhắn thoại đã ghi cho thư thoại hoặc thư video

Về cơ bản, captureStream() cho phép JavaScript tạo và "chèn nội dung" vào MediaStream.

Dòng chữ nhỏ

  • Việc cố gắng sử dụng captureStream() với một phần tử nội dung nghe nhìn triển khai tính năng bảo vệ nội dung thông qua Tiện ích nội dung nghe nhìn đã mã hoá sẽ gửi một ngoại lệ.

  • Khi chụp từ <canvas>, tốc độ khung hình tối đa được đặt khi gọi captureStream(). Ví dụ: canvas.captureStream(10) có nghĩa là canvas sẽ xuất ra từ 0 đến 10 khung hình/giây. Không có gì được ghi lại khi không có nội dung nào được vẽ trên <canvas> và 10 khung hình/giây được ghi lại ngay cả khi <canvas> được vẽ ở tốc độ 30 khung hình/giây. Có một lỗi có thêm nội dung thảo luận được gửi về thông số kỹ thuật captureStream.

  • Kích thước của video captureStream() khớp với <canvas> mà video đó được gọi.

Bản thu thử

Canvas

Video

Hỗ trợ

  • Canvas captureStream(): Firefox 43 trở lên; Chrome 50 trở lên với chrome://flags/#enable-experimental-web-platform-features được bật hoặc Chrome 52 trở lên theo mặc định.
  • Video và âm thanh captureStream(): Firefox 47; Chrome 52 trở lên với chrome://flags/#enable-experimental-web-platform-features được bật hoặc Chrome 53 trở lên theo mặc định.

Tìm hiểu thêm