我们今天要写的东西不是每个人都常用的。因为兼容性真的不好，只是为了说明前端还是可以做这些事情的。你能想象前端可以从摄像头和麦克风中提取视频流和音频流，为所欲为吗？或者我想把我的画布画板的内容录制成视频。这些js应该做不到的事情其实可以做，但是兼容性不好。我这里以chrome浏览器为例。

这里，首先列出使用的API:

GetUserMedia:打开摄像头和麦克风的接口(文档链接)MediaRecorder:采集音视频流(文档链接)srcObject:视频标签可以直接播放视频流，这是一个大家应该很少使用但兼容性很好的属性。我推荐大家知道(文档链接)captureStream: canvas可以作为流输出，其实不仅仅是canvas，而是文档(文档链接)1。

首先，打开摄像头

//这里是打开摄像头和麦克风设备(将返回一个Promise对象)。navigator . media devices . getuser media({ audio : true，Video: true})。然后(stream={ console . log(stream)//回放回声视频流})。catch(err={ console . log(err)//err callback })上面，我们成功打开了摄像头和麦克风，获得了视频流。然后下一步是将流呈现给交互界面。

第二，展示视频

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/head dy video id=' video ' width=' 500 ' height=' 500 ' autoplay/video/body script var video=document . getelementbyid(' video ')The navigator . mediadevices . getuser media然后(stream={//这里将使用srcObject属性。可以直接播放流资源video.src对象=stream})。catch(err={ console . log(err)//err callback })/script具有以下效果：

到目前为止，我们已经成功地在页面上展示了我们的相机。下一步是如何捕捉视频和下载视频文件。

2.从摄像机收集视频

此处使用了MediaRecorder对象：

创建新的MediaRecorder对象，返回MediaStream对象进行录制操作，并支持MIME类型的配置项配置容器(如“video/webm”或“video/mp4”)或音频码率视频码率

MediaRecorder接收两个参数，第一个是流音频和视频流，第二个是选项配置参数。接下来，我们可以将上面相机获得的流添加到MediaRecorder中。

var video=document . getelementbyid(' video ')navigator . mediadevices . getuser media({ audio : true，Video: true})。然后(stream={//这里会用到srcObject属性，流资源视频。srcobeject=stream var media recorder=new media recorder(stream，{ audiobitsperscond: 128000，//audioberscond video rate : 100000，//video rate mime type : ' video/webm；编解码器=h264' //编码格式})})。catch(err={ console . log(err)//err callback })在上面，我们创建了一个MediaRecorder的实例。下一步是控制mediaRecorder开始和停止采集。MediaRecorder提供了一些方法和事件供我们使用：

MediaRecorder.start():开始录制媒体。调用此方法时，可以为时间片参数设置毫秒值。如果设置了此毫秒值，录制的媒体将根据您设置的值分成单独的块。而不是默认记录一大段内容。MediaRecorder.stop():停止录制。同时，它会触发dataavailable事件，并返回一个记录的数据来存储Blob内容。之后，它不会记录ondataavailable事件。MediaRecorder.stop触发此事件。事件可以用来获取录制的媒体(Blob可以作为事件的数据属性中的对象)//这里我们增加了两个按钮来控制采集的开始和结束。var start=document . getelementbyid(' start ')var stop=document . getelementbyid(' stop ')var video=document . getelementbyid(' video ')navigator . mediadevices . getuser media({ audio : true，Video: true})。然后(stream={//这里会用到srcObject属性，流资源视频。srcobeject=stream var media recorder=new media recorder(stream，{ audiobitsperscond: 128000，//audioberscond video rate : 100000，//video rate mime type : ' video/webm；编解码器=h264' //编码格式})//开始采集开始。onclick=function(){ media recorder。start()console . log(' start acquisition ')}//stop acquisition stop . onclick=function(){ media recorder . stop()console . log(' stop acquisition ')}//event media recorder . on data available=function(e){ console . log(e)//download video var Blob=new Blob([e . data])，{ ' type ' : ' video/MP4 ' })let a=document。createelement ('a') a.href=URL。createobjecturl(blob)a . download=` test.mp4 ` a . click()} })。catch (err={console.log(。

从上图可以看出，收集结束后ondataavailable事件返回的数据中有一个Blob对象，就是视频资源。然后我们可以通过url.createObjectURL()方法将Blob作为URL下载到本地区域。视频是收集下载的，非常简单粗暴。

以上是一个视频捕获和下载的例子。如果您只需要音频捕获，您可以用同样的方式设置“mimeType”。这里就不举例了。接下来我将介绍录制画布作为视频文件

2.画布输出视频流

这里使用的是captureStream方法，也可以输出画布流并与视频一起显示，或者使用MediaRecorder收集资源。

//我们还是长话短说，直奔主题吧，因为和上面的视频截图一样。DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/head dy canvas width=' 500 ' height=' 500 ' id=' canvas '/canvas video id=' video ' width=' 500 ' height=' 500 ' autoplay/video/body script var video=document。//在这里获取画布流对象。//接下来，你想做什么就做什么。你可以参考上面的，我就不写了。下面/脚本，我将发布另一个gif(这是我上次写的canvas事件的演示和这个视频捕获的组合)传输门(Canvas事件绑定)

希望你能达到以下效果。其实也可以在画布视频中插入背景音乐，比较简单。