免费自助设计网站官方手表网站

核心组成

• GetUserMedia：获取本地音视频设备（摄像头、麦克风）数据流。
• RTCPeerConnection：实现点对点的媒体流传输和网络连接管理。
• RTCDataChannel：点对点的任意数据通道（除音视频外传输数据）。

运行流程

信令协商（建立连接前的协商阶段）

WebRTC 本身不规定信令方式，通常通过 WebSocket、HTTP、SIP、XMPP 等信令服务器完成：

• 双方交换网络信息（IP、端口等），叫做 ICE Candidate。
• 双方交换媒体协商信息，叫做 SDP（Session Description Protocol），包括音视频编码格式、分辨率、码率等。

信令通道是 WebRTC 连接建立的必要前提，但它本身不包含在 WebRTC 标准内。

NAT穿越和网络连接建立

• WebRTC 使用 ICE（Interactive Connectivity Establishment） 协议。
• ICE 会收集所有可能的网络候选地址（本地 IP、STUN 服务器分配的公网 IP、中继服务器 TURN 分配的地址）。
• 双方互相尝试连接这些地址，最终确定一条可用的点对点路径。

媒体流捕获和编码

• 通过 getUserMedia 获取本地摄像头和麦克风流。
• 媒体数据经浏览器内置编码器压缩，支持 VP8/VP9/H.264（视频），Opus/G.711（音频）等编码格式。

点对点媒体流传输

• 利用 RTCPeerConnection，双方建立点对点的连接。
• 媒体流（音频、视频）和数据流通过这个连接实时双向传输。
• 支持加密传输（DTLS-SRTP），确保通信安全。

RTCPeerConnection调用过程：

调用时序图：

数据通道通信

• RTCDataChannel 允许点对点传输任意数据，如文字聊天、文件传输、游戏数据等。
• 基于 SCTP 协议，支持可靠和不可靠数据传输。

连接维护和状态更新

• WebRTC 会实时监控网络状态，自动调整连接路径。
• 支持动态带宽调节、码率控制和丢包恢复机制，确保流畅通信。

总结

+-----------------------+                           +-----------------------+
|       浏览器A          |                           |       浏览器B          |
+-----------------------+                           +-----------------------+|                                                       || 1. 获取本地媒体流 (getUserMedia)                        ||------------------------------------------------------>||                                                       ||<------------------------------------------------------||                                                       || 2. 创建 RTCPeerConnection 对象                         ||                                                       || 3. 创建 Offer SDP（Session Description）               ||------------------------------------------------------>||                                                       ||                                                       | 4. 接收 Offer SDP|                                                       | 5. 创建 RTCPeerConnection|                                                       | 6. 创建 Answer SDP|                                                       |------------------------------------------------------>||                                                       || 7. 接收 Answer SDP                                     ||<------------------------------------------------------||                                                       || 8. 双方开始交换 ICE Candidates（网络候选）             ||<-------------------------> (通过信令服务器传递)        ||                                                       || 9. ICE 协议测试所有候选路径，选出最佳连接路径           ||                                                       || 10. 建立 DTLS-SRTP 加密的点对点连接                     ||                                                       || 11. 双方通过 RTCPeerConnection 发送音视频流             ||<--------------------------->                            ||                                                       || 12. RTCDataChannel 传输任意数据（如文本、文件等）       ||<--------------------------->                            ||                                                       || 13. 连接维护与状态更新（动态调节码率、重连等）           ||                                                       |

1. 获取本地媒体流

   • 通过调用 navigator.mediaDevices.getUserMedia() 获取摄像头和麦克风的音视频流。

   • 用户浏览器弹出授权提示，用户允许后返回本地流。

2. 创建 RTCPeerConnection 对象

   • 新建一个连接对象，负责管理媒体流和数据通道。

3. 创建 Offer SDP

   • 发送方创建会话描述（SDP），告知自己支持的音视频格式、网络信息等。

4. 信令交换

   • 发送方将 Offer SDP 发送给接收方。

   • 接收方收到后，创建自己的 RTCPeerConnection。

   • 接收方创建 Answer SDP 并返回发送方。

   • 双方确认彼此能力和参数。

5. ICE Candidate 交换

   • 双方通过信令服务器互相发送所有可用的网络候选地址（IP + 端口）。

   • 这些地址包括本地网络地址、STUN 获取的公网地址、TURN 中继地址。

6. ICE 连接检测

   • 双方尝试所有候选路径，逐个测试连接性。

   • 选择最佳路径（最快、最稳定的点对点连接）。

7. 建立安全连接

   • 通过 DTLS（Datagram Transport Layer Security）加密握手，建立加密的传输通道。

   • 媒体通过 SRTP（Secure Real-time Transport Protocol）安全传输。

8. 媒体流传输

   • 双方开始点对点实时传输视频和音频流。

   • 支持视频、音频的编码解码和同步。

9. 数据通道传输

   • 通过 RTCDataChannel 发送非音视频数据，如文本消息、文件数据、游戏状态等。

10. 连接维护和状态更新

    • WebRTC 会自动监测连接状态，处理网络变化。

    • 实时调整码率，保证音视频质量。

    • 出现连接问题时，自动尝试重新建立连接。