答案：通过WebRTC实现浏览器间实时通信需三步：先用getUserMedia获取本地音视频流并预览；再创建RTCPeerConnection实例，添加流并配置STUN服务器；最后通过信令服务器交换SDP和ICE候选，完成连接后即可传输媒体流。
要在浏览器中通过WebRTC实现点对点的实时通信，核心在于建立两个浏览器之间的直接连接，无需经过服务器传输音视频流。整个过程依赖信令交换、网络协商和媒体流传输三个关键步骤。
1. 获取本地媒体流
首先需要获取用户的摄像头和麦克风权限，生成本地媒体流。
navigator.mediaDevices.getUserMedia() 方法用于请求访问音频和视频设备。示例代码：
const localStream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true
});
document.getElementById('localVideo').srcObject = localStream;
获取到的媒体流可以绑定到页面的 video 元素进行预览。
2. 创建RTCPeerConnection并添加流
RTCPeerConnection 是 WebRTC 的核心类，负责处理点对点连接。
创建实例后，需将本地媒体流添加进去：
const peerConnection = new RTCPeerConnection({
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});
localStream.getTracks().forEach(track => {
peerConnection.addTrack(track, localStream);
});
STUN 服务器帮助获取公网 IP 和端口（NAT 穿透），若在复杂网络环境下可考虑加入 TURN 服务器作为中继备份。
3. 信令机制交换会话描述
WebRTC 不提供内置信令传输方式，需自行实现客户端之间的消息传递（如使用 WebSocket）。
通信流程如下：
- 发起方调用 createOffer() 生成本地 offer 描述
- 设置本地描述：setLocalDescription(offer)
- 将 offer 发送给对方（通过 WebSocket 或其他通道）
- 接收方收到 offer 后，调用 setRemoteDescription() 设置远端描述
- 接收方生成 answer：createAnswer() 并设置为本地描述
- 将 answer 发回给发起方
这样双方就完成了 SDP（会话描述协议）的交换。
4. ICE 候选地址交换
在连接过程中，浏览器会收集可用的网络路径（IP+端口），称为 ICE 候选。
通过监听 onicecandidate 事件获取候选，并发送给对方：
peerConnection.onicecandidate = event => {
if (event.candidate) {
// 将 candidate 发送给对方
socket.emit('ice-candidate', event.candidate);
}
};
对方收到后调用 addIceCandidate() 添加到连接中：
peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
当所有候选完成交换，且 NAT 穿透成功，点对点连接即建立。
连接建立后，远程媒体流会通过 ontrack 事件传入：
peerConnection.ontrack = event => {
document.getElementById('remoteVideo').srcObject = event.streams[0];
};
基本上就这些。只要信令通路正确、网络环境支持，WebRTC 能在几秒内建立起低延迟的音视频通话。关键是理解 SDP 协商与 ICE 候选交换的配合逻辑，不复杂但容易忽略细节。
