h5实现视频通话
WebRTC 基础实现
H5 视频通话主要通过 WebRTC（Web Real-Time Communication）技术实现。现代浏览器原生支持该 API，无需插件即可完成点对点音视频传输。
安装基础依赖（若使用库简化开发）：
npm install peerjs simple-peer建立本地视频流：
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
document.getElementById('localVideo').srcObject = stream;
});信令服务器搭建
使用 Socket.io 建立信令服务器交换 SDP 和 ICE 候选：
// 服务器端
const io = require('socket.io')(3000);
io.on('connection', socket => {
socket.on('offer', data => socket.broadcast.emit('offer', data));
socket.on('answer', data => socket.broadcast.emit('answer', data));
});客户端处理信令：
const socket = io('http://localhost:3000');
socket.on('offer', data => {
// 处理远端offer
});完整连接流程
初始化 Peer 连接：
const peer = new SimplePeer({
initiator: location.hash === '#initiator',
stream: localStream
});
peer.on('signal', data => {
socket.emit('signal', data); // 转发信令
});
socket.on('signal', data => {
peer.signal(data); // 接收远程信令
});处理媒体流：
peer.on('stream', remoteStream => {
document.getElementById('remoteVideo').srcObject = remoteStream;
});优化与兼容性
添加 STUN/TURN 服务器配置：
const pcConfig = {
iceServers: [
{ urls: 'stun:stun.l.google.com:19302' },
{ urls: 'turn:your.turn.server', credential: 'pass' }
]
};处理移动端适配：
video {
width: 100%;
max-height: 50vh;
object-fit: cover;
}错误处理机制：
peer.on('error', err => console.error('Peer error:', err));
navigator.mediaDevices.getUserMedia({...})
.catch(err => alert('无法访问摄像头/麦克风'));部署注意事项
- HTTPS 环境要求：WebRTC 仅在安全上下文中工作
- 防火墙穿透：需配置合适的 ICE 服务器
- 带宽自适应：可添加
bandwidth限制参数 - 回退方案：考虑使用第三方 SDK 作为备选方案
完整实现需结合具体业务场景调整信令协议和错误处理逻辑。现代浏览器对 WebRTC 的支持度已达 90%以上，但企业级应用建议使用专业音视频云服务（如 Agora、Twilio 等）保障稳定性。
