WebRTC应用切换前后摄像头无响应，画面无法显示问题求助

核心问题分析 #

从提供的代码来看，切换按钮无反应、画面无法更新的问题，主要集中在轨道替换逻辑、设备约束配置、状态更新顺序这几个环节，以下是具体问题点和修复方案：

1. replaceTrack 调用逻辑缺陷 #

RTCRtpSender.replaceTrack() 要求传入匹配类型的轨道，且需要捕获替换异常。当前代码未校验轨道类型，也未处理替换失败的情况，容易导致轨道替换静默失败。

修复代码：

function broadcastNewCameraTracks(stream, type, mirrorMode = true) {
    h.setLocalStream(stream, mirrorMode);

    let newTrack = type === 'audio' ? stream.getAudioTracks()[0] : stream.getVideoTracks()[0];
    if (!newTrack) return; // 确保获取到有效轨道
            
    for (let key in pc) {
        if (pc.hasOwnProperty(key)) {
            const sender = pc[key];
            // 校验sender轨道类型与新轨道匹配
            if (typeof sender === 'object' && sender.replaceTrack && sender.track?.kind === newTrack.kind) {
                sender.replaceTrack(newTrack)
                    .catch(err => console.error('轨道替换失败:', err)); // 捕获并输出异常
            }
        }
    }
}

2. facingMode 约束配置过于宽松 #

使用 ideal 会在目标摄像头不可用时自动 fallback 到其他摄像头，导致看似切换成功但实际未切换到目标设备。建议改用 exact 明确指定目标，配合错误处理确认设备是否存在。

修复代码：

const desiredCamera = usingRearCamera ? "user" : "environment";
const constraints = {
    video: {
        facingMode: { exact: desiredCamera } // 强制指定目标摄像头
    },
    audio: true
};

3. 旧轨道停止时机错误 #

当前先停止旧轨道再获取新流，若新流获取失败会导致彻底无画面。应调整为先成功获取新流，再停止旧轨道：

修复代码：

try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    // 新流获取成功后，再停止旧轨道
    if (myStream) {
        myStream.getTracks().forEach(track => track.stop());
    }
    myStream = stream;
    broadcastNewCameraTracks(myStream, 'video', true);
    // ... 后续UI更新逻辑
} catch (error) {
    console.error('摄像头访问失败:', error);
    // 可选：切换失败时恢复旧轨道（若存在）
}

4. UI状态更新逻辑反向 #

当前代码中 usingRearCamera 的更新顺序有误，导致UI状态与实际摄像头状态不匹配，应先计算新状态再更新DOM：

修复代码：

// 先计算新状态
const newUsingRearCamera = !usingRearCamera;
elem.setAttribute('data-using-rear-camera', newUsingRearCamera);

if (newUsingRearCamera) {
    onPath.classList.remove('on');
    onPath.classList.add('off');
    offPath.classList.remove('off');
    offPath.classList.add('on');
    elem.classList.add('camera-off');
    elem.setAttribute('title', '激活前置摄像头');
} else {
    onPath.classList.remove('off');
    onPath.classList.add('on');
    offPath.classList.remove('on');
    offPath.classList.add('off');
    elem.setAttribute('title', '关闭后置摄像头');
    elem.classList.remove('camera-off');
}

调试建议 #

• 打开浏览器控制台（F12），查看是否有未捕获的错误信息；
• 在 broadcastNewCameraTracks 中添加 console.log(sender)，确认 pc 对象中的 sender 是否有效；
• 获取新流后打印 stream.getVideoTracks()[0].label，验证是否获取到目标摄像头（后置摄像头标签通常包含"back"或"后置"字样）。

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