WebRTC 教程 (3)

2022-05-24 18:21:42 浏览数 (1)

来源：Engineering Semester 内容整理：李昊勇 本文是 WebRTC 的第三篇教程，主要介绍了 WebRTC 的一些特性，调试方法以及相关服务器搭建方法。

WebRTC 教程（1）

WebRTC 教程（2）

目录

  • WebRTC: 如何在浏览器中启用/禁用
    • Chrome
    • Firefox
    • Safari
    • Microsoft Edge
    • Opera
  • WebRTC 中的 WebSocket
    • WebRTC 能否代替 WebSocket
  • 如何调试 Chrome 中的 WebRTC
  • 如何调试 Firefox 中的 WebRTC
  • DataChannel API 介绍及使用
    • WebRTC DataChannel
    • 如何设置 WebRTC DataChannel
  • 通过 WebSocket 搭建一个信令服务器

WebRTC: 如何在浏览器中启用/禁用

以下这些浏览器是支持WebRTC的浏览器：

  • Google Chrome(28 )
  • Mozilla Firefox(22 )
  • Safari(11 )
  • Microsoft Edge(12 )
  • Opera(18 )

Chrome

Chrome 浏览器中，WebRTC 是默认开启的，如果没有开启，就需要检查是否有其他扩展在阻拦 WebRTC 服务，如 WebRTC Leak Prevent 和 WebRTC Control 和 Easy WebRTC Block 和 WebRTC Network Limiter 等。

Firefox

Firefox 浏览器中，WebRTC 也是默认开启的，如果想要关闭 WebRTC，可以直接在浏览器权限中设置：在地址栏中填入"about:config"并进入，在搜索栏中搜索 media.peerconnection，就可以在列表中看到 media.peerconnection.enabled，可以在此直接设置开启与否。

Safari

Safari 浏览器中同样也可以在浏览器权限中设置开启与关闭 WebRTC。方法：Preference -> Advanced 中开启开发模式的菜单，并在开发模式中选择 Experimental Features 并开启 WebRTC DTMF。关闭 WebRTC 也是相同的方法

Microsoft Edge

Edge 浏览器中，WebRTC 是默认开启的，如果没有，就需要在已安装的扩展中搜索有没有 WebRTC 控制相关的设置。

Opera

Opera 浏览器中，可以通过其他扩展或者浏览器两种方式来开启或关闭 WebRTC 服务。Opera 中可以用于关闭 WebRTC 的扩展有：WebRTC Leak Prevent, WebRTC Control, Easy WebRTC Block, WebRTCNetwork Limiter 等。或是用设置的话：Settings->Preference 中输入 WebRTC 就能看到 WebRTC 的开启或关闭选项。

WebRTC 中的 WebSocket

WebSocket 是一个基于 HTTP 的协议，并且需要一个服务器。用户可以通过 WebSocket 接收或发送任何类型的数据。

WebRTC 能否代替 WebSocket

首先，WebSocket 只是一个基于 HTTP 的传输协议，不是一个采集音视频流的工具，而 WebRTC 是一个专门为媒体流而不是数据流分享而设计的，且其基于 DTLS，也就带来了更高的安全性，且也可以使用 WebRTC DataChannel 来发送或接收任何数据。

其次，WebSocket 需要一个服务器，可以支持一个浏览器和一个网页服务器之间的全双工通信，并可以使用 wss 来让其更安全。WebRTC 需要一个信令服务器来交换 SDP，它会直接与某人的浏览器进行连接并交换数据，它也可以在两个浏览器之间完成全双工通信。

总而言之，WebSocket 是为可靠通信设计的，其更注重于网页应用，如果想要的是服务器-客户端模式的通信，WebSocket 是更好的选择。而在 WebRTC 中传输的是非可靠流，意味着可以在网络中出现丢包，WebRTC 主要面向的是安全的浏览器间之间通信。

