如何通过WebRTC在浏览器中实现音视频直播系统对摄像头的访问？

本文共计709个文字，预计阅读时间需要3分钟。

音视频直播系统如何应用设备是基础，WebRTC是关键。对于前端开发者来说，若用JavaScript做音视频处理，在浏览器性能是关键。

音视频直播系统如何调用设备是基础 一、WebRTC的由来

• 对于前端开发小伙伴而言，如果用 JavaScript 做音视频处理

• 在以前是不可想象的，因为首先就要考虑浏览器的性能是否跟得上音视频的采集

• 但是 Google 作为国际顶尖科技公司，就喜欢做一些常人无法想象的事情

• 2011 年，Google 创立了 WebRTC 项目，其愿景就是可以在浏览器之间快速地实现音视频通信。

• 随着时间的发展，在浏览器之间进行实时音视频通信已经已经变很成熟了

二、1对1音视频通话结构

• 从上图结构图可以看出，1对1的视频通话结构大体上可以分为四个部分

• 两个 WebRTC 终端：这里可以看成是两个浏览器，主要负责音视频采集、编解码、NAT 穿越、音视频数据传输

• Signal（信令）服务器：负责信令处理，如点击静音，关闭摄像头，进入房间等指令操作

• STUN/TURN 服务器：负责获取 WebRTC 终端在公网的 IP 地址，以及 NAT 穿越失败后的数据中转

三、浏览器同时采集音视频

• 浏览器中采集音视频设备非常简单

• 只需要使用 getUserMedia(constraints) 方法即可

• 传入的 constraints 是配置参数，可以单独配置是否采集音视频

• 但是IE8以下的浏览器不兼容该视频采集方法

// 同时采集音视和视频 const mediaStreamContrains = { video: true, audio: true }; var promise = navigator.mediaDevices.getUserMedia(mediaStreamContrains);

四、帧率降噪功能配置

• frameRate：可以配置视频帧率

• width：设置视频宽度，ideal代表理想宽度

• height：设置视频高度，ideal代表理想高度

• aspectRatio：代表宽高比

• 对于音频则是开启回音消除、降噪、自动增益等操作

const mediaStreamContrains = { video: { frameRate: {min: 20}, width: {min: 640, ideal: 1280}, height: {min: 360, ideal: 720}, aspectRatio: 16/9 }, audio: { echoCancellation: true, // 开启回音消除 noiseSuppression: true, // 降噪 autoGainControl: true // 自动增益 } }; var promise = navigator.mediaDevices.getUserMedia(mediaStreamContrains);

五、采集视频数据

• 采集摄像头的内容并在浏览器上播放

• 需要注意的是，一定要在www.558idc.com/krgf.html 网络转载请说明出处】