身为前端仔的你，了解过WebRTC吗？

WebRTC (Web Real-Time Communications) 是一项开源的跨平台的实时通信技术，我们可以使用它在不需要中间媒介的情况下在浏览器中建立对等连接（peer-to-peer），实现音视频传输、屏幕共享、P2P文件共享等功能。

WebRTC 在 2011 年 6 月 1 日开源并在 Google、Mozilla、Opera 支持下被纳入万维网联盟的 W3C 标准。

1、兼容性

caniuse WebRTC

现代浏览器及移动端设备都已经完全支持 WebRTC。

2、WebRTC 架构

WebRTC 架构分为四层

2.1 WebRTC C++ API 层

WebRTC C++ API（PeerConnection）实现 P2P 连接，音视频采集、音视频传输、非音视频数据传输等。

2.2 Session management 层

Session management / Abstract signaling（Session）会话管理层，用来管理音视频、非音视频数据传输，处理相关逻辑。

2.3 引擎&传输协议层

音频引擎（Voice Engine）

- iSAC / iLBC（音频编解码器）
- NetEQ for voice（处理网络抖动和语音包丢失）
- Echo Canceler / Noise Reduction（回声消除/降噪）

视频引擎（Video Engine）

- VP8（视频编解码）
- Video jitter buffer（视频抖动缓冲器，处理因网络原因导致的视频抖动或视频数据丢失）
- Image enhancements（图像增强模块，提升视频画面质量）

传输协议（Transport）

- SRTP（安全的实时传输协议，在 RTP 实时传输协议的基础上增加了安全机制，类似 HTTP 与 HTTPS 的关系）
- Multiplexing（多路复用，多个流数据传输共用一个通道，提高传输效率）
- P2P STUN+TURN+ICE（NAT穿透和中继服务）

2.4 硬件适配层

硬件适配层，包含：音频捕获和渲染、视频捕获、网络I/O。浏览器厂商可以自行实现，这样的设计加大了WebRTC的灵活性及跨平台性。

3、WebRTC 的核心 API

MediaStream API

- navigator.mediaDevices.getUserMedia（调用本地摄像头和麦克风）
- navigator.mediaDevices.getDisplayMedia（调用屏幕捕获）

RTCPeerConnection API（建立对等连接）
RTCDataChannel API（对等连接之间传输数据）

调用 mediaDevices 获取媒体流时，当前网页的协议必须是 localhost 或者 https 才可以，否则 navigator.mediaDevices 是 undefined。

4、WebRTC 建立对等连接

建立对等连接的前提：连接双方必须要知道对方 IP 地址，支持的媒体类型、音视频编码等信息。

本地连接：如果两个设备处于局域网中，不用做任何的处理，只需要使用信令服务器获取对方的 sdp，就可以通过局域网 IP 的方式进行对等连接。

公网连接：除本地连接外。想要实现 P2P 通信，必须让通信双方知道对方的公网 IP 。

4.1 如何获取公网IP？

在实际应用中，由于有 NAT 和防火墙等原因，我们无法直接获取到本机的公网 IP，如果想要获取到本机对应的公网 IP 需要进行 NAT 穿透。

NAT（Network Address Translation， 网络地址转换 ）可以将私有网络中的IP地址转换为公网IP地址，从而实现内网与外网的通信。NAT技术最开始是为了解决IPV4地址不足的问题。

一般情况下，路由器的 WAN 口有一个公网 IP，所有连接这个路由器 LAN 口的设备会分配一个私有网段的 IP 地址（例如 192.168.1.2）。内网设备的 IP 被映射成路由器的公网 IP 和唯一的端口，通过这种方式不需要为每一个内网设备分配不同的公网 IP，但是依然能被外网设备发现。

NAT 穿透的方法：

STUN
TURN
ICE

4.1.1 STUN

STUN（Session Traversal Utilities for NAT，NAT会话穿越应用程序）。用于解决网络地址转换（NAT）的问题。当两个设备之间建立WebRTC连接时，如果它们之间存在NAT，就需要通过STUN服务器来获取自己的公网IP地址和端口号，以便让对方可以直接连接自己。STUN服务器只是用来获取公网IP地址和端口号的，不会作为数据的中转站点。

