基于Peer.js与WebRTC的运行时视频流切换问题咨询

嘿，我之前在类似的Crosswalk+WebRTC项目里遇到过几乎一模一样的问题——直接移除旧轨道加新轨道后本地视频要么黑屏要么卡顿，折腾了好一阵才找到靠谱的解决方案。结合你的技术栈（Peer.js+WebRTC Adapter），给你梳理下关键步骤和坑点：

1. 先搞对新媒体流的获取方式 #

切换摄像头的核心是拿到对应设备的deviceId，Crosswalk下要依赖Adapter来兼容mediaDevices.enumerateDevices()，别直接用原生API。先枚举所有视频设备，找到你要切换的目标（比如前置/后置），再调用getUserMedia：

// 枚举设备找目标摄像头ID
navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    const targetVideoDevice = devices.find(dev => dev.kind === 'videoinput' && dev.label.includes('后置')); // 这里根据实际设备标签调整
    if (!targetVideoDevice) throw new Error('找不到目标摄像头');
    
    // 获取新的媒体流
    return navigator.mediaDevices.getUserMedia({
      video: { deviceId: { exact: targetVideoDevice.deviceId } },
      audio: true // 若需保持音频轨道不变，可不用重新获取音频
    });
  })
  .then(newStream => {
    // 处理轨道替换逻辑
    switchVideoSource(newStream);
  })
  .catch(err => console.error('获取新流失败:', err));

2. 别手动移除/添加轨道，用Sender.replaceTrack！ #

Peer.js底层的RTCPeerConnection提供了getSenders()方法，直接找到视频轨道对应的sender，调用replaceTrack才是标准做法——手动移除添加轨道很容易触发Crosswalk的媒体渲染bug：

function switchVideoSource(newStream) {
  const peerConn = peer.peerConnection; // 从Peer.js实例拿到底层的RTCPeerConnection
  const videoSender = peerConn.getSenders().find(sender => sender.track.kind === 'video');
  
  if (!videoSender) {
    console.error('找不到视频Sender');
    return;
  }

  // 替换轨道
  videoSender.replaceTrack(newStream.getVideoTracks()[0])
    .then(() => {
      // 关键：手动更新本地预览！Crosswalk不会自动同步轨道变化到本地视频
      const localVideo = document.getElementById('local-video');
      localVideo.pause();
      localVideo.srcObject = newStream;
      localVideo.play();
      
      // 释放旧轨道资源，避免占用摄像头
      const oldStream = localVideo.srcObject;
      if (oldStream) oldStream.getVideoTracks()[0].stop();
    })
    .catch(err => console.error('替换轨道失败:', err));
}

3. Crosswalk/Cordova专属坑点要注意 #

• 权限必须配全：在Cordova的config.xml里一定要加相机相关权限声明，不然切换时可能直接失败：

  <uses-permission android:name="android.permission.CAMERA" />
  <uses-feature android:name="android.hardware.camera" />
  <uses-feature android:name="android.hardware.camera.autofocus" />
  

• Crosswalk版本适配：如果用的是较旧的Crosswalk版本，replaceTrack可能需要Adapter来做兼容填充，确保你集成的Adapter是最新兼容版。
• 避免资源泄漏：每次切换后一定要停止旧的视频轨道，不然下次调用getUserMedia可能会因为摄像头被占用而失败。

4. 调试小技巧 #

用Crosswalk的远程调试工具（chrome://inspect）查看媒体标签页，检查新流的轨道状态是否正常；同时监听Peer连接的事件，确保ICE连接没断：

peer.peerConnection.addEventListener('iceconnectionstatechange', () => {
  console.log('ICE状态:', peer.peerConnection.iceConnectionState);
});

按这个流程走，本地视频的异常问题应该就能解决了——我当时就是因为一开始手动操作轨道踩了坑，换成replaceTrack后就正常了。

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