8.组合对等连接和信令

你会学到什么

在此步骤中，您将了解如何：

使用运行在Node.js上的Socket.IO运行WebRTC信令服务
使用该服务在对等体之间交换WebRTC元数据。

此步骤的完整版本在步骤-05文件夹中。

替换HTML和JavaScript

将index.html的内容替换为以下内容：

<!DOCTYPE html>
<html>
<head>
  <title>Realtime communication with WebRTC</title>
  <link rel="stylesheet" href="/css/main.css" />
</head>
<body>
  <h1>Realtime communication with WebRTC</h1>

  <div id="videos">
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="js/lib/adapter.js"></script>
  <script src="js/main.js"></script>

</body>
</html>

将js/main.js替换为步骤-05/js/main.js的内容。

运行Node服务器

node index.js

（确保您使用上一步实现Socket.IO的index.js版本。）

从您的浏览器中，打开localhost:8080。

再次打开localhost:8080，在新的选项卡或窗口中。一个视频元素将显示来自getUserMedia()的本地流，另一个将显示通过RTCPeerconnection流式传输的“远程”视频。

每次关闭客户端选项卡或窗口时，都需要重新启动Node服务器。

在浏览器控制台中查看日志。

加分点

此应用程序仅支持一对一视频聊天。您如何更改设计以使多个人共享同一个视频聊天室？
```
TODO
```
该示例的房间名称foo是硬编码的。启用其他房间名称的最佳方法是什么？
```
让用户输入来自定义房间名称
```
用户如何共享房间名称？尝试建立一个共享房间名称的替代方案。
```
TODO
```
您如何更改应用程序？

提示

WebRTC统计信息和调试数据可从chrome://webrtc-internals获取。
可以使用test.webrtc.org来检查您的本地环境并测试相机和麦克风。
如果因为缓存有奇怪的麻烦，请尝试以下操作：
- 按住Ctrl键并点击“重新加载”按钮，进行硬刷新
- 重新启动浏览器
- 从命令行运行npm cache clean

接下来

了解如何拍照，获取图像数据，并在远程对等体之间共享。

Previous7.设置信令服务来交换消息 Next9.拍照并通过数据通道分享

Last updated 5 years ago