WebView下使用<input type='file' capture='camera'>时如何检测摄像头权限关闭

你遇到的问题是WebView内原生file input的capture行为由系统/宿主App接管，无法直接通过input相关事件获取权限状态，可按以下优先级选择适配方案：

1. MediaDevices API预检测（优先方案） #

不要直接触发input的点击事件，先在用户触发拍照操作时做权限预校验：

• 核心逻辑：先调用navigator.mediaDevices.getUserMedia({video: true})申请临时摄像头权限，申请成功再唤起input，申请失败直接弹出提示
• 代码示例：

// 绑定自定义拍照按钮的点击事件
async function handleTakePhoto() {
  const cameraInput = document.querySelector('input[type="file"][capture="camera"]');
  try {
    // 临时申请摄像头权限
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    // 权限校验通过，关闭临时占用的流资源
    stream.getTracks().forEach(track => track.stop());
    // 唤起原生拍照input
    cameraInput.click();
  } catch (error) {
    if (['NotAllowedError', 'PermissionDeniedError'].includes(error.name)) {
      alert('请先开启当前App的摄像头权限后再尝试拍照');
    } else {
      alert('无法访问摄像头，请检查设备是否正常连接摄像头');
    }
  }
}

• 注意事项：
  • 该API仅支持HTTPS环境，HTTP站点会被浏览器拦截调用
  • 安卓6以下、iOS11以下的系统WebView不支持该API，需要搭配兜底方案

2. 超时兜底方案（兼容低版本场景） #

针对不支持MediaDevices API的老旧设备，用超时逻辑做兜底判断：

• 核心逻辑：用户点击唤起input后，设置2s左右的定时器，如果定时器触发前没有收到input的change事件（未获取到拍摄的文件），就弹出权限提示
• 提示文案建议做模糊处理，避免误判：未获取到拍摄内容，如果您已禁止摄像头权限，请前往系统设置开启后重试

3. JSBridge对接方案（自有App场景最优） #

如果宿主App是你方自研，可以让客户端开发暴露权限查询的JSBridge接口：

• Web端点击拍照按钮时，先调用客户端提供的checkCameraPermission接口查询权限状态
• 权限正常再唤起input，无权限时直接弹客户端的权限申请弹窗或者引导提示，准确率100%，无兼容问题

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