WebRTC通过getUserMedia获取音视频流，RTCPeerConnection建立P2P连接，RTCDataChannel传输数据，借助信令服务器交换SDP和ICE候选实现浏览器间实时通信。
WebRTC（Web Real-Time Communication）是HTML5提供的一个强大API，允许浏览器之间进行实时音视频通信，无需插件或第三方软件。它广泛应用于视频通话、在线会议、远程协助等场景。下面介绍其基本原理和实现视频通话的代码示例。
WebRTC 实现视频通话的基本原理
WebRTC 的核心在于让两个浏览器直接建立P2P连接传输音视频数据，主要依赖以下三个关键接口：
- getUserMedia：获取本地摄像头和麦克风的音视频流。
- RTCPeerConnection：建立并管理两个客户端之间的点对点连接，用于传输音视频数据。
- RTCDataChannel：可选，用于传输任意数据（如文本、文件）。
由于浏览器无法直接发现彼此，需要借助信令服务器（Signaling Server）来交换连接信息（如会话描述和网络候选）。信令机制本身不由WebRTC定义，通常使用WebSocket、Socket.IO等实现。
实现步骤与代码示例
以下是一个简化版的双人视频通话实现流程，包含前端HTML/JavaScript和简单的信令逻辑。
立即学习“前端免费学习笔记（深入）”；
1. 获取本地媒体流使用 getUserMedia 请求访问摄像头和麦克风：
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
document.getElementById('localVideo').srcObject = stream;
localStream = stream;
})
.catch(err => console.error('无法获取媒体流：', err));
2. 创建 RTCPeerConnection 并添加流
初始化连接对象，并将本地流添加进去：
const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
let peerConnection = new RTCPeerConnection(configuration);
// 添加本地流中的轨道
localStream.getTracks().forEach(track => {
peerConnection.addTrack(track, localStream);
});
3. 设置事件监听，处理ICE候选
ICE候选是网络路径信息，需通过信令服务器发送给对方：
peerConnection.onicecandidate = event => {
if (event.candidate) {
signalingServer.send({
type: 'candidate',
candidate: event.candidate
});
}
};
4. 处理远程流（对方视频）
当连接接收到远程音视频流时，绑定到视频元素：
peerConnection.ontrack = event => {
document.getElementById('remoteVideo').srcObject = event.streams[0];
};
5. 信令交互：交换SDP会话描述
创建并发送本地offer：
async function createOffer() {
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
signalingServer.send({ type: 'offer', sdp: offer });
}
接收并处理远端offer，返回answer：
signalingServer.onmessage = async (message) => {
if (message.type === 'offer') {
await peerConnection.setRemoteDescription(new RTCSessionDescription(message.sdp));
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
signalingServer.send({ type: 'answer', sdp: answer });
} else if (message.type === 'answer') {
await peerConnection.setRemoteDescription(new RTCSessionDescription(message.sdp));
} else if (message.type === 'candidate') {
peerConnection.addIceCandidate(new RTCIceCandidate(message.candidate));
}
};
搭建信令服务器（Node.js + WebSocket 示例）
使用WebSocket中转连接信息：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
ws.on('message', data => {
const message = JSON.parse(data);
// 转发消息给其他客户端
wss.clients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(data);
}
});
});
});
注意事项与优化建议
- 确保使用HTTPS或localhost环境，因为现代浏览器要求安全上下文才能启用摄像头。
- 加入STUN/TURN服务器以应对NAT和防火墙问题，提高连接成功率。
- 实际项目中应支持多人通话、错误处理、重连机制和带宽自适应。
- 移动端需考虑权限请求时机和设备兼容性。
基本上就这些。WebRTC虽然强大，但核心难点在于信令协调和网络环境适配。掌握基础流程后，可借助SimplePeer、PeerJS等库简化开发。
