WebRTC在2011年实现了浏览器之间的实时通信。这款API能帮你在两个用户之间创建一个P2P连接，并允许他们共享数据，例如视频聊天并共享屏幕。在本系列文章中，我们打算创建一个这样的视频聊天。
创建视频聊天的第一步，是访问用户设备（比如访问网络摄像头和麦克风）以及他们的数据流。在本系列第一篇文章中，我们将访问我们的设备并在浏览器上显示视频（带音频）。最终结果将如下所示：
访问用户音、视频流
首先我们需要访问用户的网络摄像头和麦克风。导航器已经通过 MediaDevices界面访问了媒体设备。
1window.navigator.mediaDevices
我们能获得一个列表，它是通过浏览器在控制台中调用来访问所有设备获得的：
1const devices =等待window.navigator
2 .mediaDevices
3 .enumerateDevices（）;
在我的浏览器中，我得到一个由五个设备组成的阵列、一个视频输入和五个音频输入。但我们的目标不是设备本身，而是通过这些设备获得数据流。
媒体内容（如音频和视频），都通过 MediaStream界面呈现出来。要想访问数据流，你需要在 mediaDevices 对象上调用 getUserMedia 函数。我们需提供所需媒体类型（这里是音频和视频）作为参数，还可以提供些约束作为参数，这些约束不仅是媒体类型，还包括我们想要的视频大小、方向等。我们在此处尽量要设置得简单：
1const stream = await window.navigator.mediaDevices.getUserMedia（
2 {
3 video：true，
4 audio：true，
5 }，
6）;
因为你必须允许访问你的设备，所以这将返回一个Promise。在Google Chrome浏览器上，你应该看到一个这样的对话框：
如果你选择允许，你将收到MediaStream对象。如果你的网络摄像头有此功能，那接下来你应该会看到它旁边有点亮光，表示它已经打开了。
我们的MediaStream对象由两条轨道组成，每条对应一种媒体类型。你可以通过调用访问它们
1stream.getAudioTracks（）;
2stream.getVideoTracks（）;
这些方法会返回轨道数组，并且每条轨道包含一些类型信息（例如音频或视频）、标签、提示以及轨道是否启用、静音等信息。
HTML5视频标签
我们已经通过麦克风和网络摄像头访问了数据流，现在我们只想在浏览器上显示它们来确保其正常运行。以前这会很麻烦，但现在HTML5视频标签能让我们在页面中轻松地构建视频。
1!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="UTF-8">
6 <title>VideoChat</title>
7 <script src="index.js"></script>
8 <link rel="stylesheet" href="styles.css">
9</head>
10
11<body>
12 <div>
13 <video id="video" controls autoplay></video>
14 </div>
15 <div>
16 <button id="button">Start Video</button>
17 </div>
18</body>
19
20</html>
1ody {
2 text-align: center;
3}
4
5video {
6 width: 500px;
7 height: 500px;
8 margin: 20px;
9}
10
11button {
12 padding: 5px;
13 background-color: seagreen;
14 color: white;
15 border-radius: 3px;
16 font-weight: bold;
17}我们有一个带有控件的视频标签（播放、静音和停止按钮）和一个用于启动视频的按钮。单击之前，屏幕如下所示：
让我们看一下JavaScript代码：
1function () {
2 "use strict";
3
4 document.addEventListener('click', async event => {
5 if (event.target.id === 'button') {
6 const stream = await window.navigator.mediaDevices.getUserMedia({ video: true, audio: true });
7 const video = document.getElementById('video');
8 video.srcObject = stream;
9 video.play();
10 }
11 });
12
13})();
当你单击按钮时，我们会创建一个之前创建过的流。你的浏览器只有征得许可才能开始播放视频（此处不能处理用户拒绝播放视频的情况）。流可用后，将其设置为视频标签的源对象，然后启动视频，你应该就可以看到自己并听到自己的声音了。
现在，我们可以从浏览器中访问数据流。然后在想进行视频聊天的用户浏览器之间创建连接。在接下来的文章中，我们将在两个客户端之间创建一个WebSocket连接。
点击【阅读原文】浏览后续文章：
