如何检测浏览器是否支持navigator.permissions.query({name: 'microphone'})

不能仅通过typeof navigator.permissions.query === 'function'判断，因为部分浏览器（比如Firefox）虽实现了该方法，但不支持'microphone'这个权限名称。正确的检测方式是实际尝试调用接口并捕获错误，具体实现如下：

async function supportsMicrophonePermissionQuery() {
  // 先判断permissions接口是否存在
  if (!navigator.permissions?.query) {
    return false;
  }
  try {
    // 尝试查询麦克风权限
    await navigator.permissions.query({ name: 'microphone' });
    return true;
  } catch (err) {
    // 抛出错误说明不支持该权限的查询
    return false;
  }
}

// 调用示例
supportsMicrophonePermissionQuery().then(isSupported => {
  console.log('浏览器是否支持麦克风权限查询:', isSupported);
});

说明 #

• 部分浏览器（如Firefox）的Permissions API仅支持有限的权限类型（如地理位置、通知），不包含麦克风/摄像头权限，此时调用会抛出TypeError，通过捕获这个错误就能准确判断是否支持目标权限的查询。
• 如果只是需要确认用户是否授予了麦克风权限，也可以通过navigator.mediaDevices.getUserMedia({ audio: true })间接判断，但该方法会直接触发权限请求弹窗，而Permissions API的查询不会触发弹窗，仅返回当前权限状态。

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