ReactJS构建的PWA应用摄像头切换功能失效问题求助

看起来你遇到的摄像头切换失效问题，在移动设备（尤其是折叠屏和部分安卓机型）上很常见，主要原因是旧的媒体流（MediaStream）没有被正确释放，导致浏览器无法切换到新的摄像头；另外部分移动浏览器对facingMode的约束需要更严格的配置。下面是具体的排查和修复步骤：

核心问题点 #

• 未释放旧的MediaStream资源：当你切换摄像头重新请求流时，之前的摄像头流还在活跃状态，移动浏览器出于权限或资源占用的限制，不会允许新的流请求切换摄像头。
• facingMode约束不够严格：部分安卓浏览器对facingMode的字符串值支持不够好，需要使用exact参数强制指定摄像头类型。
• MediaRecorder未及时停止：重新初始化时，旧的MediaRecorder可能仍处于活跃状态，占用媒体资源。

具体修复代码 #

1. 添加Stream引用用于资源清理 #

首先，新增一个useRef来保存当前的MediaStream，方便后续关闭：

const streamRef = useRef(null); // 新增：保存当前stream引用

2. 修改getStream函数，优化摄像头约束 #

在获取流时，使用exact参数强制指定摄像头类型，并保存Stream引用：

const getStream = () => {
  return new Promise(async (resolve, reject) => {
    try {
      // 修改：使用exact参数强制指定摄像头类型
      const stream = await navigator.mediaDevices.getUserMedia({
        audio: true,
        video: { 
          facingMode: { 
            exact: showRear ? 'environment' : 'user' 
          } 
        }
      });
      console.log('Stream fetched and rear camera? ', showRear);
      streamRef.current = stream; // 保存当前stream引用
      resolve(stream);
    } catch (err) {
      console.log('Error in fetching stream')
      reject(err);
    }
  })
}

3. 更新初始化前的资源清理逻辑 #

在showRear状态变化时，先停止旧的MediaRecorder并释放Stream资源：

useEffect(() => {
  console.log("reinitializing..")
  
  // 1. 停止旧的MediaRecorder（如果它还在录制状态）
  if (mediaRecorder?.state && mediaRecorder.state !== 'inactive') {
    mediaRecorder.stop();
  }
  
  // 2. 关闭旧Stream的所有Tracks，彻底释放摄像头资源
  if (streamRef.current) {
    streamRef.current.getTracks().forEach(track => {
      track.stop();
    });
    streamRef.current = null;
  }
  
  initializeMediaRecorder();
}, [showRear])

4. 添加组件卸载时的资源清理 #

防止组件卸载时残留活跃的媒体资源，避免影响后续操作：

useEffect(() => {
  return () => {
    // 组件卸载时清理所有媒体资源
    if (mediaRecorder?.state && mediaRecorder.state !== 'inactive') {
      mediaRecorder.stop();
    }
    if (streamRef.current) {
      streamRef.current.getTracks().forEach(track => track.stop());
    }
  };
}, [mediaRecorder]);

为什么这些修改有效？ #

• 释放旧Stream：调用track.stop()会彻底关闭摄像头/麦克风的占用，让浏览器允许新的流请求切换到另一个摄像头。
• exact参数：强制浏览器使用指定的摄像头类型，避免它因为兼容性问题 fallback到当前可用的摄像头。
• 清理MediaRecorder：确保旧的录制器不会继续占用资源，影响新的初始化流程。

你可以把这些修改应用到你的代码中，测试三星Fold2和摩托罗拉手机上的摄像头切换效果，应该能解决问题。

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