WebRTC视频流无法稳定加载的时序问题排查求助

问题背景 #

运营的视频聊天网站使用WebRTC实现视频功能，存在视频流无法100%加载的情况，推测是信令时序问题——极短延迟都会导致流无法显示。输入/forcevid强制刷新约90%能恢复，但无法彻底根治。

核心问题分析 #

前端代码时序缺陷 #

1. 媒体流与PeerConnection初始化异步冲突：reloadCameraStream同时调用loadMyCameraStream和loadStrangerCameraStream，但媒体流获取是异步操作，可能在PeerConnection初始化时localStream未就绪，导致媒体轨道未正确添加到连接中。
2. ICE Candidate缓存逻辑僵化：依赖finishSDPVideoOfferOrAnswer标记控制Candidate添加，若SDP协商延迟或状态判断遗漏，会导致缓存的Candidate无法正确注入，影响ICE连通性。
3. SDP协商无错误重试：createOffer/createAnswer失败后直接报错，没有重试机制，单次协商失败就导致流加载失败。
4. 老旧API兼容风险：混用已废弃的addStream和现代addTrack API，在新浏览器中可能存在兼容性问题，导致媒体流无法正确传输。

后端信令发送时序问题 #

后端匹配用户后直接同时发送connected消息，未确认前端是否完成媒体流加载和PeerConnection初始化，可能导致一方发送的Offer信令被另一方未初始化的PeerConnection忽略。

修复方案 #

1. 确保媒体流就绪后再初始化PeerConnection #

重构媒体流加载为Promise形式，等待本地流就绪后再创建PeerConnection：

function reloadCameraStream(isOfferer_) {
    loadMyCameraStream().then(() => {
        loadStrangerCameraStream(isOfferer_);
        addStatusMsg("Attempted to Reload Camera Streams.");
    }).catch(e => {
        addStatusMsg("Failed to load local stream: " + e);
    });
}

function loadMyCameraStream() {
    return new Promise((resolve, reject) => {
        if (!navigator.mediaDevices?.getUserMedia) {
            addStatusMsg("Your browser does not support WebRTC (Camera/Voice chat).");
            reject(new Error("No getUserMedia support"));
            return;
        }

        navigator.mediaDevices.getUserMedia({ 
            video: {facingMode: "user", aspectRatio: 4 / 3}, 
            audio: { echoCancellation : true } 
        }).then(localMediaStream => {
            const youVideo = document.querySelector("#videoBox #you");
            youVideo.muted = true;
            youVideo.autoplay = true;
            youVideo.setAttribute('playsinline', '');
            youVideo.srcObject = localMediaStream;
            localStream = localMediaStream;
            resolve();
        }).catch(e => {
            addStatusMsg("Your Video has error : " + e);
            reject(e);
        });
    });
}

2. 优化ICE Candidate动态处理逻辑 #

移除僵化的状态标记，根据PeerConnection的signalingState动态处理Candidate缓存与添加：

function iceCandidate(candidate) {
    if(!peerConnection) {
        addStatusMsg("iceCandidate peerConnection not created error.");
        return;
    }

    const allowedStates = ["stable", "have-local-offer", "have-remote-offer", "have-local-answer", "have-remote-answer"];
    if (allowedStates.includes(peerConnection.signalingState)) {
        peerConnection.addIceCandidate(new IceCandidate(candidate)).catch(e => {
            addStatusMsg("Error adding ICE Candidate: " + e);
        });
    } else {
        iceCandidates.push(candidate);
        // 监听信令状态变化，自动注入缓存的Candidate
        const onSignalingChange = () => {
            if (allowedStates.includes(peerConnection.signalingState)) {
                while (iceCandidates.length) {
                    const cand = iceCandidates.shift();
                    peerConnection.addIceCandidate(new IceCandidate(cand)).catch(e => {
                        addStatusMsg("Error adding cached ICE Candidate: " + e);
                    });
                }
                peerConnection.removeEventListener('signalingstatechange', onSignalingChange);
            }
        };
        peerConnection.addEventListener('signalingstatechange', onSignalingChange);
    }
}

