h5实现实时视频通话
WebRTC 基础实现
确保浏览器支持 WebRTC（Chrome、Firefox、Edge 等现代浏览器均支持）。通过 getUserMedia 获取本地媒体流：
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
localVideo.srcObject = stream;
})
.catch(error => console.error('Error accessing media devices:', error));建立信令服务器
使用 Socket.IO 或 WebSocket 实现信令交换。示例代码创建简单的信令通道：
const socket = io('https://your-signaling-server.com');
socket.on('offer', data => {
// 处理远端发起的 offer
});
socket.on('answer', data => {
// 处理远端应答
});创建 RTCPeerConnection
初始化对等连接并添加本地流：
const pc = new RTCPeerConnection();
localStream.getTracks().forEach(track => {
pc.addTrack(track, localStream);
});
pc.ontrack = event => {
remoteVideo.srcObject = event.streams[0];
};交换 SDP 和 ICE 候选
处理 offer/answer 交换流程：
// 发起方创建 offer
pc.createOffer()
.then(offer => pc.setLocalDescription(offer))
.then(() => {
socket.emit('offer', pc.localDescription);
});
// 接收方处理 offer
socket.on('offer', offer => {
pc.setRemoteDescription(offer)
.then(() => pc.createAnswer())
.then(answer => pc.setLocalDescription(answer))
.then(() => {
socket.emit('answer', pc.localDescription);
});
});ICE 候选交换
收集并交换网络候选信息：
pc.onicecandidate = event => {
if (event.candidate) {
socket.emit('ice-candidate', event.candidate);
}
};
socket.on('ice-candidate', candidate => {
pc.addIceCandidate(new RTCIceCandidate(candidate));
});界面与错误处理
HTML 结构示例：
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>错误处理需覆盖以下场景：
- 媒体设备权限拒绝
- 网络连接中断
- ICE 协商失败
高级优化
实现带宽自适应：
const sender = pc.getSenders()[0];
const parameters = sender.getParameters();
parameters.encodings[0].maxBitrate = 500000; // 限制 500kbps
sender.setParameters(parameters);安全与权限
确保 HTTPS 环境（WebRTC 强制要求安全上下文），处理用户媒体权限请求的拒绝情况，提供明确的权限引导提示。
