浏览器只能获取一个摄像头_原来通过浏览器访问摄像头这么容易

对于很多从事 JavaScript 开发的同学来说，基本都认为 JavaScript 是专门做页面控制的。如果用 JavaScript 做音视频处理，那真是很难想象的事儿。你可能首先想到的问题是：JavaScript 或者浏览器的性能跟得上吗？

而 Google 却不这么认为。 Google 就是要做一些常人无法想象，又难以理解的事情，否则它就不是 Google 了。

“浏览器 + WebRTC”就是 Google 给出的答案。2011 年，Google 创立了 WebRTC 项目，其愿景就是可以在浏览器之间快速地实现音视频通信。

随着 WebRTC 1.0 规范的推出，现在主流浏览器 Chrome、Firefox、Safari 以及 Edge 都已经支持了 WebRTC 库。换句话说，在这些浏览器之间进行实时音视频通信已经很成熟了。

下面我就通过讲解 JavaScript/ 浏览器访问电脑上的音视频设备，向你展示通过现代浏览器访问音视频设备是何其简单。

WebRTC 处理过程

在正式讲解如何通过浏览器采集音视频数据之前，我先向你介绍一下 WebRTC 实现一对一音视频实时通话的整个处理过程。对这个过程的了解，可以帮助你在阅读文章时，能清楚明了地知道所阅读的这篇文章、所要学习的知识点在整个处理过程中的位置。

WebRTC 1 对 1 音视频实时通话过程示意图

上面这幅图是整个 WebRTC 1 对 1 音视频实时通话的过程图。通过这幅图，你可以看出要实现 1 对 1 音视频实时通话其过程还是蛮复杂的。

这幅图从大的方面可以分为 4 部分，即两个 WebRTC 终端(上图中的两个大方框)、一个 Signal(信令)服务器和一个 STUN/TURN 服务器。

• WebRTC 终端，负责音视频采集、编解码、NAT 穿越、音视频数据传输。
• Signal 服务器，负责信令处理，如加入房间、离开房间、媒体协商消息的传递等。
• STUN/TURN 服务器，负责获取 WebRTC 终端在公网的 IP 地址，以及 NAT 穿越失败后的数据中转。

接下来，我就向你描述一下WebRTC 进行音视频通话的大体过程。

当一端(WebRTC 终端)进入房间之前，它首先会检测自己的设备是否可用。如果此时设备可用，则进行音视频数据采集，这也是本篇我们要介绍的重点内容。

采集到的数据一方面可以做预览，也就是让自己可以看到自己的视频；另一方面，可以将其录制下来保存成文件，等到视频通话结束后，上传到服务器让用户回看之前的内容。

在获取音视频数据就绪后，WebRTC 终端要发送 “加入” 信令到 Signal 服务器。Signal 服务器收到该消息后会创建房间。在另外一端