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