从画布、视频或音频元素捕获 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 th<e sou>rce 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 th<e sou>rce 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> 相匹配。

演示

画布

视频

支持

  • 画布 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 及更高版本。

了解详情