4

WebRTC基础实践 - 8. 集成对等通信和信令服务

 3 years ago
source link: https://renfufei.blog.csdn.net/article/details/84999699
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

在本节课程中, 我们将学习以下内容:

  • 在Node.js平台, 通过Socket.IO来启动信令服务。
  • 用信令服务交换WebRTC客户端之间的元数据(metadata)。

本节的完整版代码位于 step-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="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

如果没有执行上一节的操作, 需要在 step-05目录下, 或者工作目录下, 安装相应的依赖, 命令如下:

npm install

安装完成后, 需要启动 Node.js 服务器, 在work目录下执行命令:

node index.js

请确保 index.js 中的内容包含了前一节介绍的 Socket.IO 部分。更多Node.js和Socket.IO的内容, 请参考 7_Set_up_signaling_service.md。

服务器启动完成后, 请打开浏览器, 输入地址, 如: http://localhost:8080。

然后继续打开第二个标签页/新窗口, 输入地址: http://localhost:8080。 则页面中会显示两个video元素, 第一个展示 getUserMedia() 获取到的本地视频,第二个则展示 RTCPeerconnection 传输过来的远程视频。

因为程序逻辑简单, 如果刷新或者关闭了客户端标签页, 则需要重启 Node.js 才能继续使用。

相关的日志信息, 可以在浏览器控制台中查看。

练习与实践

  1. 本应用只支持一对一视频。请修改设计方案, 以支持多人使用同一聊天室。
  2. 示例中的房间号硬编码为 cnc。有什么方法可以使用其他房间号呢?
  3. 用户怎样才能分享他的房间号? 请尝试一种分享房间号的办法。
  4. 尝试改进这个应用。

在本节课程中, 我们学习了:

  • 在Node.js平台, 通过Socket.IO来启动信令服务。
  • 用信令服务交换WebRTC客户端之间的元数据(metadata)。

本节的完整版代码位于 step-05 文件夹中。

  • WebRTC相关的统计和调试信息, 请访问: chrome://webrtc-internals。
  • 可以访问 https://test.webrtc.org/ 来检查本地环境, 比如摄像头和麦克风等等。
  • 如果碰到奇怪的缓存问题, 可以尝试以下步骤:
  • 强制刷新浏览器, 比如 CTRL+F5, 或者按住ctrl键, 并单击刷新按钮。
  • 重启计算机或者浏览器
  • 执行清理npm缓存的命令: npm cache clean

下一节, 我们将学习如何拍照, 并发送给另一个客户端。

原文链接: https://codelabs.developers.google.com/codelabs/webrtc-web/#7

翻译人员: 铁锚 - https://blog.csdn.net/renfufei

翻译日期: 2018年08月27日

WebRTC基础实践 系列文章目录如下:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK