WebRTC实现浏览器间实时音视频通话与数据传输，需通过getUserMedia获取媒体流，创建RTCPeerConnection建立连接，借助WebSocket等信令服务交换SDP和ICE候选，完成NAT穿透，并可通过RTCDataChannel传输任意数据。
WebRTC（Web Real-Time Communication）是一种支持浏览器之间直接音视频通话和数据传输的技术，无需插件或第三方应用。使用 JavaScript 开发 WebRTC 应用，可以实现实时通信功能，比如视频会议、语音聊天、文件传输等。
建立 WebRTC 连接的基本流程
要实现两个浏览器之间的实时通信，需要完成以下关键步骤：
- 获取媒体流：通过 getUserMedia 获取用户的摄像头和麦克风权限，生成本地音视频流。
- 创建 RTCPeerConnection：这是 WebRTC 的核心对象，用于管理点对点连接。
- 交换信令（Signaling）：通过服务器（如 WebSocket）交换 SDP 会话描述和 ICE 候选地址。
- 处理 ICE 候选：收集网络路径信息并发送给对方，帮助建立直连。
- 连接成功后传输数据：可传输音视频流或通过 RTCDataChannel 发送任意数据。
获取用户媒体流
在开始通信前，先请求访问用户的摄像头和麦克风：
const constraints = { video: true, audio: true };navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
localVideo.srcObject = stream;
peerConnection.addStream(stream); // 添加到连接中（旧方法，推荐使用 addTrack）
})
.catch(error => console.error('无法获取媒体流:', error));
注意：现代浏览器推荐使用 addTrack() 方法逐个添加轨道，以更好控制流。
立即学习“Java免费学习笔记（深入）”；
华友协同办公自动化OA系统
下载
华友协同办公管理系统(华友OA)，基于微软最新的.net 2.0平台和SQL Server数据库，集成强大的Ajax技术，采用多层分布式架构，实现统一办公平台，功能强大、价格便宜，是适用于企事业单位的通用型网络协同办公系统。 系统秉承协同办公的思想，集成即时通讯、日记管理、通知管理、邮件管理、新闻、考勤管理、短信管理、个人文件柜、日程安排、工作计划、工作日清、通讯录、公文流转、论坛、在线调查、
信令服务的作用与实现
WebRTC 本身不提供信令机制，需借助外部服务（如 WebSocket）传递连接信息。
- 当一方生成了本地 offer（SDP），通过信令服务器发送给对方。
- 接收方设置远程描述，并创建 answer 返回。
- ICE 候选通过 onicecandidate 事件收集并转发。
示例代码片段：
peerConnection.onicecandidate = event => {if (event.candidate) {
socket.send(JSON.stringify({ type: 'candidate', candidate: event.candidate }));
}
};
socket.onmessage = event => {
const message = JSON.parse(event.data);
if (message.type === 'offer') {
peerConnection.setRemoteDescription(new RTCSessionDescription(message))
.then(() => peerConnection.createAnswer())
.then(answer => peerConnection.setLocalDescription(answer))
.then(() => socket.send(JSON.stringify({ type: 'answer', sdp: answer })));
}
// 处理 answer 和 candidate 类似
};
使用 RTCDataChannel 传输任意数据
除了音视频，WebRTC 支持通过 RTCDataChannel 实现高速 P2P 数据传输，适合聊天消息、文件共享等场景。
// 创建数据通道const dataChannel = peerConnection.createDataChannel("chat");
dataChannel.onopen = () => dataChannel.send("Hello over WebRTC!");
// 接收方监听
peerConnection.ondatachannel = event => {
const receiveChannel = event.channel;
receiveChannel.onmessage = e => console.log("收到:", e.data);
};
基本上就这些。搭建一个基础的 WebRTC 应用需要理解媒体获取、连接建立和信令交互三个核心部分。虽然 NAT 穿透和跨网络环境会带来挑战，但大多数情况下 STUN/TURN 服务器能有效解决。开发时建议结合 Node.js + Socket.IO 实现信令服务，便于调试和部署。