STUN服务器需要自行实现。免费的 STUN 服务，eg：stun:stun.l.google.com:19302。

STUN 无法穿越对称型NAT、防火墙。

4.1.2 TURN

TURN（Traversal Using Relay NAT，中继服务器）。用于解决无法通过P2P直接连接的情况。当两个设备之间无法直接建立WebRTC连接时，就需要通过TURN服务器作为中继站点，将数据从一个设备传输到另一个设备。TURN服务器可以在不同的网络之间进行数据中转，以便两个设备之间进行实时通信。

开源的TURN服务：coturn

4.1.3 ICE

ICE（Interactive Connectivity Establishment，交互式连接建立）ICE 是一种协商框架，ICE 会根据网络情况和设备能力等因素，自动选择 P2P 或中继传输，以确保 WebRTC 连接的稳定性和质量。

ICE 建立连接流程：ICE 会先尝试端到端直连，无法连通时，调用 STUN 服务进行 NAT 穿透获取公网 IP，如果连接失败则会使用 TURN 服务器来进行中继传输。

【学习地址】： FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发
【文章福利】：免费领取更多音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击 1079654574加群领取哦~

4.2 如何获取媒体类型、音视频编码？

调用 RTCPeerConnection.createOffer / RTCPeerConnection.createAnswer 获取到当前设备的 SDP。

SDP（Session Description Protocol） 是一个描述媒体协商信息的协议，包含：媒体类型、编解码格式、加密算法、传输协议等。当两个设备建立 WebRTC 连接时，需要协商和交换 SDP，以便它们能够理解对方的媒体参数和协议信息。

从技术上讲，SDP不是一个真正的协议，而是一种数据格式，用于描述设备之间对等连接的参数和配置信息。

结构体： SDP 由一行或多行 UTF-8 文本组成，每行以一个字符的类型开头，后跟等号（“ =”），然后是包含值或描述的结构化文本，其格式取决于类型。以给定字母开头的文本行通常称为“字母行”。例如，提供媒体描述的行的类型为“m”，称为“m 行”。

下图是 SDP 示例：

5、信令服务器

上边说了如何获取公网 IP、媒体类型、音视频编码等信息。那我们改如何将这些信息告知给对等连接双方呢？

我们可以通过信令来实现，在设备之间发送设备信息以确定通信协议、媒体编解码和数据传输方法以及任何所需的路由信息的过程就叫做信令（Signaling） 。

传输信令的服务器叫做信令服务器，信令服务器不对接受到的信息作特殊处理，只负责接收与发送数据。

5.1 信令服务器的作用

交换SDP
发送控制消息：用于设置、打开、关闭通信或处理异常情况。
媒体能力协商：通信双方可以支持哪些编解码器和媒体数据格式

在 SDP 交换之后，WebRTC 对等连接通信才真正开始。

5.2 搭建信令服务器

信令服务器不属于 WebRTC 规范，需要我们自己搭建。可以通过 WebSocket 或轮询 HTTP 请求实现。

6、webRTC 通信流程

调用 RTCPeerConnection 创建一个对等连接
调用 getUserMedia 打开摄像头&麦克风
调用 RTCPeerConnection.addTrack 将音视频轨道添加到对等连接媒体流轨道中（对等连接成功后将被传输到对等点）
调用 RTCPeerConnection.createOffer 创建 SDP offer 并调用 setLocalDescription 方法将 sdp 添加至本地描述
客户端 A 调用 ICE 服务获取公网 IP 并生成 ICE candidate (ICE 候选者)
客户端 A 通过信令服务器发送 offer 至客户端 B
客户端 B 调用 setRemoteDescription 方法，将接收到的 SDP offer 设置为远程描述，展示获取到的音视频流
客户端 B 调用 getUserMedia 打开摄像头&麦克风
客户端 B 调用 RTCPeerConnection.createAnswer 创建 SDP answer，并调用 setLocalDescription 方法将 sdp 添加至本地描述
客户端 B 通过信令服务器发送 SDP answer 至客户端 A
客户端 A 收到之后，调用 setRemoteDescription 方法，将接收到的 SDP answer 设置为远程描述，展示获取到的音视频流
至此连接建立完成