以下是 WebRTC 的基本概念和知识点的详细整理，帮助快速了解和掌握 WebRTC 的核心技术和应用。

1. 什么是 WebRTC

定义：
WebRTC（Web Real-Time Communication）是一个开源技术框架，支持浏览器和移动设备之间实现点对点的实时音视频通信和数据传输，而无需借助中间服务器。
核心功能：
1. 音视频捕获：获取摄像头和麦克风数据。
2. 编解码：支持高效的音视频编码解码（VP8、VP9、H.264、Opus 等）。
3. 网络传输：点对点数据传输，支持 NAT 穿越。
4. 数据通道：传输非音视频数据（如文本、文件）。
特点：
- 跨平台：支持主流浏览器（Chrome、Firefox、Safari 等）和移动平台（Android、iOS）。
- 高性能：基于 UDP，使用 SRTP 保障传输安全。
- 开源：由 Google 推广和维护，已成为 W3C 标准。

2. WebRTC 的核心概念

2.1 WebRTC 的基本架构

WebRTC 的架构主要包括以下组件：

MediaStream（媒体流）：
- 提供音视频的捕获和管理。
- 通过 getUserMedia() 接口获取摄像头和麦克风数据。
RTCPeerConnection（点对点连接）：
- 用于建立浏览器之间的 P2P 连接。
- 支持音视频流和数据的发送和接收。
RTCDataChannel（数据通道）：
- 点对点传输任意非媒体数据（如文本、文件）。
ICE（Interactive Connectivity Establishment）：
- 协助穿越 NAT，建立端到端连接。
- 包括 STUN（Session Traversal Utilities for NAT）和 TURN（Traversal Using Relays around NAT）。

2.2 信令（Signaling）

定义：
信令是指用于交换必要的元信息（如 SDP、候选地址等）的过程，以便建立 P2P 连接。
信令的作用：
1. 交换会话描述协议（SDP），协商编解码器和媒体配置。
2. 共享 ICE 候选地址，帮助穿越 NAT。
信令实现方式：
WebRTC 本身不定义信令协议，常见的信令实现方式包括：
- WebSocket
- HTTP/HTTPS
- MQTT

2.3 核心协议

SRTP（Secure Real-Time Transport Protocol）：
- 用于加密和验证音视频数据的传输。
DTLS（Datagram Transport Layer Security）：
- 用于安全交换密钥，保护数据通道和媒体通道。
ICE（Interactive Connectivity Establishment）：
- 用于发现和选择最佳路径来建立点对点连接。
SDP（Session Description Protocol）：
- 用于描述多媒体会话信息的文本协议，包含编解码器、媒体类型和网络参数。

3. WebRTC 的工作流程

WebRTC 的完整工作流程包括以下步骤：

3.1 媒体捕获

调用 getUserMedia() 捕获摄像头、麦克风或屏幕内容：

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then((stream) => {
    // 获取媒体流并附加到 HTML 视频标签
    document.querySelector("video").srcObject = stream;
  })
  .catch((error) => {
    console.error("Error accessing media devices:", error);
  });

3.2 信令交换

使用信令服务器交换 SDP 和 ICE 候选信息。

3.3 创建 RTCPeerConnection

创建点对点连接对象：

1	const peerConnection = new RTCPeerConnection();

3.4 添加媒体流到连接

将媒体流添加到连接中：

1
2
3

stream.getTracks().forEach((track) => {
  peerConnection.addTrack(track, stream);
});

3.5 创建和交换 SDP

创建本地 SDP 并通过信令服务器发送：

peerConnection.createOffer()
  .then((offer) => {
    return peerConnection.setLocalDescription(offer);
  })
  .then(() => {
    // 将 SDP 通过信令发送到对端
    sendToSignalingServer(peerConnection.localDescription);
  });

3.6 ICE 候选处理

监听 ICE 候选事件，并通过信令服务器发送：

peerConnection.onicecandidate = (event) => {
  if (event.candidate) {
    sendToSignalingServer(event.candidate);
  }
};

4. WebRTC 的核心 API

**getUserMedia()**：
- 用于捕获本地媒体流（摄像头、麦克风、屏幕）。
- 返回一个 MediaStream 对象。
**RTCPeerConnection**：
- 用于建立 P2P 连接并传输音视频数据。
- 常用方法：
  - addTrack()：向连接中添加媒体轨道。
  - createOffer()：创建 SDP offer。
  - createAnswer()：创建 SDP answer。
  - setLocalDescription()：设置本地 SDP。
  - setRemoteDescription()：设置远端 SDP。

**RTCDataChannel**：

用于点对点传输任意数据。

创建方式：

1 2	const dataChannel = peerConnection.createDataChannel("channelName"); dataChannel.onmessage = (event) => console.log(event.data);

5. WebRTC 的音视频技术

5.1 编解码器

视频编解码器：
- VP8、VP9（默认支持）。
- H.264（硬件加速）。
- AV1（实验性支持）。
音频编解码器：
- Opus（宽带音频）。
- G.711（兼容性强，但质量低）。

5.2 回音消除与降噪

WebRTC 内置支持回音消除、降噪和自动增益控制。

在 getUserMedia() 中启用：

navigator.mediaDevices.getUserMedia({
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    autoGainControl: true,
  },
});

6. WebRTC 的典型应用场景

实时视频会议：
- 多人视频通话（结合 SFU 架构）。
屏幕共享：
- 使用 getDisplayMedia() 捕获屏幕。
实时数据传输：
- 通过 RTCDataChannel 传输文件、消息。
实时流媒体：
- 推流到 CDN 或实时观看流媒体。

7. WebRTC 的部署架构

7.1 P2P 架构

点对点连接，适用于两人通信。
优点：低延迟。
缺点：需要有效的 NAT 穿越，难以支持大规模用户。

7.2 SFU（Selective Forwarding Unit）

中心服务器只转发媒体流，不进行解码。
优点：支持多人通信，带宽占用低。
缺点：增加了服务器复杂性。

7.3 MCU（Multipoint Control Unit）

中心服务器负责媒体流的解码、混合和转发。
优点：支持设备性能较低的用户。
缺点：服务器成本高，延迟较高。

8. 学习资源

8.1 官方文档

WebRTC 官网：https://webrtc.org/

8.2 推荐教程

MDN WebRTC 入门：https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
《深入浅出 WebRTC》

8.3 开源项目

SimplePeer：简化的 WebRTC 库。
PeerJS：易用的 WebRTC 框架。

通过以上内容，你可以从 WebRTC 的基础概念入手，逐步掌握其核心技术和应用场景，最终能够开发功能完善的实时音视频和数据通信系统。

说码解字

WebRTC 速览