WebRTC通过MediaDevices、RTCPeerConnection和RTCDataChannel实现浏览器间音视频通话与数据传输。首先调用getUserMedia获取本地媒体流并显示，然后创建RTCPeerConnection实例配置STUN/TURN服务器，添加媒体流并生成offer进行信令交换，对方回应answer完成连接协商，最终通过ICE建立P2P通信链路；同时可创建DataChannel传输文本或文件等任意数据，实现低延迟实时交互。
WebRTC（Web Real-Time Communication）是一项让浏览器之间直接进行音视频通话和数据传输的技术，无需插件或第三方应用。在JavaScript中使用WebRTC，可以快速搭建实时通信功能，比如视频会议、语音聊天或文件共享。
1. WebRTC的核心组件
要理解WebRTC的基础，需要掌握它的三个关键API：
- MediaDevices.getUserMedia()：用于获取用户的摄像头和麦克风权限，获取音视频流。
- RTCPeerConnection：负责建立两个浏览器之间的安全连接，并传输音视频或数据。
- RTCDataChannel：允许在连接的两端传输任意数据，如文本、文件等，类似于WebSocket但点对点。
这些组件共同构成了WebRTC的通信能力。
2. 获取本地媒体流
开始前，先让浏览器访问用户的摄像头和麦克风：
立即学习“Java免费学习笔记（深入）”；
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
// 将视频流显示在页面上
document.getElementById('localVideo').srcObject = stream;
})
.catch(err => {
console.error("无法获取媒体设备:", err);
});
这段代码请求音视频权限，并将获取到的流绑定到video标签上播放。注意必须在HTTPS环境下运行，否则浏览器会阻止访问媒体设备。
3. 建立RTCPeerConnection连接
真正实现通信的是RTCPeerConnection。它需要交换“信令”信息——即双方的连接配置，包括IP、端口、编解码方式等。虽然WebRTC本身不规定信令传输方式，但通常用WebSocket或Socket.IO来传递。
以下是一个简单的连接示例：
const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
const pc = new RTCPeerConnection(configuration);
// 添加本地流
pc.addStream(localStream);
// 监听远程流的到来
pc.ontrack = event => {
document.getElementById('remoteVideo').srcObject = event.streams[0];
};
// 创建并发送offer
pc.createOffer()
.then(offer => pc.setLocalDescription(offer))
.then(() => {
// 发送offer给对方（通过信令服务器）
signaling.send(pc.localDescription);
});
对方收到offer后，需设置远端描述，创建answer并返回：
pc.setRemoteDescription(offer) .then(() => pc.createAnswer()) .then(answer => pc.setLocalDescription(answer)) .then(() => signaling.send(pc.localDescription));
当双方都设置了彼此的描述后，ICE框架会尝试建立P2P连接。
4. 处理NAT和防火墙：STUN与TURN
由于大多数设备位于路由器后（私有IP），直接连接困难。WebRTC依赖STUN服务器获取公网地址，若仍无法连接，则使用TURN服务器中继数据。
- STUN（Session Traversal Utilities for NAT）：帮助发现公网IP和端口。
- TURN（Traversal Using Relays around NAT）：当P2P不通时，作为中转服务器转发数据。
开发阶段可用Google的免费STUN服务器：stun:stun.l.google.com:19302。生产环境建议部署自己的STUN/TURN服务（如Coturn）。
5. 使用RTCDataChannel传输数据
除了音视频，你还可以用RTCDataChannel发送任意数据：
const channel = pc.createDataChannel("chat");
channel.onmessage = event => {
console.log("收到消息:", event.data);
};
// 发送消息
channel.send("Hello P2P!");
对方需监听ondatachannel事件接收通道：
pc.ondatachannel = event => {
const receiveChannel = event.channel;
receiveChannel.onmessage = e => {
console.log("接收到:", e.data);
};
};
基本上就这些。WebRTC看似复杂，但拆解为获取媒体、建立连接、交换信令、传输数据几个步骤后，逻辑就很清晰了。实际项目中还需处理网络变化、错误重连、兼容性等问题，但入门的关键是动手实践一个简单视频通话。
