WebRTC 实时通信

P2P 视频传输 · SDP 信令交换 · ICE 穿透 · 实时统计

发送端 (Local)

📹

Canvas 视频源

未连接

接收端 (Remote)

📺

RTCPeerConnection

P2P 实时通信

同页面内创建两个 RTCPeerConnection，Canvas 粒子动画通过 captureStream 采集后经 WebRTC 传输到远端播放。无需信令服务器。

技术栈

RTCPeerConnectionSDP 交换ICE CandidatecaptureStreamSRTP (UDP)getStats()

信令流程

1

createOffer()

发送端创建 SDP Offer

2

setLocalDescription

发送端设置本地描述

3

交换 SDP

通过信令服务器传递 Offer

4

createAnswer()

接收端创建 SDP Answer

5

ICE Candidate 交换

双端交换网络候选地址

6

连接建立 ✅

P2P 通道就绪，开始传输

WebRTC vs MSE

指标	WebRTC	MSE
延迟	< 500ms	2~10s
协议	UDP (SRTP)	TCP (HTTP)
方向	双向	单向
复杂度	高	低

应用场景

• AI 数字人实时对话
• 视频通话 / 会议
• 互动直播 / 连麦
• 屏幕共享
• 云游戏串流