webrtc入门：1.使用getUserMedia获取摄像头流

Webrtc

互联网发展到现在的这个程度，经过了三个时代，第一个是文字时代，第二个是图片时代，现在到了第三个时代，视频流的时代。得益于移动互联网的发展，现在基本上是每个人一台手机了。而移动互联网的发展中，有一项技术更是突飞猛进的进步。那就是音视频的技术。

在生活中我们可以拿上手机随时随的的找人视频聊天；在工作中，我们可以在视频会议中，讨论我们的工作；这些用到的底层的技术都是音视频的技术。

而音视频的技术太广了，在十几年前，我们都不知道怎么从哪里学起，音视频的资料更是非常的稀少。能够掌握到一点音视频的处理，都可以成为牛人。

但是现在不一样了，随着开源代码的发展，我们在入门音视频的道路上，会更好走。在音视频的通话中，最简单的莫过于通过浏览器就能进行音视频的交流。我们不需要下载任何的app，只要在浏览器中，就能进行音视频的沟通，这要归功于谷歌的webrtc协议。

在2011年，谷歌看到了音视频技术，会成为后面流行的一种技术，创建了webrtc 的项目，他的想法就是直接通过浏览器就能进行音视频对话。

随着这几年webrtc 的发展，很多浏览器都集成了webrtc ，包括Chrome、Firefox、Safari 甚至是最新的 Edge，都支持了webrtc的协议，能够发方便的进行浏览器之间的音视频通讯。

到现在，webrtc 在浏览器上的使用是非常方便的，接口方便简单，我们只要通过javascript 就能操作音视频通讯的整个流程，这点是做javascript 脚本开发想都不敢想的，我们尽然能通过javascript 获取摄像头的数据，并把摄像头的数据发送出去。

getUserMedia 获取设备视频流

在使用webrtc的过程中，入门的开始是比较困难的，这里通过一些简单的例子不断的展现webrtc是一个什么技术，慢慢的带你入门。

webrtc作为一种常见的会议系统，通常都需要使用摄像头进行视频会议，而webrtc在获取摄像头数据也非常简单，通过几行简单的代码，就能显示摄像头的数据。

main.js

#获取显示摄像头数据的video
const video = document.querySelector('video');#getUserMedia 参数，这里只获取视频
const constraints = {audio: false,video: true
};把摄像头的数据展示在video上
function handleSuccess(stream) {window.stream = stream;video.srcObject = stream;
}#错误处理
function handleError(error) {console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
}#获取摄像头数据并回调
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);

index.html

<div id="container"><video playsinline autoplay></video></div>

通过navigator.mediaDevices.getUserMedia获取到摄像头的数据，并回调给handleSuccess后，把摄像头的数据展示在video上。

可以看到，短短的几行代码，就能把摄像头的数据展示出来，确实是强大。

Https配置

如果碰到如下的错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'getUserMedia')

这是因为webrtc需要使用https，Https的配置可以参考这篇

Constraints 参数

constraints 参数包含了对音频和视频的设置，设置的参数较多，可以参考 constraints 参数api

这里把它设置为：获取麦克风能力和使用1280x720的摄像头分辨率。

{audio: true,video: { width: 1280, height: 720 }
}

可以看到，我们的摄像头高度受到了控制，耳机里可以听到麦克风的声音。

例子中的代码在这里。