WebRTC通过RTCPeerConnection、RTCDataChannel和getUserMedia实现浏览器间音视频通话与数据传输，需借助信令服务器交换SDP和ICE信息，完成点对点连接后即可传输媒体流或文本文件。
WebRTC（Web Real-Time Communication）是一项支持浏览器之间进行实时音视频和数据通信的技术，无需插件或第三方应用。使用 JavaScript 开发 WebRTC 应用，可以实现点对点的音视频通话、屏幕共享、文件传输等功能。
1. WebRTC 核心组件介绍
开发 WebRTC 应用前，需要了解其三大核心接口：
- RTCPeerConnection：用于建立点对点连接并传输音视频流。
- RTCDataChannel：允许在客户端之间传输任意数据，如文本、文件等。
- MediaDevices.getUserMedia()：获取本地摄像头和麦克风的媒体流。
这些 API 都是浏览器原生支持的，只需通过 JavaScript 调用即可。
2. 建立基本音视频通话流程
实现两个用户之间的视频通话，主要分为以下几个步骤：
立即学习“Java免费学习笔记（深入）”；
- 调用 getUserMedia() 获取本地音视频流，并显示在页面上。
- 创建 RTCPeerConnection 实例，配置 ICE 服务器（如 STUN/TURN）。
- 通过信令服务器交换 SDP 描述信息（offer 和 answer）。
- 交换 ICE 候选地址，完成网络协商。
- 将远程流绑定到 video 元素进行播放。
示例代码片段：
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
// 获取本地媒体流
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
localVideo.srcObject = stream;
peerConnection.addStream(stream); // 添加到连接中
});
// 创建 PeerConnection
const peerConnection = new RTCPeerConnection({
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});
// 监听 ICE 候选事件
peerConnection.onicecandidate = event => {
if (event.candidate) {
// 通过信令服务器发送 candidate 到对方
signalingSocket.send(JSON.stringify({ candidate: event.candidate }));
}
};
// 接收远程流
peerConnection.onaddstream = event => {
remoteVideo.srcObject = event.stream;
};
3. 信令机制与服务器协作
WebRTC 本身不提供信令传输方式，需借助外部服务（如 WebSocket）传递连接信息。
- 客户端 A 创建 offer，通过 WebSocket 发送给客户端 B。
- 客户端 B 接收到 offer 后设置为远程描述，并创建 answer 返回。
- 双方交换 ICE 候选地址，补充网络路径信息。
信令服务器只是“传话”，不参与实际媒体传输，保证了通信的高效性和隐私性。
4. 数据通道（RTCDataChannel）使用
除了音视频，WebRTC 还支持任意数据传输。例如聊天消息或小文件：
// 创建数据通道
const dataChannel = peerConnection.createDataChannel('chat');
dataChannel.onopen = () => {
dataChannel.send('Hello, 你好！');
};
// 接收数据
dataChannel.onmessage = event => {
console.log('收到消息:', event.data);
};
注意：数据通道同样依赖 ICE 协商完成才能通信。
基本上就这些关键点。掌握 WebRTC 的连接流程和信令交互逻辑，就能构建出功能完整的实时通信应用。虽然涉及异步操作较多，但结构清晰后并不复杂。
