你将学到

通过本节,你将学到:

  • 运行基于Node.js Socket.IO实现的WebRTC信令服务
  • 使用该服务在peer之间交换WebRTC元数据

本节的所有内容位于 step-05 文件夹

替换HTML和JavaScript

使用如下内容替换 index.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>

</body>

</html>

使用 step-05/js/main.js 替换 js/main.js.

运行Node.js服务

如果你没有按照codelab教程操作work目录,你可能需要安装step-05目录的依赖项,在命令行终端输入如下命令:

1
npm install

一旦安装完成,使用如下命令启动Node.js server:

1
node index.js

浏览器打开 localhost:8080.

新建一个浏览器tab或者window,再次打开 localhost:8080。一个video标签将展示从getUserMedia()获取的本地视频流,另一个video标签将展示通过RTCPeerConnection获取的远端视频流。

每次你关闭浏览器tab或window时需要重启Node.js server。

观察浏览器console输出的日志。

加分项(Bonus points)

  1. 程序只支持一端到另一端(one-to-one)的视频通话。如何修改设计使得多人共享统一视频聊天室?
  2. 本示例的room name是硬编码到程序的,使用房间名称的最佳方式是什么?
  3. 用户如何共享房间名称?尝试构建其他方案来共享房间名称。
  4. 如何修改程序?

Tips

  • WebRTC统计和调试数据参考 chrome://webrtc-internals.
  • test.webrtc.org 可用于检查你的本地环境,测试你的摄像头和麦克风。
  • 如果遇到一些奇怪的问题,试着尝试如下操作:
    • 清空缓存并硬性加载(在刷新按钮上点击右键选择)
    • 重启浏览器
    • 在命令行终端运行 npm cache clean

下一步

了解如何拍摄照片、获取图像数据,并与远端peer共享。