上图可以看到结束采集后ondataavailable事件返回的数据中有一个Blob对象，这就是视频资源了，再接下来我们就可以通过URL.createObjectURL()方法将Blob为url下载到本地了。视频的采集到下载就结束了，很简单粗暴。
上面是视频采集下载的例子，如果只要音频采集的，同样道理的设置“mimeType”就好了。这里我就不举例了。下面我在介绍将canvas录制为一个视频文件
2、canvas输出视频流
这里用到的是captureStream方法，将canvas输出流，再用video展现，或者用MediaRecorder采集资源也是可以的。
// 这里就闲话少说直接上重点了因为和上面视频采集的是一样的道理的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <canvas></canvas> <video autoplay></video> </body> <script> var video = document.getElementById('video') var canvas = document.getElementById('canvas') var stream = $canvas.captureStream(); // 这里获取canvas流对象 // 接下来你先为所欲为都可以了，可以参考上面的我就不写了。 </script>
下面我再贴一个gif(这是结合我上次写的canvas事件的demo结合这次视频采集的结合)传送门（Canvas事件绑定）
希望大家可以实现下面的效果，其实还可以在canvas视频里插入背景音乐什么的，这些都比较简单。
您可能感兴趣的文章: