解决麦克风权限返回prompt却触发NotAllowedError的异常问题

问题重现 #

用户代码逻辑如下：
首先查询麦克风权限：

navigator.permissions.query({name: 'microphone'})
  .then(async (permission) => {
    alert(permission.state); // 此处返回prompt
    const success = await check(permission.state);
  }).catch(e => {
    resolve();
  });

接着调用check函数请求麦克风权限：

function check() {
  return new Promise((resolve, reject) => {
    navigator.mediaDevices.getUserMedia({
      audio: true
    }).then(stream => {
      resolve();
    }).catch(err => {
      console.log(err.name) //NotAllowedError
      resolve();
    });
  });
}

出现异常：permissions.query返回prompt状态，但getUserMedia抛出NotAllowedError。

可能的原因 #

• 系统级权限拦截：远程调试的设备在系统设置中已禁止浏览器访问麦克风。navigator.permissions仅能检测浏览器内部的权限配置，无法感知系统级限制，因此返回prompt，但实际调用getUserMedia时会被系统直接拒绝。
• 浏览器权限缓存/静默拒绝：部分浏览器在用户之前拒绝权限并勾选「不再询问」后，navigator.permissions.query可能仍返回prompt（存在API行为不一致），但底层会直接触发拒绝逻辑。
• 远程调试环境限制：远程设备的麦克风硬件故障、被其他应用占用，或调试工具的权限传递存在问题，导致浏览器无法正常获取权限。
• 非安全上下文（旧浏览器）：虽然getUserMedia在非安全上下文通常抛出NotSupportedError，但部分旧版本浏览器可能表现为NotAllowedError，需确认页面是否运行在HTTPS/localhost环境。

排查步骤 #

• 检查系统权限设置：在远程设备的系统设置中，找到对应浏览器，确认麦克风权限已开启（如安卓：设置→应用→浏览器→权限→麦克风；iOS：设置→隐私与安全性→麦克风）。
• 查看浏览器站点权限：点击浏览器地址栏左侧的锁图标，进入「站点设置」，直接查看当前网站的麦克风权限状态，确认是否被设置为「禁止」。
• 验证麦克风硬件可用性：在远程设备上使用系统自带录音应用测试，排除硬件故障或被占用的情况。
• 确认安全上下文：检查页面访问协议是否为HTTPS或localhost，getUserMedia仅支持安全上下文。
• 清除浏览器权限缓存：在浏览器设置中清除对应网站的权限记录，重新加载页面后重试。

解决建议 #

1. 优化权限请求逻辑：不要依赖navigator.permissions.query的结果作为前置判断，直接调用getUserMedia并处理异常——因为权限状态可能在两次调用间变化，且不同浏览器对权限API的实现存在差异。优化后示例：

   async function requestMicrophoneAccess() {
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       // 若仅需验证权限，可立即停止轨道
       stream.getTracks().forEach(track => track.stop());
       return true;
     } catch (err) {
       if (err.name === 'NotAllowedError') {
         alert('麦克风权限已被禁止，请前往浏览器或系统设置开启');
       } else {
         console.error('麦克风权限请求失败:', err);
       }
       return false;
     }
   }
   

2. 引导用户手动授权：捕获到NotAllowedError时，明确提示用户前往设置开启权限，并提供简洁的操作指引。
3. 适配远程调试环境：确保远程设备的麦克风未被其他应用占用，调试工具（如Chrome DevTools远程调试）已正确传递权限请求到设备。

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