WebRTC 实时通信：构建高效网页视频通话的秘诀
// 获取本地音视频流
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
// 显示本地视频流
document.getElementById('localVideo').srcObject = stream;
// 创建RTCPeerConnection实例
const pc = new RTCPeerConnection({
iceServers: [{ urls: 'stun::19302' }] // 使用公共STUN服务器
});
// 添加本地流到连接
stream.getTracks().forEach(track => pc.addTrack(track, stream));
// 创建offer
pc.createOffer({ offerToReceiveVideo: true })
.then(offer => {
// 设置本地描述并发送offer
pc.setLocalDescription(offer);
// 通过信令服务器发送offer
sendSignalingMessage('video-offer', offer);
});
// 处理远程描述
pc.setRemoteDescription = new RTCSessionDescription({
type: 'answer',
sdp: 'remote_sdp_answer'
});
// 监听远程流
pc.ontrack = event => {
document.getElementById('remoteVideo').srcObject = event.streams[0];
};
// 处理ICE候选
pc.onicecandidate = event => {
if (event.candidate) {
sendSignalingMessage('new-ice-candidate', event.candidate);
}
};
});
// 发送信令消息
function sendSignalingMessage(type, data) {
const message = JSON.stringify({ type, ...data });
// 通过WebSocket发送信令消息
websocket.send(message);
}