在 WebRTC 中，也可以使用 WebSocket 来搭建信令服务器。讲者展示了一个两个浏览器通过一个 WebSocket 信令服务器建立连接的示意图：

其中，信令服务器是使用 nodeJS 应用写的，nodeJS 是一个异步的服务端 javascript 服务器。WebSocket 服务器可以直接不借助其他协议的情况下完成信令过程。

如何调试 Chrome 中的 WebRTC

假设现在有一个应用正在 Web 浏览器上运行，WebRTC 通信中的进程都是异步的，那么问题来了:如何找到一次通话中哪个 WebRTC 进程停止了？这时候就需要用到 WebRTC Logs 了。

Chome 浏览器提供了一个 WebRTC 内部页面用于跟踪 WebRTC 连接，如下图右侧所示。

在一个 WebRTC 会话的过程中，可以打开 chrome://webrtc-internals 页面，来看到这些 log 信息。可以点击这些 api 的任意一项来看到其参数。讲者进一步列举了常用的连接方法和事件的内容及其参数：

这些方法都可以点进去，查看当前的参数或返回的成功与否，比如AddStream方法中的流id，CreateOffer方法是否调用成功等。

如何调试 Firefox 中的 WebRTC

要在 Firefox 浏览器中调试 WebRTC，首先需要安装 DevTools Media Panel，然后在加载了插件后，运行 WebRTC 应用，并点击 Tools->Browser Tools->Web Developer Tools 并点击 Media-WebRTC。之后就可以看到 WebRTC 进程和连接状态，此外也可以点击任意的 API 来查看其参数。随后讲者通过视频具体展示了 Debug WebRTC 流程。

DataChannel API 介绍及使用

WebRTC DataChannel

在只希望使用 WebRTC 传输文件或文本时，WebRTC 标准也支持一个 API 来通过 RTCPeerConnection 发送任意的数据，即 RTCDataChannel。RTCDataChannel 负责所有的实时数据的交换，并把这些数据直接从一端传输到另一端。RTCDataChannel 相对于其他通信信道最大的优势在于，它是不借助第三个服务器，直接在端到端之间传输的，使用 Stream Control Transmission Protocal(SCTP) 就导致其有很低的延迟。

WebRTC DataChannel 支持 Blob，ArrayBuffer 以及 ArrayBufferView，这些在文件传输以及多人游戏服务中都十分关键。SCTP 协议可以允许设置可靠性，基于信息的传输，流控以及拥塞控制，它还会使用 DTLS 来完成加密保护隐私。总而言之，DataChannel 可以提供一个飞快的安全的浏览器间传输方案。

如何设置 WebRTC DataChannel

DtaChannel 是从一个已经连接的 PeerConnection 中建立的，可以设置其中一些可选项，如 ordered, maxPcketLifeTime, maxRetransmits 等。DataChannel 还提供了一些事件，连接建立了，断开了或是遇到错误，以及从对端接收到信息时。

通过 WebSocket 搭建一个信令服务器

信令服务器负责帮助 WebRTC 搭建其中的端到端连接。WebSocket 在服务端和客户端之间提供一个持续的低延迟连接。

WS library 可以基于 Node.js 帮助搭建 WebSocket，而 NPM 则是 NodeJS 的包管理平台。接着讲者展示了一个搭建 WebSocket 连接的 demo。

首先可以看到通过 require 方法引入了 WebSocket 包，在第二行就生成了一个监听 8895 端口的服务器，并在连接建立成功情况下，通过 connection.send 发送信息，connection.on 接收信息以及关闭连接。

http://mpvideo.qpic.cn/0bc3cmaaaaaa2yang53yzfrfae6daajqaaaa.f10002.mp4?dis_k=b4993c6dc97af26b44fb8ac9805019c4&dis_t=1653387669&vid=wxv_2390643062164520961&format_id=10002&support_redirect=0&mmversion=false

网站 socket编程 api

0 人点赞