WebRTC视频通话切换摄像头后接收端无视频的问题求助

核心问题分析 #

你的代码存在三个关键问题导致接收端无法获取切换后的视频流：

1. 摄像头切换时未正确匹配目标设备：capture函数传入了facingMode参数，但约束条件里硬编码了deviceId: devicesIds[1]，完全未使用传入的朝向参数，切换逻辑失效。
2. localStream更新逻辑错误：旧流的track已停止，却仍在旧流对象上添加新track，应直接替换为新获取的媒体流。
3. 缺少错误排查机制：getUserMedia的catch块为空，无法定位设备获取失败的原因。

修复步骤 #

1. 修正摄像头设备匹配逻辑

根据传入的facingMode动态筛选对应设备ID，而非固定使用devicesIds[1]：

• 通过navigator.mediaDevices.enumerateDevices()获取所有媒体设备
• 根据设备标签或ID匹配目标朝向的摄像头

2. 正确更新本地流

直接将localStream替换为新获取的stream，避免在已停止的旧流上操作。

3. 完善错误处理

在getUserMedia的catch块中添加控制台日志，方便排查设备访问失败问题。

4. 优化Track替换逻辑

确保replaceTrack时能精准匹配对应类型的track，并处理sender不存在的边界情况。

修正后的完整代码 #

$(".btn_rear_camera").click(function() {
  if (cameratype === "user") {
      capture('environment');
  } else {
      capture('user');
  }
});

// 根据朝向获取对应摄像头的设备ID
async function getCameraDeviceId(facingMode) {
  const devices = await navigator.mediaDevices.enumerateDevices();
  const videoDevices = devices.filter(device => device.kind === 'videoinput');
  // 匹配目标朝向的设备，无匹配则 fallback 到第一个视频设备
  const targetDevice = videoDevices.find(device => 
    device.label.toLowerCase().includes(facingMode) || 
    device.deviceId.includes(facingMode)
  );
  return targetDevice ? targetDevice.deviceId : videoDevices[0]?.deviceId;
}

async function capture(facingMode) {
  cameratype = facingMode;
  // 停止旧流的所有track
  if (localStream) {
    localStream.getTracks().forEach(track => track.stop());
  }

  try {
    const targetDeviceId = await getCameraDeviceId(facingMode);
    if (!targetDeviceId) {
      console.error('未找到目标摄像头设备');
      return;
    }

    const constraints = {
      video: { deviceId: targetDeviceId },
      audio: true
    };

    const newStream = await navigator.mediaDevices.getUserMedia(constraints);
    replaceTracks(newStream);
  } catch (error) {
    console.error('获取摄像头失败:', error);
  }
}

function replaceTracks(newStream) {
  const elementId = "localVideo";
  detachMediaStream(elementId);

  // 直接替换本地流对象
  localStream = newStream;
  attachMediaStream(elementId, newStream);

  // 更新PeerConnection的发送track
  if (peerConnection) {
    _replaceTracksForPeer(peerConnection);
  }

  function _replaceTracksForPeer(peer) {
    peer.getSenders().forEach(sender => {
      const newTrack = newStream.getTracks().find(track => track.kind === sender.track?.kind);
      if (newTrack) {
        sender.replaceTrack(newTrack).catch(err => console.error('替换track失败:', err));
      }
    });
  }
}

function detachMediaStream(id) {
  const elem = document.getElementById(id);
  if (elem) {
    elem.pause();
    elem.srcObject = null;
  }
};

function attachMediaStream(id, stream) {
  const elem = document.getElementById(id);
  if (elem) {
    elem.srcObject = stream;
    elem.onloadedmetadata = () => elem.play().catch(err => console.error('播放本地视频失败:', err));
  } else {
    throw new Error('无法找到视频元素');
  }
};

额外注意事项 #

• 确保浏览器已授予摄像头访问权限
• 若使用旧版WebRTC API，部分浏览器可能需要调用peerConnection.createOffer()重新协商连接（现代浏览器支持replaceTrack无需重新协商）
• 可根据实际设备标签调整getCameraDeviceId中的匹配逻辑

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