HTML5 从画布、视频、音频等媒体标签捕获媒体流

参考：https://developers.google.com/web/updates/2016/10/capture-stream

captureStream()函数可以从<canvas>、<audio>或者<video>标签获取MediaStream。

这使得来自这些元素中任何一个的视频或音频流都可以被录制，通过WebRTC实时流式传输，或在<canvas>与其他MediaStream组合在一起。换句话说，captureStream（）使MediaStream能够在画布、音频或视频元素之间来回传递媒体，或者传递到RTCPeerConnection或MediaRecorder。

 

<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 &