WebRTC如何改变实时通信？

你是否想过，视频通话时你的画面是如何从手机实时传到对方屏幕的？在WebRTC出现之前，实现浏览器间的实时音视频通信需要复杂的插件或第三方软件。而现在，WebRTC（网页实时通信） 作为W3C标准，让浏览器原生支持点对点（P2P）通信，延迟可低至300ms以内，无需任何插件。

从视频会议到在线教育，从远程医疗到游戏直播，WebRTC已成为实时交互的技术基石。本文将拆解实现“浏览器到浏览器”通信的3个核心API，带你零基础入门这项改变互联网通信的关键技术。

WebRTC浏览器通信示意图

一、getUserMedia：让浏览器“看见”你的世界

作用：访问摄像头/麦克风，获取音视频流

场景：视频通话、直播、人脸识别

如何调用摄像头？

只需几行代码，浏览器就能请求用户授权并捕获实时媒体流：

// javascript
// 请求摄像头和麦克风权限
navigator.mediaDevices.getUserMedia({
video: { width: 1280, height: 720 }, // 720p视频
audio: { echoCancellation: true } // 启用回声消除
})
.then(stream => {
// 将流显示在页面视频元素中
document.getElementById('local-video').srcObject = stream;
})
.catch(error => {
console.error('无法访问设备:', error); // 用户拒绝授权时触发
});

实际应用：爱奇艺明星陪看直播

爱奇艺利用WebRTC实现明星与观众的实时互动，通过getUserMedia捕获明星视频流，结合HTTP-FLV协议推流给观众，兼顾低延迟与高并发。（技术细节）

二、RTCPeerConnection：搭建浏览器间的“数据高速公路”

作用：建立P2P连接，传输音视频和数据

场景：一对一视频通话、多人会议

连接建立的“三步舞”

1. 创建对等连接：配置STUN/TURN服务器（解决NAT穿透）

// javascript
const pc = new RTCPeerConnection({
iceServers: [
{ urls: 'stun:stun.l.google.com:19302' }, // 谷歌公共STUN服务器
{ urls: 'turn:your-turn-server.com', username: 'user', credential: 'pass' }
]
});

2. 交换SDP协议：描述媒体能力（编解码器、分辨率等）

// javascript
// 发起方创建Offer
pc.createOffer()
.then(offer => pc.setLocalDescription(offer))
.then(() => {
// 通过信令服务器发送offer给对方
});
// 接收方响应Answer
pc.setRemoteDescription(remoteOffer)
.then(() => pc.createAnswer())
.then(answer => pc.setLocalDescription(answer))
.then(() => {
// 发送answer给发起方
});

3. ICE候选者交换：寻找最佳网络路径

// javascript
// 收集本地ICE候选者并发送
pc.onicecandidate = event => {
if (event.candidate) {
signalingServer.send({ type: 'candidate', candidate: event.candidate });
}
};
// 添加远程ICE候选者
pc.addIceCandidate(new RTCIceCandidate(remoteCandidate));

RTCPeerConnection连接流程图

企业级应用：腾讯云TRTC抗丢包技术

腾讯云基于WebRTC开发的TRTC服务，通过优化ICE候选算法，实现80%网络丢包下的流畅通话，广泛应用于在线教育和远程办公。（技术白皮书）

三、RTCDataChannel：不止音视频，还能传文件！

作用：在P2P连接上传输任意数据（文本/二进制）

场景：实时聊天、文件共享、游戏数据同步

5行代码实现实时聊天

// javascript
// 创建数据通道
const dc = pc.createDataChannel('chat');
// 发送消息
dc.onopen = () => dc.send('Hello, WebRTC!');
// 接收消息
dc.onmessage = event => {
console.log('收到:', event.data); // 显示在聊天界面
};

创新案例：Substack的实时互动直播

Substack利用RTCDataChannel实现主播与观众的实时文字互动，消息延迟低于100ms，提升直播参与感。（案例来源）

总结：WebRTC的未来与挑战

WebRTC已成为实时通信的标准，但仍面临跨浏览器兼容性和复杂网络环境的挑战。2025年最新版本中，WebRTC引入AI降噪算法和SVC可伸缩编码，进一步优化弱网表现。

如果你想动手实践，可以从搭建简易视频聊天应用开始：

1. 用Node.js+Socket.io搭建信令服务器

2. 集成本文的三个核心API

3. 部署STUN/TURN服务器（推荐使用Coturn）

延伸阅读：

o W3C WebRTC标准

o MDN WebRTC教程

o WebRTC 2025技术趋势

（注：本文图片来源已标注，案例均来自企业公开技术博客）