JavaScript WebRTC实时通信应用-js教程-PHP中文网

JavaScript WebRTC实时通信应用

紅蓮之龍

发布： 2025-10-28 12:34:02

原创

400人浏览过

WebRTC实现浏览器间实时音视频通话与数据传输，需通过getUserMedia获取媒体流，创建RTCPeerConnection建立连接，借助WebSocket等信令服务交换SDP和ICE候选，完成NAT穿透，并可通过RTCDataChannel传输任意数据。

javascript webrtc实时通信应用

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免费学习笔记（深入）”；

信令服务的作用与实现

WebRTC 本身不提供信令机制，需借助外部服务（如 WebSocket）传递连接信息。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

当一方生成了本地 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 实现信令服务，便于调试和部署。

以上就是JavaScript WebRTC实时通信应用的详细内容，更多请关注php中文网其它相关文章！