WebRTC通过浏览器间直连实现低延迟音视频通信，核心组件包括MediaStream、RTCPeerConnection和RTCDataChannel；连接需经SDP协商与ICE候选交换，依赖STUN/TURN服务器穿透网络，信令由开发者自定义；应用中需注意网络兼容性、安全性及性能优化，结合Adapter.js可提升跨浏览器一致性。
WebRTC（Web Real-Time Communication）是一项支持浏览器之间直接进行音频、视频和数据传输的开放技术。它无需插件或第三方软件，就能实现低延迟的实时通信，广泛应用于视频会议、在线教育、远程客服等场景。
WebRTC的核心组件
WebRTC之所以能实现端到端的实时通信，依赖于几个关键API和协议：
- MediaStream（getUserMedia）：用于获取用户的摄像头和麦克风数据，是音视频采集的基础。
- RTCPeerConnection：负责建立和维护两个终端之间的加密音视频连接，自动处理NAT穿透和防火墙穿越（通过STUN/TURN服务器）。
- RTCDataChannel：允许在客户端之间直接传输任意数据，比如文本消息、文件等，类似WebSocket但更轻量且点对点。
连接建立流程
两个浏览器要通过WebRTC通信，必须完成协商过程，主要步骤如下：
- 调用
getUserMedia获取本地媒体流。 - 创建
RTCPeerConnection实例，并将本地流添加进去。 - 生成本地SDP（会话描述协议）并通过信令服务器发送给对方。
- 接收对方的SDP，设置为远程描述。
- 通过STUN服务器获取公网IP和端口，交换ICE候选地址，完成网络连通性检测。
- 连接建立后，音视频流自动传输，也可通过DataChannel发送自定义数据。
注意：WebRTC本身不提供信令机制，需要开发者使用WebSocket、Socket.IO等方式自行实现信令交互。
实际应用中的关键问题
虽然WebRTC功能强大，但在真实环境中需要注意以下几点：
- 网络兼容性：在复杂网络环境下（如企业内网），可能无法直连，需部署TURN中继服务器来转发数据。
- 安全性：所有传输默认加密（SRTP + DTLS），但信令通道也应使用WSS等安全协议防止劫持。
- 浏览器兼容性：主流浏览器均支持WebRTC，但API细节略有差异，建议使用Adapter.js等适配库统一处理。
- 性能优化：可根据带宽动态调整分辨率或帧率，使用 simulcast 或 SVC 提升多端观看体验。
简单示例代码片段
以下是获取摄像头并播放的基本代码：
const video = document.getElementById('localVideo');
async function startCamera() {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
video.srcObject = stream;
}
startCamera();
结合RTCPeerConnection即可与远端连接，具体逻辑需配合信令服务完成SDP交换。
基本上就这些。WebRTC让实时通信变得原生化、高效化，掌握其原理和常见模式，能快速构建出稳定可靠的音视频应用。
