java语言实现视频音频采集_详解js的视频和音频采集

今天要写的，不是大家平时会用到的东西。因为兼容性实在不行，只是为了说明下前端原来还能干这些事。

大家能想象前端是能将摄像头和麦克风的视频流和音频流提取出来，再为所欲为的么。或者说我想把我canvas画板的内容录制成一个视频，这些看似js应该做不到的事情，其实都是可以做到的，不过兼容性不好。我在这里都是以chrome浏览器举的例子。

这里先把用到的api列一下：

getUserMedia：打开摄像头和麦克风的接口(文档链接)

MediaRecorder：采集音视频流(文档链接)

srcObject：video标签可直接播放视频流,这是一个大家应该很少用到其实兼容性很好的属性，推荐大家了解(文档链接)

captureStream：可以将canvas输出流，其实不单单是canvas这里只是举有这个功能，具体的可以看文档(文档链接)

1、从摄像头展示视频

一、打开摄像头

// 这里是打开摄像头和麦克设备(会返回一个Promise对象)

navigator.mediaDevices.getUserMedia({

audio: true,

video: true

}).then(stream => {

console.log(stream) // 放回音视频流

}).catch(err => {

console.log(err) // 错误回调

})

上面我们成功打开了摄像头和麦克风，并获取到视频流。那接下来就是要把流呈现到交互界面中了。

二、展示视频

Document

var