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

Sam Dutton

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, phát trực tiếp qua WebRTC hoặc kết hợp luồng video hoặc âm thanh từ bất kỳ phần tử nào trong số này 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 qua lại nội dung nghe nhìn giữa các phần tử canvas, âm thanh hoặc video – hoặc đến một RTCPeerConnection hoặc MediaRecorder.

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

(Bạn có thể xem thêm các ví dụ 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 lại hoặc phát trực tiếp từ canvas và các phần tử đa phương tiện:

  • Ghi lại và phát trực tiếp trò chơi trên <canvas>
  • Quay video bằng camera, 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, camera hoặc cả hai) trong <canvas>
  • Phát trực tiếp video từ một tệp
  • Sử dụng tin nhắn thoại hoặc tin nhắn video đã ghi để gửi 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 một MediaStream.

Lưu ý

  • 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 Encrypted Media Extensions sẽ tạo ra một ngoại lệ.

  • Khi chụp từ <canvas>, tốc độ khung hình tối đa được đặt khi captureStream() được gọi. Ví dụ: canvas.captureStream(10) nghĩa là canvas xuất ra từ 0 đến 10 khung hình/giây. Không có gì được ghi lại khi không có gì đượ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 với nhiều cuộc thảo luận được ghi lại trong quy cách captureStream.

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

Bản minh hoạ

Canvas

Video

Hỗ trợ

  • Canvas captureStream(): Firefox 43 trở lên; Chrome 50 trở lên có 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 có 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