当前位置：首页 > news >正文

WebRTC 实时通信：构建音视频通话应用

news 2026/5/24 21:10:22

WebRTC 实时通信：构建音视频通话应用

什么是 WebRTC？

WebRTC（Web Real-Time Communication）是一个支持浏览器之间实时通信的 API。

WebRTC 的组成

API	功能
MediaStream	访问摄像头和麦克风
RTCPeerConnection	建立点对点连接
RTCDataChannel	数据通道

获取媒体流

async function getMediaStream() { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); return stream; } catch (error) { console.error('获取媒体流失败:', error); } }

显示视频流

<video id="localVideo" autoplay playsinline></video>

const video = document.getElementById('localVideo'); const stream = await getMediaStream(); video.srcObject = stream;

建立点对点连接

const peerConnection = new RTCPeerConnection({ iceServers: [ { urls: 'stun:stun.l.google.com:19302' } ] }); // 添加本地流 stream.getTracks().forEach(track => { peerConnection.addTrack(track, stream); }); // 创建 Offer const offer = await peerConnection.createOffer(); await peerConnection.setLocalDescription(offer); // 发送 Offer 到信令服务器 sendToServer({ type: 'offer', data: offer });

信令服务器

// 简易信令服务器 const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', (ws) => { ws.on('message', (data) => { wss.clients.forEach((client) => { if (client !== ws && client.readyState === WebSocket.OPEN) { client.send(data); } }); }); });

处理远程流

peerConnection.ontrack = (event) => { const remoteVideo = document.getElementById('remoteVideo'); remoteVideo.srcObject = event.streams[0]; }; // 接收 Answer peerConnection.setRemoteDescription(answer);

数据通道

const dataChannel = peerConnection.createDataChannel('chat'); dataChannel.onopen = () => { dataChannel.send('Hello from WebRTC!'); }; dataChannel.onmessage = (event) => { console.log('收到消息:', event.data); };

STUN 和 TURN 服务器

const configuration = { iceServers: [ { urls: 'stun:stun.l.google.com:19302' }, { urls: 'turn:turn.example.com:3478', username: 'user', credential: 'password' } ] };

错误处理

peerConnection.oniceconnectionstatechange = () => { if (peerConnection.iceConnectionState === 'failed') { console.error('连接失败，尝试重新连接'); } }; peerConnection.onicegatheringstatechange = () => { if (peerConnection.iceGatheringState === 'complete') { console.log('ICE 候选收集完成'); } };

实战案例

视频通话应用

class VideoCall { constructor() { this.peerConnection = null; this.localStream = null; } async start() { this.localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); this.setupPeerConnection(); this.connectToSignaling(); } setupPeerConnection() { this.peerConnection = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] }); this.localStream.getTracks().forEach(track => { this.peerConnection.addTrack(track, this.localStream); }); } }