从画布、视频或音频元素捕获 MediaStream

Sam Dutton

借助 captureStream() 方法，可以从 <canvas>、<audio> 或 <video> 元素捕获 MediaStream。

这样一来，您就可以录制这些元素中的任何视频或音频流，通过 WebRTC 进行直播，或者将这些元素与 <canvas> 中的效果或其他 MediaStream 结合使用。换句话说，captureStream() 使 MediaStream 能够在画布、音频或视频元素之间来回传递媒体，或者传递到 RTCPeerConnection 或 MediaRecorder。

在以下演示（可从 WebRTC 示例中获取）中，从左侧画布元素捕获的 MediaStream 通过 WebRTC 对等连接流式传输到右侧的视频元素：

（下文提供了更多画布和视频示例的链接。）

captureStream() 代码很简单。

对于 <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;

对于 <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;
};

但为什么？

借助 captureStream() 方法，您可以从画布和媒体元素录制或直播：

  • 录制和直播 <canvas> 中的游戏内容
  • 从摄像头拍摄视频，然后添加其他内容或特效
  • 通过 <canvas> 从多个视频创建画中画效果
  • 在 <canvas> 中合并视频和图片（来自文件或摄像头，或同时来自两者）
  • 直播从文件播放的视频
  • 使用录制的音频或视频消息作为视频或语音邮件

从本质上讲，captureStream() 使 JavaScript 能够构建内容并将其“注入”到 MediaStream 中。

细则

  • 尝试将 captureStream() 与通过 Encrypted Media Extensions 实现内容保护的媒体元素搭配使用时，会抛出异常。

  • 从 <canvas> 进行捕获时，会在调用 captureStream() 时设置最大帧速率。例如，canvas.captureStream(10) 表示画布输出的帧速率介于 0 到 10 fps 之间。如果 <canvas> 上未绘制任何内容，则不会捕获任何内容；即使 <canvas> 以 30 fps 的速度绘制，也只会捕获 10 fps。我们已针对 captureStream 规范提交了一个包含更多讨论的 bug。

  • captureStream() 视频的尺寸与调用它的 <canvas> 相匹配。

演示

画布

视频

支持

  • Canvas captureStream()：Firefox 43 或更高版本；Chrome 50 及更高版本，且已启用 chrome://flags/#enable-experimental-web-platform-features，或者 Chrome 52 及更高版本（默认）。
  • 视频和音频 captureStream()：Firefox 47；Chrome 52 及更高版本（启用 chrome://flags/#enable-experimental-web-platform-features），或 Chrome 53 及更高版本（默认）。

了解详情