企业官网建设流程全解析

WebRTC 视频通话原理揭秘：从双标签页 Demo 读懂 RTCPeerConnection 与信令握手

【免费下载链接】samplesWebRTC Web demos and samples项目地址: https://gitcode.com/gh_mirrors/sa/samples

📡 想搞懂WebRTC 视频通话是怎么实现的吗？本教程带你深入 sa/samples（官方 WebRTC 示例仓库），用最经典的双标签页 Demo拆解RTCPeerConnection的完整生命周期：从 getUserMedia 采集摄像头画面、createOffer/createAnswer 信令握手，到 ICE 候选交换与媒体收发，一篇看懂WebRTC 信令握手全过程。

🚀 3 分钟跑通 WebRTC 视频通话 Demo

WebRTC Samples 是官方维护的WebRTC 示例集合，覆盖了实时音视频、数据通道、媒体管道等几乎所有场景。本地启动只需两步：

git clone https://link.gitcode.com/i/64dc8bebca76815c895d7e6bab25c90d cd samples && npm install && npm start

启动后在浏览器打开首页，进入Peer connection分类即可看到本文主角 pc1 示例。它的特点是无需任何服务器：一个页面里同时创建两个RTCPeerConnection对象（pc1 和 pc2），模拟真实场景中的"两个人"，让通话流程在浏览器控制台里完整走一遍。

🔍 Demo 全流程拆解：Start → Call → Hang Up

打开 pc1/js/main.js，整个通话被拆成 3 个按钮驱动的阶段，这也是学习RTCPeerConnection API的最佳地图：

1️⃣ Start：getUserMedia 采集本地音视频

点击 Start 后，示例调用navigator.mediaDevices.getUserMedia({audio: true, video: true})请求摄像头和麦克风权限，拿到localStream并绑定到本地<video>标签。注意代码里对loadedmetadata和resize事件的监听——main.js 用首次 resize 回调来标记"远端视频真正开始播放"的时刻，这是测量通话建立耗时的经典技巧。

2️⃣ Call：创建两个 PeerConnection 并走完整信令

这是 Demo 最精华的部分。在 call() 函数 中，页面同时创建 pc1（主叫）和 pc2（被叫），并注册三类关键事件：

随后流程自动推进（见 onCreateOfferSuccess）：

pc1.createOffer() → setLocalDescription → pc2.setRemoteDescription → pc2.createAnswer() → 回传 → 交换 ICE 候选

这个"Offer/Answer 回合"就是 WebRTC 的信令握手核心。真实应用中，SDP 需要通过 WebSocket 或 HTTP 信令服务器在两端传递；而 Demo 直接把两端放在同一页面里，省掉了网络信令，让你聚焦于 API 本身。

3️⃣ Hang Up：关闭连接

hangup() 调用pc1.close()和pc2.close()释放所有资源。好习惯：通话结束务必关闭 PeerConnection，否则会持续占用媒体轨道。

🌐 真实场景：双标签页 + 信令服务器

pc1 的"同页面模拟"只是教学形态。想看真正的双标签页通话，请看 channel 示例：页面提示你在同一浏览器的两个标签页各点一次 Start，借助localStorage作为信令通道交换 SDP，即可发起一次跨标签页的实时通话。这个设计非常巧妙——它证明了 WebRTC 信令不限于 WebSocket，任何能传递 SDP 文本的通道（甚至本地存储）都可行。

想深入理解握手细节，仓库里还有这些进阶 Demo 值得逐个点开：

• trickle-ice：可视化 ICE 候选的逐项传输过程，可配置 STUN/TURN 服务器
• negotiate-timing：对比"先握手后媒体"与"媒体先行"两种协商时序
• munge-sdp：手动修改 SDP 字符串，理解 Offer 里每一条字段的含义
• perfect-negotiation：业界公认的冲突协商模式，解决双向同时发起 Offer 的死锁问题

💡 新手避坑指南

1. 必须用 HTTPS 或 localhost：getUserMedia 在非安全上下文下会直接被浏览器拒绝。
2. 先 Start 再 Call：Demo 里 Call 按钮默认禁用，因为addTrack前必须先有本地媒体流。
3. 打开控制台：pc1 页面 提示所有关键对象（localStream、pc1、pc2）都挂在全局作用域，可直接在 DevTools 里查看 ICE 状态和 SDP 内容，这是学习WebRTC 调试的第一入口。
4. 跨浏览器测试：同浏览器双标签页通常走主机直连；若要体验 NAT 穿透，可参考 restart-ice 和 states 观察连接状态机。

🎯 小结

通过这个WebRTC 视频通话 Demo，你用 100 多行代码看清楚了实时通话的完整链路：媒体采集（getUserMedia）→ 会话描述交换（createOffer/setRemoteDescription）→ ICE 打洞（addIceCandidate）→ 双向媒体流（track 事件）。掌握了 pc1 的骨架，再去攻克 trickle-ice、perfect-negotiation 这些进阶样本，就等于拿到了WebRTC 开发的入场券。💪

📚 更多场景：content 目录 下还包含数据通道（datachannel/filetransfer）、设备选择（getusermedia）、可插入流处理（insertable-streams）等几十个可直接运行的示例。

【免费下载链接】samplesWebRTC Web demos and samples项目地址: https://gitcode.com/gh_mirrors/sa/samples