3. 完善SDP协商的错误重试机制 #

改用Promise链式调用处理SDP协商，添加失败重试逻辑：

// 重构createOffer逻辑
if(isOfferer) {
    peerConnection.createOffer(rtc_media_constraints)
        .then(offer => peerConnection.setLocalDescription(offer))
        .then(() => ws.send(JSON.stringify(['send_offer', {"offer": peerConnection.localDescription}])))
        .catch(e => {
            addStatusMsg("createOffer error: " + e);
            // 1秒后重试一次
            setTimeout(() => {
                peerConnection.createOffer(rtc_media_constraints)
                    .then(offer => peerConnection.setLocalDescription(offer))
                    .then(() => ws.send(JSON.stringify(['send_offer', {"offer": peerConnection.localDescription}])))
                    .catch(retryErr => addStatusMsg("Retry createOffer failed: " + retryErr));
            }, 1000);
        });
}

// 重构getOffer中的createAnswer逻辑
if(!isOfferer) {
    peerConnection.createAnswer()
        .then(answer => peerConnection.setLocalDescription(answer))
        .then(() => ws.send(JSON.stringify(['send_answer', {"answer": peerConnection.localDescription}])))
        .catch(e => {
            addStatusMsg("createAnswer error: " + e);
            setTimeout(() => {
                peerConnection.createAnswer()
                    .then(answer => peerConnection.setLocalDescription(answer))
                    .then(() => ws.send(JSON.stringify(['send_answer', {"answer": peerConnection.localDescription}])))
                    .catch(retryErr => addStatusMsg("Retry createAnswer failed: " + retryErr));
            }, 1000);
        });
}

4. 统一使用现代WebRTC API #

移除废弃的addStream兼容代码，统一使用addTrack和ontrack：

// 加载远程流时仅保留ontrack逻辑
peerConnection.ontrack = function(e) {
    const strangerVideo = document.querySelector("#videoBox #stranger");
    strangerVideo.setAttribute('playsinline', '');
    strangerVideo.srcObject = e.streams[0];
    // 处理浏览器自动播放策略
    strangerVideo.play().catch(e => {
        addStatusMsg("Click video to start playing");
        strangerVideo.addEventListener('click', () => {
            strangerVideo.play().catch(playErr => addStatusMsg("Play failed: " + playErr));
        }, {once: true});
    });
};

// 添加本地流时统一用addTrack
localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

5. 后端信令时序优化 #

修改后端逻辑，等待前端发送ready信令（确认媒体流加载完成）后，再分配offerer角色并发送匹配通知：

// 伪代码示例
// 维护用户准备状态
user.setReady(false);

// 监听前端ready信令
server.onMessage((websocket, message) => {
    if ("ready".equals(message.getType())) {
        User user = getUserByWebSocket(websocket);
        user.setReady(true);
        // 查找匹配的已就绪用户
        User stranger = findMatchedReadyUser(user);
        if (stranger != null) {
            user.videoChatOfferer = true;
            stranger.videoChatOfferer = false;
            // 发送匹配成功消息
            sendConnectedMsg(user, true);
            sendConnectedMsg(stranger, false);
            // 标记双方为已匹配
            markAsMatched(user, stranger);
        }
    }
});

6. 添加连接状态自动恢复 #

监听PeerConnection连接状态，失败时自动触发刷新：

// 在loadStrangerCameraStream中添加
peerConnection.addEventListener('connectionstatechange', () => {
    if (peerConnection.connectionState === 'failed' || peerConnection.connectionState === 'disconnected') {
        addStatusMsg("Peer connection lost, reloading...");
        closeStrangerCameraStream();
        reloadCameraStream(isOfferer);
    }
});

验证手段 #

• 在不同网络环境（NAT、弱网、VPN）下测试视频流加载成功率
• 统计/forcevid命令的使用频率，观察修复后的下降趋势
• 通过浏览器WebRTC日志（如chrome://webrtc-internals/）排查ICE连通性和SDP协商状态

内容的提问来源于stack exchange，提问作者SSpoke