WebRTC通过RTCPeerConnection、RTCDataChannel和getUserMedia实现浏览器间音视频通话与数据传输，需借助信令服务器交换SDP和ICE候选，结合STUN/TURN穿透NAT和防火墙，支持低延迟通信且需运行在https或localhost环境。
WebRTC（Web Real-Time Communication）是一种支持浏览器之间直接进行音视频通话和数据传输的技术，无需插件或第三方应用。javaScript 结合 WebRTC 可以实现高效的实时通信功能，比如视频会议、语音聊天、文件共享等。
1. WebRTC 核心组件
要实现 WebRTC 通信，主要依赖以下三个核心接口：
- RTCPeerConnection：用于建立点对点连接，传输音视频流或数据。
- RTCDataChannel：允许在客户端之间传输任意数据，如文本、文件等。
- MediaDevices.getUserMedia：获取本地摄像头和麦克风的媒体流。
这些 API 都是浏览器原生支持的，只需使用 javascript 调用即可。
2. 建立基本的音视频连接
实现两个浏览器之间的视频通话，基本流程如下：
立即学习“Java免费学习笔记（深入）”；
步骤一：获取本地媒体流
navigator.mediaDevices.getUserMedia({ video: true, audio: true }) .then(stream => { document.getElementById('localVideo').srcObject = stream; localStream = stream; }) .catch(err => console.error('无法获取媒体设备:', err));
步骤二：创建 RTCPeerConnection 并添加流
const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] }; const peerConnection = new RTCPeerConnection(configuration); // 添加本地流 localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
步骤三：交换信令（SDP）
通过信令服务器（如 websocket）交换会话描述（offer/answer）和 ICE 候选地址。
// 创建并发送 offer peerConnection.createOffer() .then(offer => peerConnection.setLocalDescription(offer)) .then(() => { // 发送到对方 via signaling server signalingSocket.send(jsON.stringify({ type: 'offer', sdp: peerConnection.localDescription })); }); // 接收 answer signalingSocket.onmessage = (event) => { const message = json.parse(event.data); if (message.type === 'answer') { peerConnection.setRemoteDescription(new RTCsessionDescription(message.sdp)); } };
步骤四：处理 ICE 候选
peerConnection.onicecandidate = event => { if (event.candidate) { signalingSocket.send(JSON.stringify({ type: 'ice-candidate', candidate: event.candidate })); } }; // 对方接收并添加 signalingSocket.onmessage = (event) => { const message = JSON.parse(event.data); if (message.type === 'ice-candidate') { peerConnection.addIceCandidate(new RTCIceCandidate(message.candidate)); } };
步骤五：显示远程视频
peerConnection.ontrack = event => { document.getElementById('remoteVideo').srcObject = event.streams[0]; };
3. 使用 RTCDataChannel 传输数据
除了音视频，你还可以通过 RTCDataChannel 实现低延迟的数据通信，比如文字消息或文件传输。
// 创建数据通道 const dataChannel = peerConnection.createDataChannel('chat'); dataChannel.onopen = () => dataChannel.send('Hello over WebRTC!'); // 接收数据 dataChannel.onmessage = event => console.log('收到:', event.data); // 对方监听 peerConnection.ondatachannel = event => { const receiveChannel = event.channel; receiveChannel.onmessage = event => console.log('数据:', event.data); };
4. 注意事项与常见问题
虽然 WebRTC 功能强大，但在实际使用中需要注意以下几点：
- 必须运行在 HTTPS 或 localhost 环境下，否则
getUserMedia会被浏览器阻止。 - 需要信令服务器来协调连接建立，WebRTC 本身不提供信令机制。
- 防火墙或 NAT 可能影响连接，建议使用 STUN/TURN 服务器辅助穿透。
- 不同浏览器的兼容性需测试，尤其是 older 版本。
基本上就这些。掌握 WebRTC 的关键在于理解连接流程和信令交互。一旦建立好 PeerConnection，通信就变得非常高效和实时。