01
WebRTC初探
WebRTC是什么 · 为什么需要 · 三大核心API · 典型应用场景
getUserMediaRTCPeerConnectionDataChannel
02
搭建信令服务器
信令作用 · WebSocket基础 · Node.js简易信令 · 消息格式设计
WebSocketNode.js信令
03
获取本地音视频流
getUserMedia详解 · 约束参数 · 浏览器兼容 · 显示本地流
分辨率帧率码率
04
媒体流控制
开关麦克风/摄像头 · 切换前后摄 · 屏幕共享 getDisplayMedia
屏幕共享设备切换
05
RTCPeerConnection基础
创建连接 · STUN/TURN · ICE框架 · 添加本地流
ICESTUNTURN
06
SDP交换过程
SDP定义 · Offer/Answer · 本地/远端描述 · 协商流程
setLocalDescriptionsetRemoteDescription
07
ICE连接建立
Candidate收集 · 优先级 · 连接状态 · 建立成功回调
iceConnectionStateCandidate
08
点对点视频通话实战
信令+P2P流程 · 通话建立与挂断 · 完整实战
P2P视频通话
09
RTCDataChannel数据传输
创建DataChannel · 文本/二进制 · 可靠/有序模式
BlobArrayBuffer
10
DataChannel实战
P2P聊天室 · 文件传输 · 流控与背压处理
聊天室文件传输
11
媒体流统计与监控
getStats API · 收发统计 · 丢包/延迟/抖动 · 监控面板
丢包率延迟抖动
12
音视频编解码器
VP8/VP9/H264/Opus · 协商过程 · 首选编解码器 · 性能对比
VP8H264Opus
13
Simulcast与SVC
多流原理 · 可伸缩编码 · 启用Simulcast · 接收端选择
SimulcastSVC
14
带宽估计与自适应
GCC/REMB/Transport-CC · 码率自适应 · 拥塞控制
GCCREMB拥塞控制
15
音频处理
回声消除AEC · 噪声抑制NS · 自动增益AGC · 音频约束
AECNSAGC
16
视频处理
亮度/对比度 · 美颜滤镜 · 虚拟背景 · 视频轨道约束
CanvasMediaPipe美颜
17
多人视频会议架构
Mesh/SFU/MCU · 架构对比 · 选型建议
MeshSFUMCU
18
SFU服务器搭建 (mediasoup)
mediasoup简介 · 安装配置 · Router/Transport · Producer/Consumer
mediasoupSFU
19
SFU客户端集成
连接mediasoup · 发布本地流 · 订阅远端流 · 房间管理
ProducerConsumer
20
录制与回放
MediaRecorder · webm/mp4 · 上传存储 · 回放录制
MediaRecorder录制
21
WebRTC与AI结合
TensorFlow.js · 人脸/手势识别 · AI滤镜
TensorFlow.js人脸检测
22
WebRTC安全
DTLS-SRTP · 证书指纹 · WSS · 安全攻击防范
DTLSSRTPWSS
23
移动端WebRTC
Android/iOS集成 · 适配优化 · Native与Web互通
AndroidiOSNative
24
WebRTC与WebSocket协同
信令与媒体分离 · 心跳机制 · 重连策略 · 状态同步
心跳重连
25
WebRTC性能优化
降低延迟 · 减少丢包 · 硬件加速 · 内存/CPU优化
延迟优化硬件加速
26
WebRTC调试工具
chrome://webrtc-internals · Wireshark抓包 · 日志分析
WiresharkRTPRTCP
27
WebRTC与直播结合
推流RTMP · 拉取HLS · 低延迟直播 WHIP/WHEP
RTMPHLSWHIP
28
WebRTC与IoT
物联网应用 · 摄像头直连 · 低功耗适配 · 边缘计算
IoT边缘计算
29
WebRTC测试
单元测试Jest · E2E Puppeteer · 媒体质量 · 压力测试
JestPuppeteer
30
WebRTC项目实战
需求分析 · 架构设计 · 前后端实现 · 部署运维 · 总结展望
全栈部署实战