React相机授权后偶尔无法加载的问题排查与代码优化咨询

问题根源 #

1. 授权后相机启动失败：权限刚通过时，浏览器或系统需要短暂时间同步状态，立刻调用相机API可能因资源未就绪、状态不同步抛出DOMException: Could not start video source；另外如果相机被其他应用占用，也会触发该错误。
2. 安卓端两次权限请求的影响：两次弹窗不仅会让用户困惑，还可能导致浏览器权限缓存与实际授权状态不一致，进而打乱相机启动时的权限判断，这是引发偶发失败的重要诱因之一。

解决方法与代码优化方案 #

1. 统一权限请求逻辑，杜绝双重弹窗 #

移除应用层额外的权限请求（比如安卓原生权限弹窗），仅通过浏览器标准API处理权限，确保权限状态单一可信：

const checkCameraPermission = async () => {
  try {
    const permissionStatus = await navigator.permissions.query({ name: 'camera' });
    switch (permissionStatus.state) {
      case 'granted':
        await startCamera();
        break;
      case 'prompt':
        // 仅通过getUserMedia触发浏览器权限弹窗
        try {
          const tempStream = await navigator.mediaDevices.getUserMedia({ video: true });
          stopStream(tempStream); // 临时释放流，后续统一启动相机
          await startCamera();
        } catch (err) {
          if (err.name === 'NotAllowedError') {
            showPermissionError();
          }
        }
        break;
      case 'denied':
        showPermissionError();
        break;
    }
  } catch (err) {
    // 兼容不支持permissions API的旧浏览器
    try {
      await startCamera();
    } catch (err) {
      if (err.name === 'NotAllowedError') {
        showPermissionError();
      } else {
        console.error('相机启动出错:', err);
      }
    }
  }
};

// 辅助函数：释放媒体流
const stopStream = (stream) => {
  stream.getTracks().forEach(track => track.stop());
};

2. 授权后延迟启动+重试机制 #

权限确认后给系统留同步时间，同时添加重试逻辑应对相机被占用的情况：

const startCamera = async (retryCount = 0) => {
  const maxRetries = 2;
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ 
      video: { facingMode: 'environment' } // 指定后置摄像头，减少权限混淆
    });
    // 绑定流到video元素
    const videoElement = document.getElementById('camera-video');
    if (videoElement) {
      videoElement.srcObject = stream;
      window.cameraStream = stream; // 保存流引用用于后续清理
    }
  } catch (err) {
    if (err.name === 'NotAllowedError') {
      showPermissionError();
    } else if (err.name === 'NotFoundError' || err.name === 'DOMException') {
      if (retryCount < maxRetries) {
        // 延迟500ms后重试
        setTimeout(() => startCamera(retryCount + 1), 500);
      } else {
        alert('相机启动失败，请检查是否有其他应用正在使用相机');
      }
    }
  }
};

// 权限错误提示函数
const showPermissionError = () => {
  alert('Camera permission is not enabled. Please enable camera access using the following steps.');
};

3. 组件卸载时强制清理相机资源 #

避免相机资源被占用，导致下次启动失败：

useEffect(() => {
  return () => {
    if (window.cameraStream) {
      window.cameraStream.getTracks().forEach(track => track.stop());
      window.cameraStream = null;
    }
  };
}, []);

4. 实时监听权限状态变化 #

确保权限状态更新时能及时响应：

useEffect(() => {
  const watchPermissionChange = async () => {
    const permissionStatus = await navigator.permissions.query({ name: 'camera' });
    permissionStatus.addEventListener('change', () => {
      if (permissionStatus.state === 'granted') {
        startCamera();
      } else if (permissionStatus.state === 'denied') {
        showPermissionError();
      }
    });
  };
  watchPermissionChange();
}, []);

关键注意事项 #

• 绝对不要同时使用安卓原生权限请求和浏览器getUserMedia，避免双重弹窗导致状态混乱。
• 相机启动失败时，优先引导用户检查是否有其他应用占用相机。
• 对不支持navigator.permissions的旧浏览器，必须做降级处理，直接用getUserMedia捕获权限错误。

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