WebRTC核心API：浏览器搞定实时音视频

可视化演示

展示getUserMedia媒体流获取、RTCPeerConnection的P2P连接与SDP交换、ICE/STUN/TURN NAT穿透协商及MediaStream+AI实时推理管线。

整体架构

阿蓝和阿红想开一场视频见面会，首先要弄清楚家里需要准备什么。阿蓝不需要自己发明电话线，只需要三样东西：一个能把摄像头和话筒“接进窗边”的水龙头（getUserMedia），一条能跨越两栋楼的专线（RTCPeerConnection），以及一位在楼与楼之间传话的信使（信令）。

WebRTC 就是浏览器内建的这套“实时通信工具箱”。它不需要安装插件，也不依赖某个大公司的中心服务器做媒体转发，而是尽量让两个浏览器直接建立点对点连接。整体上，WebRTC 的 API 分工很清晰：getUserMedia 负责媒体采集，RTCPeerConnection 负责连接与传输，信令则没有指定具体协议，通常用 WebSocket 传递。

实时通信的每一毫秒都有价值，整个环节可以看成一个接力赛：

理解了这五段接力，再看 WebRTC 的两个核心 API 就会很清楚：getUserMedia 负责第一段，RTCPeerConnection 负责中间三段。阿蓝的“窗户、纸条、专线”故事，就这么串起来了。

媒体采集：getUserMedia

阿蓝要开始聊天，第一步不是打电话，而是先确认自己的摄像头和麦克风能工作。getUserMedia 就是这样一把“窗户钥匙”，它让浏览器打开设备，并把设备吐出的数据包装成一个叫 MediaStream 的“水流”。

调用它会触发浏览器的权限询问，只有在 HTTPS 或 localhost 页面下才能使用。拿到 MediaStream 后，你可以把它交给 <video> 元素做本地预览，也可以把里面的轨道交给 RTCPeerConnection。它不是一个 mp4 文件，而是一股不断更新的实时流，就像水龙头里持续流出的水，而不是一个装满水的水桶。

原始媒体流的体积非常大，这也是为什么 WebRTC 必须立刻进行编码压缩：

所以 1280×720 的未压缩一帧约 276 万字节。不压缩直接传，网络很快就会堵住；这就是为什么后续的编解码、码率控制如此重要。

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

采集约束

阿蓝开好窗户后，还可以调整摄像头的角度、分辨率和声音细节。getUserMedia 允许你传入一组“约束条件”，相当于告诉设备：我想要多清晰的画面、用前置还是后置摄像头、要多高的帧率。

ideal 表示“尽量满足但不强制”，浏览器会选一个最接近的值；还有 exact 表示“必须满足”，不满足就报错。facingMode: 'user' 表示前置摄像头，'environment' 表示后置摄像头。拿到轨道后，还能用 track.enabled = false 实现“静音/关画”，用 track.stop() 彻底关闭设备。

约束条件决定的是采集源头，直接影响后续码率：

实际开发中，你不应该直接让用户设置 4K 超高清，而要结合网络带宽动态调整分辨率。阿蓝的窗户再大，如果连接走廊太窄，还是需要主动把“水量”调小。

const stream = await navigator.mediaDevices.getUserMedia({  video: {    width: { ideal: 1280 },    height: { ideal: 720 },    frameRate: { ideal: 30 },    facingMode: 'user'  },  audio: { echoCancellation: true }});

信令交换

阿蓝知道自己的窗户长什么样，阿红也知道自己的，但彼此还不知道对方的存在。这时需要一位信使：把阿蓝的“我会说哪些编解码器、我的 IP 和端口是什么”写在纸条上，传给阿红；阿红看完后写一张回条。

这张纸条在 WebRTC 里叫 SDP（Session Description Protocol），这条消息交换过程称为信令。信令服务器通常只是转发纸条，不负责传输真正的音视频。WebRTC 没有规定信令必须用哪种技术，常见选择是 WebSocket、Socket.IO 甚至 HTTP 轮询。关键是必须有一个“双方都能找到的确信中转点”。

整个交换遵循 Offer/Answer 模型：

阿蓝把纸条交给信使，阿红收到后写下 Answer，双方都拿到对方的 SDP，才算完成“约见”的第一步。没有信令，后面的一切都无从谈起。

P2P连接：RTCPeerConnection

纸条交换完成后，阿蓝需要找一个“总接口”来实际搭建跨楼专线，这个总接口就是 RTCPeerConnection。

创建连接后，先要调用 createOffer() 生成 Offer，再调用 setLocalDescription() 把本地描述设置好；把 Offer 通过信令发给对端后，对端调用 setRemoteDescription() 写入，并返回 Answer。双方都完成描述交换后，RTCPeerConnection 会收到对方发来的媒体流，触发 ontrack 事件。

RTCPeerConnection 不是一个瞬间完成的对象，而是一个有生命周期的状态机：

真实项目中，要监听 connectionState 的变化，在 failed 时重新创建连接或提示用户。阿蓝不会觉得“管道公司来了就等于走廊建好了”，她要看管道工人最终是否交货。

const pc = new RTCPeerConnection({  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]});stream.getTracks().forEach(track => pc.addTrack(track, stream));

