WebRTC端对端连接切换摄像头报错：DOMException: Could not start video source

问题重现 #

在WebRTC端对端连接中执行摄像头切换操作时，抛出DOMException: Could not start video source错误，即使已停止现有流也无法解决，导致切换流程中断并影响连接。

代码问题分析 #

当前实现存在几个关键问题：

• 采用移除所有轨道再重新添加的方式更新流，容易导致WebRTC连接状态混乱，且不必要地触发多次协商
• 依赖设备label匹配当前摄像头，可靠性低（label可能随浏览器/系统变化）
• 先获取流再单独应用分辨率约束，可能与设备支持的参数冲突
• 状态更新逻辑（先设为null再赋值）可能导致旧流引用未及时释放

解决方案与优化建议 #

1. 使用replaceTrack替代移除再添加轨道 #

WebRTC提供了RTCRtpSender.replaceTrack()方法，可以直接替换已存在的媒体轨道，无需移除整个sender，这是切换摄像头的标准最优方案，能避免连接状态异常。

2. 基于deviceId匹配当前摄像头 #

放弃使用label匹配，改用deviceId定位当前设备，确保匹配逻辑稳定可靠。

3. 合并约束配置到getUserMedia请求中 #

将设备ID、分辨率约束合并到同一个getUserMedia调用里，避免后续单独应用约束时出现设备不兼容的问题。

4. 确保旧轨道完全释放 #

停止旧轨道后，可通过监听ended事件或短暂延迟，等待设备资源释放后再请求新流，避免浏览器设备占用冲突。

修改后的代码示例 #

const handleToggleCamera = async () => {
  if (!userStream) return;

  try {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const videoDevices = devices.filter(device => device.kind === "videoinput");

    if (videoDevices.length <= 1) {
      console.error("Device does not support switching cameras.");
      return;
    }

    // 用deviceId匹配当前摄像头，替代label
    const currentVideoTrack = userStream.getVideoTracks()[0];
    const currentCamera = videoDevices.find(device => device.deviceId === currentVideoTrack.getSettings().deviceId);
    if (!currentCamera) {
      console.error("Current camera not found in device list");
      return;
    }
    const currentCameraIndex = videoDevices.indexOf(currentCamera);
    const nextCameraIndex = (currentCameraIndex + 1) % videoDevices.length;
    const nextCameraId = videoDevices[nextCameraIndex].deviceId;

    // 停止旧轨道并等待释放
    currentVideoTrack.stop();
    // 等待轨道ended事件，确保设备释放
    await new Promise(resolve => {
      if (currentVideoTrack.readyState === "ended") resolve();
      else currentVideoTrack.addEventListener("ended", resolve, { once: true });
    });

    // 合并所有约束到getUserMedia请求
    const nextStream = await navigator.mediaDevices.getUserMedia({
      audio: { deviceId: userStream.getAudioTracks()[0].getSettings().deviceId }, // 保持原音频设备
      video: {
        deviceId: { exact: nextCameraId },
        width: { ideal: 1280 },
        height: { ideal: 720 }
      }
    });

    // 使用replaceTrack更新WebRTC连接
    const videoSender = peer.peer.getSenders().find(sender => sender.track?.kind === "video");
    if (videoSender) {
      await videoSender.replaceTrack(nextStream.getVideoTracks()[0]);
    } else {
      // 极端情况：无视频sender，再添加轨道
      peer.peer.addTrack(nextStream.getVideoTracks()[0], nextStream);
    }

    // 更新本地状态
    setMyStream(nextStream);
    // 仅在新增轨道时触发协商，replaceTrack多数情况无需额外协商
    if (!videoSender) {
      handleNegoNeeded();
    }

  } catch (error) {
    console.error("Error switching camera:", error);
    if (error.constraints) console.error("Failed constraints:", error.constraints);
  }
};

额外排查点 #

• 检查浏览器权限：确保摄像头权限未被临时禁用
• 测试硬件兼容性：部分设备/浏览器对多摄像头切换的支持存在差异，可在不同环境验证
• 避免并发操作：确保同一时间只有一个摄像头切换请求在执行

内容的提问来源于stack exchange，提问作者Chirag P. Gauswami