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