安卓移动端Chrome/Firefox文件系统权限拒绝后二次请求方案问询

针对用户拒绝文件/相机/相册/视频权限后页面异常的问题，以下是两种需求对应的兼容方案：

一、权限状态查询：判断是否未授权并提示修改设置 #

由于标准Permission.query和File System Access API的queryPermission存在浏览器兼容问题（Firefox完全不支持，Chrome也有局限性），采用媒体设备枚举+文件选择器异常捕获的替代方案：

1. 相机/视频权限检测 #

利用navigator.mediaDevices.enumerateDevices()的特性：用户未授权时，返回的媒体设备label为空字符串；结合getUserMedia的异常捕获，可精准判断权限状态：

async function checkMediaPermission(type = 'video') {
  try {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const targetDevice = devices.find(d => d.kind === `${type}input`);
    // 未授权时设备标签为空
    if (targetDevice?.label === '') return 'denied';
    
    // 验证授权状态（授权则直接获取流后关闭）
    const stream = await navigator.mediaDevices.getUserMedia({ [type]: true });
    stream.getTracks().forEach(track => track.stop());
    return 'granted';
  } catch (err) {
    // 捕获权限拒绝错误
    if (err.name === 'NotAllowedError') return 'denied';
    return 'prompt';
  }
}

2. 文件/相册权限检测 #

通过创建隐藏的<input type="file">并模拟点击，若超时未触发change事件，则判断为权限已拒绝：

function checkFilePermission() {
  return new Promise(resolve => {
    const input = document.createElement('input');
    input.type = 'file';
    input.style.display = 'none';
    document.body.appendChild(input);

    // 超时判断：2秒内未选择文件则视为权限拒绝
    const timeout = setTimeout(() => {
      input.remove();
      resolve('denied');
    }, 2000);

    input.addEventListener('change', () => {
      clearTimeout(timeout);
      input.remove();
      resolve('granted');
    });

    // 必须在用户交互上下文内调用此方法
    input.click();
  });
}

二、重新唤起权限请求弹窗 #

浏览器限制：所有权限请求必须绑定真实用户交互（如按钮点击），否则会被拦截。以下是针对不同权限类型的实现：

1. 相机/视频权限重新请求 #

再次调用getUserMedia，若用户之前拒绝，浏览器会提示跳转至设置页面；同时可直接引导用户打开浏览器权限设置：

async function requestMediaPermission(type = 'video') {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ [type]: true });
    stream.getTracks().forEach(track => track.stop());
    return true;
  } catch (err) {
    if (err.name === 'NotAllowedError') {
      alert('请在浏览器设置中开启相机/视频权限后重试');
      // 引导至对应浏览器的系统设置
      const packageName = navigator.userAgent.includes('Chrome') 
        ? 'com.android.chrome' 
        : 'org.mozilla.firefox';
      window.location.href = `intent://settings/#Intent;action=android.settings.APPLICATION_DETAILS_SETTINGS;package=${packageName};end`;
    }
    return false;
  }
}

2. 文件/相册权限重新请求 #

通过<input type="file">触发系统文件选择器，若权限已拒绝，会触发error事件，此时引导用户去设置开启：

function requestFilePermission() {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = '*/*'; // 可指定类型，如image/*、video/*

  input.addEventListener('change', (e) => {
    // 用户选择文件后的逻辑处理
    const file = e.target.files?.[0];
    if (file) {
      // 处理文件
    }
  });

  input.addEventListener('error', () => {
    alert('请在浏览器设置中开启文件访问权限后重试');
    // 引导至对应浏览器的系统设置
    const packageName = navigator.userAgent.includes('Chrome') 
      ? 'com.android.chrome' 
      : 'org.mozilla.firefox';
    window.location.href = `intent://settings/#Intent;action=android.settings.APPLICATION_DETAILS_SETTINGS;package=${packageName};end`;
  });

  // 必须在用户点击事件内调用此方法
  input.click();
}

关键注意事项 #

• 所有权限相关操作必须在用户主动交互（如按钮点击）的回调中执行，否则浏览器会阻止请求；
• Firefox不支持File System Access API，因此必须使用传统的<input type="file">和媒体API实现；
• 安卓系统权限为系统级，一旦用户拒绝，浏览器不会再次主动弹窗，必须引导用户前往应用设置开启；
• 不同安卓版本的权限行为可能存在差异，建议在多个版本上测试兼容性。

内容的提问来源于stack exchange，提问作者Leonardo Di Vittorio