WebRTC 通过 浏览器 间直接通信实现音视频和数据传输。首先检测浏览器支持，使用 getUserMedia 获取本地音视频流；接着创建 RTCPeerConnection 实例，生成 offer 和 answer 交换 SDP，并通过信令服务器传输 ICE 候选以建立连接；最后可利用 RTCDataChannel 发送任意数据。整个过程依赖媒体捕获、对等连接协商与外部信令交互完成实时通信。
WebRTC（Web Real-Time Communication）是 html 5 提供的一项强大功能，允许网页在 浏览器 之间直接进行实时音视频通话和数据传输，无需插件或第三方软件。要使用 WebRTC 实现浏览器间的实时通信，需掌握几个核心 API 和基本流程。
1. 检查浏览器支持情况
WebRTC 已被现代主流浏览器广泛支持，但在 编码 前仍建议检测当前环境是否支持相关 接口：
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {// 支持获取媒体流} else {console.log(" 当前浏览器不支持 getUserMedia"); }
2. 获取本地音视频流
通过 getUserMedia() API 可以请求访问用户的摄像头和麦克风：
const constraints = {video: true, audio: true}; navigator.mediaDevices.getUserMedia(constraints) .then(stream => {const localVideo = document.getElementById('localVideo'); localVideo.srcObject = stream; }) .catch(err => { console.error(" 无法获取媒体流：", err); });
3. 建立对等连接（RTCPeerConnection）
真正实现点对点通信的核心是 RTCPeerConnection 对象。它负责协商连接、传输音视频流和数据。
立即学习 “ 前端免费学习笔记（深入）”；
- 创建本地与远程 PeerConnection 实例
- 生成并交换会话描述协议（SDP）offer 和 answer
- 收集并传输 ICE 候选地址以建立网络路径
const pc1 = new RTCPeerConnection(); const pc2 = new RTCPeerConnection(); // 将本地流添加到连接 pc1.addStream(localStream); pc1.createOffer() .then(offer => pc1.setLocalDescription(offer)) .then(() => { // 等待 pc1 发送 offer 给 pc2（模拟信令）return pc2.setRemoteDescription(pc1.localDescription); }) .then(() => pc2.createAnswer()) .then(answer => pc2.setLocalDescription(answer)) .then(() => { // 将 answer 回传给 pc1 return pc1.setRemoteDescription(pc2.localDescription); }) .catch(err => console.error(" 连接失败：", err));
4. 使用信令服务器交换连接信息
WebRTC 本身不提供消息传输机制，必须借助外部“信令”来交换 SDP 和 ICE 候选。常用方案包括 websocket、Socket.IO 或 http 长轮询。
示例监听 ICE 候选：
pc1.onicecandidate = event => {if (event.candidate) {// 通过信令服务器转发此 candidate 给对方 socket.emit('iceCandidate', event.candidate); } };
接收方将候选添加到连接：
socket.on('iceCandidate', candidate => { pc2.addIceCandidate(new RTCIceCandidate(candidate)); });
5. 传输任意数据（RTCDataChannel）
除了音视频，WebRTC 还支持通过 RTCDataChannel 在客户端之间发送文本、文件等数据：
const dataChannel = pc1.createDataChannel("chat"); dataChannel.onopen = () => { dataChannel.send(" 你好，已建立数据通道！"); }; pc2.ondatachannel = event => {const receiveChannel = event.channel; receiveChannel.onmessage = e => { console.log(" 收到消息：", e.data); }; };
基本上就这些。搭建一个完整 WebRTC 应用需要结合 前端 媒体处理、RTCPeerConnection 连接管理和 后端 信令服务。虽然流程稍复杂，但一旦理解了 offer-answer 模型和 ICE 机制，开发实时通信功能就会变得清晰可行。
