实现WebRTC点对点通信需先建立信令机制交换SDP和ICE候选者，再通过RTCPeerConnection建立连接，使用RTCDataChannel传输数据或addTrack传输音视频流。
要实现一个基于WebRTC的纯JavaScript点对点通信应用，核心是利用WebRTC的P2P能力在浏览器之间直接传输音视频或数据，无需经过服务器中转。虽然信令过程需要服务器协助交换连接信息，但实际媒体流或数据是点对点传输的。以下是关键步骤和实现思路。
1. 理解WebRTC基本组件
WebRTC依赖三个主要接口：
- RTCPeerConnection：用于建立点对点连接，传输音视频或数据流。
- RTCDataChannel：可在RTCPeerConnection上创建数据通道，用于发送文本、文件等任意数据。
- getUserMedia：获取本地摄像头和麦克风权限，用于音视频通话。
注意：WebRTC本身不负责信令（如谁要连接谁），你需要用WebSocket、HTTP或其他方式自行实现信令交换。
2. 建立信令机制
两个浏览器要建立连接，必须交换以下信息：
立即学习“Java免费学习笔记（深入）”；
- SDP（会话描述协议）：描述各自的媒体能力（如支持的编解码器、分辨率等）。
- ICE候选者：网络路径信息，帮助穿透NAT和防火墙。
你可以使用Node.js + Socket.IO或原生WebSocket搭建简单信令服务器。例如：
// 信令服务器（Node.js + WebSocket 示例）
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
ws.on('message', message => {
// 将消息转发给其他客户端
wss.clients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
前端通过WebSocket发送和接收offer、answer和ice candidates。
3. 创建RTCPeerConnection并交换信令
假设A发起连接，B接受：
- A调用
createOffer()生成offer，设置本地描述，并通过信令发送给B。 - B收到offer后，调用
setRemoteDescription()，再调用createAnswer()生成answer，返回给A。 - 双方通过
onicecandidate事件收集ICE候选者并发送给对方。
示例代码片段：
const pc = new RTCPeerConnection({
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});
// 创建数据通道（可选）
const dataChannel = pc.createDataChannel('chat');
dataChannel.onmessage = e => console.log('收到消息:', e.data);
// 收到远程ICE候选者
pc.onicecandidate = e => {
if (e.candidate) {
socket.send(JSON.stringify({ candidate: e.candidate }));
}
};
// 接收offer或answer
socket.onmessage = e => {
const message = JSON.parse(e.data);
if (message.sdp) {
pc.setRemoteDescription(new RTCSessionDescription(message.sdp))
.then(() => {
if (message.sdp.type === 'offer') {
pc.createAnswer().then(desc => {
pc.setLocalDescription(desc);
socket.send(JSON.stringify({ sdp: desc }));
});
}
});
} else if (message.candidate) {
pc.addIceCandidate(new RTCIceCandidate(message.candidate));
}
};
4. 传输数据或音视频
如果只是传数据，使用RTCDataChannel即可。如果是音视频：
- 调用
navigator.mediaDevices.getUserMedia()获取本地媒体流。 - 将流中的track添加到RTCPeerConnection：
pc.addTrack(stream.getTracks()[0], stream)。 - 在对方的
ontrack事件中获取远程流并绑定到<video>标签。
示例：
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
localVideo.srcObject = stream;
stream.getTracks().forEach(track => pc.addTrack(track, stream));
});
pc.ontrack = e => {
remoteVideo.srcObject = e.streams[0];
};
基本上就这些。WebRTC的P2P通信看似复杂，但只要理清信令流程和连接生命周期，用纯JavaScript也能快速搭建出功能完整的点对点应用。关键是确保SDP和ICE候选者能正确交换，且STUN服务器可用。开发时建议先做文本聊天功能，再扩展音视频。
