WebRTC通过getUserMedia获取音视频流，RTCPeerConnection建立P2P连接，RTCDataChannel传输数据，结合信令服务器交换SDP与ICE信息，实现浏览器间实时通信。
WebRTC（Web Real-Time Communication）是一种支持浏览器之间直接进行音视频通信的开放标准，无需插件或第三方软件。它让实时通信变得简单高效，广泛应用于视频会议、在线教育、远程医疗等场景。
WebRTC的核心组件
WebRTC依赖几个关键API来实现音视频处理和实时传输：
- getUserMedia：用于获取本地摄像头和麦克风的音视频流。
- RTCPeerConnection：负责在两个客户端之间建立安全的P2P连接，传输音视频数据。
- RTCDataChannel：可传输任意数据，如文本、文件等，适用于低延迟通信。
通过这些接口，开发者可以直接在JavaScript中捕获媒体、编码压缩、传输并渲染远端画面。
获取本地音视频流
使用navigator.mediaDevices.getUserMedia()可以请求用户授权访问摄像头和麦克风：
立即学习“Java免费学习笔记（深入）”；
async function getMedia() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
document.getElementById('localVideo').srcObject = stream;
} catch (err) {
console.error("无法获取媒体设备:", err);
}
}
获取到的MediaStream可直接绑定到<video></video>元素播放。注意需在HTTPS环境下运行，否则浏览器会阻止权限请求。
建立点对点连接
两个用户要通信，需通过RTCPeerConnection协商连接：
- 创建
RTCPeerConnection实例，并添加本地流。 - 生成并交换SDP（会话描述协议），包括offer和answer。
- 收集并交换ICE候选地址，帮助穿透NAT和防火墙。
由于浏览器无法直接互联，通常需要一个信令服务器（如WebSocket）来传递SDP和ICE信息。
处理音视频优化与兼容性
实际应用中还需考虑以下问题：
- 设置合适的编解码参数，如分辨率、帧率、带宽限制，以适应不同网络环境。
- 监听
onicecandidate事件获取ICE候选，确保连接成功。 - 处理静音、摄像头关闭、设备切换等用户操作。
- 兼容不同浏览器的前缀差异，如Safari对某些API的支持较晚。
可借助adapter.js这样的polyfill库简化跨浏览器适配。
基本上就这些。WebRTC让JavaScript具备了强大的实时音视频处理能力，虽然初期配置稍复杂，但一旦掌握核心流程，就能快速构建出稳定高效的通信功能。