ICE协商：穿透 NAT 的路由

阿蓝和阿红都住在小区里，对外只有一个小区门卫。阿蓝写在纸条上的地址可能是内网地址，阿红直接访问这个地址是找不到人的。ICE 就是那套“找到一条真正能走通的路”的机制。

ICE 会收集三类候选地址：host 是本机网卡地址；srflx 是向 STUN 服务器询问后得到的“公网反射地址”；relay 是 TURN 服务器提供的中继地址。收集完成后，两端通过信令交换候选，然后两两配对做连通性检查，挑一条延迟最低的路径。

如果双方都在对称型 NAT 后面，STUN 反射地址也常常无法互通，这时只能走 TURN 中继。ICE 候选配对数量可以这样估算：

实际开发中，通常使用“trickle ICE”边发现边发送候选，而不是等全部收集完再交换。阿蓝和阿红一边试试这个门，一边试试那个窗，最终找到一条双方都能走通的走廊。

媒体收发：轨道、编解码与统计

走廊建好后，真正的工作才刚刚开始：画面和声音要持续在这条专线上流动。RTCPeerConnection 里的媒体以轨道（track）为单位，addTrack() 加入本地轨道，ontrack 收到远端轨道。

如果想要临时关闭视频但不断开连接，可以把 track.enabled 设为 false；如果想把摄像头从前置换成后置，可以用 replaceTrack()。同一套连接里还可以打开 RTCDataChannel，用来传文本、文件或 AI 分析结果，相当于在走廊里加了一条独立的“数据小管道”。

WebRTC 默认使用 VP8、VP9、H.264 等视频编码器和 Opus 音频编码器，并会根据网络情况自动调整码率：

AI 应用还可以调用 pc.getStats() 拿到实时丢包、帧率、码率等指标，用来做网络质量监控或自动降清晰度。阿蓝的走廊已经建成，剩下的事情就是让水、电、数据在走廊里稳定地流动，并随时监控每段路况。

AI 应用场景

Python 演示

# 信令交换模拟器: 演示 WebRTC 建立连接前 A/B 交换 SDP 和 ICE 候选class Message:    def __init__(self, sender, receiver, payload):        self.sender = sender        self.receiver = receiver        self.payload = payload class SignalingChannel:    def __init__(self):        self.messages = []    def send(self, sender, receiver, payload):        self.messages.append(Message(sender, receiver, payload))    def relay_all(self):        for msg in self.messages:            print("{0} -> {1}: {2}".format(msg.sender, msg.receiver, msg.payload)) class PeerSim:    def __init__(self, name):        self.name = name        self.local_sdp = ""        self.remote_sdp = ""        self.candidates = []        self.remote_candidates = []     def create_offer(self):        self.local_sdp = self.name + " offer(video=vp8,audio=opus)"        return self.local_sdp     def create_answer(self, remote_sdp):        self.remote_sdp = remote_sdp        self.local_sdp = self.name + " answer(video=vp8,audio=opus)"        return self.local_sdp     def set_remote_description(self, remote_sdp):        self.remote_sdp = remote_sdp     def add_candidate(self, candidate):        self.candidates.append(candidate)     def receive_candidate(self, candidate):        self.remote_candidates.append(candidate)     def connected(self):        return bool(self.local_sdp and self.remote_sdp and                    self.candidates and self.remote_candidates) def main():    channel = SignalingChannel()    alice = PeerSim("alice")    bob = PeerSim("bob")     offer = alice.create_offer()    channel.send(alice.name, bob.name, "SDP:" + offer)    bob.set_remote_description(offer)     answer = bob.create_answer(offer)    channel.send(bob.name, alice.name, "SDP:" + answer)    alice.set_remote_description(answer)     alice.add_candidate("host:192.168.1.10")    bob.add_candidate("srflx:203.0.113.5:3478")    channel.send(alice.name, bob.name, "candidate:" + alice.candidates[-1])    channel.send(bob.name, alice.name, "candidate:" + bob.candidates[-1])    alice.receive_candidate(bob.candidates[-1])    bob.receive_candidate(alice.candidates[-1])     channel.relay_all()    print("P2P-ready:", alice.connected(), bob.connected()) if __name__ == "__main__":    main()

1. class SignalingChannel:模拟“信使”的中转站，所有消息都先经过它。
2. channel.send(alice.name, bob.name, "SDP:" + offer)把阿蓝生成的 Offer 纸条发给阿红。
3. bob.set_remote_description(offer)阿红写入阿蓝的 SDP，知道自己该用什么参数回应。
4. answer = bob.create_answer(offer)阿红生成 Answer 纸条。
5. alice.set_remote_description(answer)阿蓝收到 Answer 后，双方 SDP 协商完成。
6. alice.add_candidate("host:192.168.1.10")阿蓝添加一条本地 ICE 候选地址。
7. alice.receive_candidate(bob.candidates[-1])阿蓝收到阿红的候选地址，等待连通性检查。
8. print("P2P-ready:", alice.connected(), bob.connected())双方都具备 SDP 和候选时，模拟连接可以进入就绪状态。

常见误区

面试题