WebRTC 初体验

WebRTC 是 网络实时通信 （Web Real-Time Communication）的缩写，通过它 Web 开发者能够轻易快捷地开发出丰富的实时多媒体应用，而无需下载安装任何插件。

本文总结了我这两天探究 WebRTC 过程中了解到的相关知识以及个人见解，并且结合我自己的实践说明了 WebRTC 的一些基本用法。

概述

WebRTC 允许网络应用建立浏览器之间的 点对点 连接，实现视频流、音频流或者其他任意数据的传输。

基本所有现代浏览器都支持 WebRTC：

WebRTC 主要提供了三个核心的 API：

• getUserMedia：可以获取本地的媒体流，一个流包含几个轨道，比如视频和音频轨道。
• RTCPeerConnection：用于建立 P2P 连接以及传输多媒体数据。
• RTCDataChannel：建立一个双向通信的数据通道，可以传递多种数据类型。

通过这三个 API，我们可以获取本地的音视频流，然后与其他浏览器建立点对点连接并将音视频流发送给对方，还可以建立一个建立一个双向的数据通道，发送文本、文件等实时数据。

获取本地媒体流

通过getUserMedia 函数，我们可以发起获取本地媒体流的请求：

navigator.getUserMedia(constraints, successCallback, errorCallback);
复制代码

函数有三个参数，分别是约束条件，成功的回调和失败的回调。成功获取媒体流后，媒体流可以提供给本地的音频或视频元素进行播放、后期处理的 JavaScript 代理，或者发送给另一端。

下面是一个简单的示例，访问摄像机并在页面中播放视频：

在CodePen 上查看。

我添加了 WebRTC Adapter 处理浏览器的兼容。当点击按钮时，通过 getUserMedia 获取本地视频，浏览器会弹框询问用户是否同意，成功获取视频流之后，将流设置为 video 的源对象。

点对点连接

获取到本地的媒体流之后，为了实现音视频通话，接下来需要做的就是将媒体流发送给对方。在 WebRTC 中，通信双方直接建立点对点连接，数据不需要经过服务器转发。

要建立一个连接需要知道对方的 IP 地址和端口号，而现实网络环境中，主机通常都处在NAT 设备之后，也就是常说的内网中。NAT 设备负责内部通信地址和外部通信地址之间的互相转换，例如将 192.168.0.3 映射成 120.132.92.21:9202 。通过 NAT，使用少量的公有 IP 地址就可以代表较多的私有 IP 地址，有助于解决 IPv4 地址枯竭的问题。如果要与内网中的设备建立连接，就需要 NAT 穿透（内网穿透）技术。

WebRTC 通过 ICE（Interactive Connectivity Establishment，交互式连接建立）来建立 P2P 连接。ICE 是一个框架，它整合了 STUN 和 TURN 协议，为 NAT 穿透技术提供了统一实现。

RTCPeerConnection

WebRTC 中，我们通过RTCPeerConnection 建立通信双方的点对点连接，该接口提供了创建，保持，监控，关闭连接的方法的实现。

为了建立连接，我们需要一台信令服务器，用于浏览器之间建立通信时交换各种元数据（信令）。同时，还需要 STUN 或者 TURN 服务器来完成 NAT 穿透。连接的建立主要包含两个部分：信令交换和设置 ICE 候选。

连接建立成功之后，可以通过 addStream 加入流到 RTCPeerConnection 中来传输媒体流数据，还可以监听 addstream 事件获取对方发送过来的流。

信令交换

信令交换过程如下：

createOffer
setLocalDescription
setRemoteDescription
createAnswer
setLocalDescription
setRemoteDescription

其中SDP 是会话描述协议，用于描述流媒体的初始化参数。

信令的传输通常使用 http、WebSocket、DataChannel 三种方式。

添加 ICE 候选

通信双方各自创建配置了 ICE 服务器的 pc 实例，并监听 icecandidate 事件。当 ICE 候选可用时，将会触发 icecandidate 事件，通信双方需要将 ICE 候选信息通过信令服务器发送给对方。当收到对方发送过来的 ICE 候选时，调用 addIceCandidate 方法，将其添加到 pc 实例中。