详解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) // 错误回调
})

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。