WebRTC(二):工作机制

核心组成

  • 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 会实时监控网络状态,自动调整连接路径。
  • 支持动态带宽调节、码率控制和丢包恢复机制,确保流畅通信。

总结

pgsql 复制代码
+-----------------------+                           +-----------------------+
|       浏览器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 会自动监测连接状态,处理网络变化。

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

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

相关推荐
福大大架构师每日一题1 天前
mediamtx v1.21.0 发布:Media-over-QUIC、RTSP、HLS、WebRTC 与安全能力全面升级
安全·webrtc
脏脏a3 天前
Neko 自托管实战:WebRTC 远程浏览器、多用户权限与公网访问
webrtc
cuijiecheng20183 天前
从 6.49 秒到约 1.9 秒:RK3588上的WebRTC 实时流启动速度优化记录
webrtc
SendTomo5 天前
SendTomo 与 send.wang 全景对比评测与实战指南
网络·网络协议·tcp/ip·webrtc·p2p
java_logo5 天前
Docker 部署 SRS:轻松搭建实时音视频流媒体平台
docker·容器·webrtc·实时音视频·rtmp·http-flv·轩辕镜像
wjcroom5 天前
一个可以在线多人玩的五子棋开发与布署方法-WebRTC和WebSocket的测试方法
websocket·网络协议·webrtc
cuijiecheng20189 天前
RK3588 WebRTC 实时流卡顿优化:从视频桥接到 H.264 PTS 回退
音视频·webrtc·h.264
SendTomo11 天前
send.wang:基于浏览器WebRTC实现无客户端文件互传
网络·python·网络协议·webrtc·p2p
应用市场17 天前
无线控制与图传协议全景:从 S.BUS 到 WebRTC,一篇讲透遥控、数传与视频链路
音视频·webrtc
福大大架构师每日一题17 天前
webrtc-rs/webrtc v0.20.3更新:Android 网络切换后 ICE Restart 卡死约 10 秒的问题终于解决
android·网络·webrtc