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 会自动监测连接状态,处理网络变化。

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

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

相关推荐
海边捡石子8 小时前
从零设计一个通用智能电话平台:FreeSWITCH + ESL + AI 实战架构
人工智能·架构·webrtc
音视频牛哥17 小时前
不换摄像机,也能接入 WebRTC?SmartMediaKit RTSP/RTMP 转 WHIP 技术实践
音视频·webrtc·smartmediakit·rtsp转whip·rtmp转whip·whip推流·rtsp转webrtc播放
直播技术开发交流3 天前
Android 端 WHIP 协议推流技术实践:相机/录屏/多路转发WHIP实现测试
webrtc·android whip·rtsp转whip·毫秒级实时媒体流·whip低延时推送·whip推送实现·rtsp转webrtc
程序员阿明4 天前
docker搭建视频流服务go2rtc,webRTC
docker·容器·webrtc
O。O蛋黄酥啊7 天前
实时语音 Agent 开发完全指南:从 ASR/TTS 到 WebRTC/VAD 的链路拆解
大模型·webrtc·语音识别·tts·asr
海水冷却9 天前
WebRTC 视频通话:从裸写信令到 30 分钟上线
音视频·webrtc
PiaoKe___9 天前
云手机底层架构与工程实践:从 KVM/容器到 WebRTC 串流
智能手机·架构·webrtc
znnnk9 天前
【网络优化】减少B站直播卡顿的上行占用:AdGuard nowebrtc规则 / WebRTC Control 实测
服务器·网络·webrtc·直播·bilibili·adguard
平行云PVT9 天前
国产信创实时云渲染解决方案:如何实现数字孪生与三维应用云化部署?
unity·webrtc·unreal engine·实时云渲染·国产信创·摩尔线程·砺算科技
福大大架构师每日一题11 天前
mediamtx v1.21.2发布:UDP、JWT、RTSP、RTMP、HLS、WebRTC全面修复,稳定性与安全性再提升
网络协议·udp·webrtc