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

[Tên người]

Phương thức captureStream() giúp bạn có thể 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 hay MediaStream khác trong <canvas>. Nói cách khác, captureStream() cho phép MediaStream truyền nội dung nghe nhìn qua lại giữa canvas, phần tử âm thanh hoặc video, hoặc tới RTCPeerConnection hoặc MediaRecorder.

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

(Dưới đây là các đường liên kết đến các ví dụ khác về ảnh in trên vải canvas và video.)

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() giúp bạn có thể ghi lại 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 cảnh chơi trò chơi trên <canvas>
  • Quay video từ máy ảnh, sau đó thêm nội dung hoặc hiệu ứng bổ sung
  • Tạo hiệu ứng hình trong hình từ nhiều video qua <canvas>
  • Kết hợp video và hình ảnh (từ các tệp hoặc máy ảnh hoặc cả hai) trong <canvas>
  • Video phát trực tiếp đã phát từ một tệp
  • Sử dụng tin nhắn video hoặc âm thanh được ghi âm cho thư thoại hoặc video

Về cơ bản, captureStream() cho phép JavaScript xây dựng và "chèn dữ liệu" vào một MediaStream.

Bản in 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ẽ tạo ra một ngoại lệ.

  • Khi chụp từ <canvas>, tốc độ khung hình tối đa sẽ được đặt khi captureStream() được gọi. Ví dụ: canvas.captureStream(10) có nghĩa là canvas xuất ra từ 0 đến 10 khung hình/giây. Không có gì được chụp khi không có gì được vẽ trên <canvas> và chụp 10 khung hình/giây ngay cả khi <canvas> được vẽ ở tốc độ 30 khung hình/giây. Có một lỗi cần thảo luận thêm đượ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 có bật chrome://flags/#enable-experimental-web-platform-features hoặc bật Chrome 52 trở lên theo mặc định.
  • Video và âm thanh captureStream(): Firefox 47; Chrome 52 trở lên có bật chrome://flags/#enable-experimental-web-platform-features hoặc bật Chrome 53 trở lên theo mặc định.

Tìm hiểu thêm