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 的连接流程和信令交互逻辑，就能构建出功能完整的实时通信应用。虽然涉及异步操作较多，但结构清晰后并不复杂。