来自网络摄像头和麦克风的数据流:使用WebRTC进行视频通话第1步

WebRTC在2011年实现了浏览器之间的实时通信。这款API能帮你在两个用户之间创建一个P2P连接,并允许他们共享数据,例如视频聊天并共享屏幕。在本系列文章中,我们打算创建一个这样的视频聊天。以下是浏览后续文章的链接:

创建视频聊天的第一步,是访问用户设备(比如访问网络摄像头和麦克风)以及他们的数据流。在本系列第一篇文章中,我们将访问我们的设备并在浏览器上显示视频(带音频)。最终结果将如下所示:

1_3yb5TDAEeaYrE2v-cNlhFA

访问用户音、视频流

首先我们需要访问用户的网络摄像头和麦克风。导航器已经通过 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浏览器上,你应该看到一个这样的对话框:

1_Q7hMWcOdyCYFhtnbkb6zOQ

如果你选择允许,你将收到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