借助 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>相匹配。
演示
画布
视频
支持
- 画布
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 及更高版本。