使用JavaScript检测浏览器麦克风权限状态

navigator.permissions.query({ name: 'microphone' })
  .then(permissionStatus => {
    console.log(`麦克风权限状态: ${permissionStatus.state}`);
    // permissionStatus.state 的值可能是 'granted', 'prompt', 'denied'
  })
  .catch(error => {
    console.error('查询麦克风权限时发生错误:', error);
  });

async function handleMicrophoneAccess() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    console.log('麦克风已授权并开始使用。');
    // 在这里处理麦克风流，例如显示音量指示器或开始录音
    // stream.getTracks().forEach(track => track.stop()); // 停止使用麦克风
  } catch (err) {
    console.error('获取麦克风流失败:', err);
    // 尽管权限是granted，但仍可能因硬件问题等原因失败
  }
}

async function checkAndRequestMicrophone() {
  const permissionStatus = await navigator.permissions.query({ name: 'microphone' });

  if (permissionStatus.state === 'prompt') {
    console.log('麦克风权限处于待提示状态，准备请求。');
    // 此时可以显示一个UI元素，提示用户点击以开始录音或通话
    // 当用户点击时，调用 getUserMedia() 来触发实际的权限请求
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      console.log('用户已授权麦克风。');
      // 处理麦克风流
      // stream.getTracks().forEach(track => track.stop());
    } catch (err) {
      console.error('用户拒绝了麦克风权限或发生错误:', err);
      // 用户拒绝了权限，现在状态可能变为 'denied'
      // 此时可以再次查询权限状态并更新UI
      const newPermissionStatus = await navigator.permissions.query({ name: 'microphone' });
      if (newPermissionStatus.state === 'denied') {
        showDeniedMessage();
      }
    }
  } else if (permissionStatus.state === 'granted') {
    console.log('麦克风权限已授权。');
    handleMicrophoneAccess();
  } else if (permissionStatus.state === 'denied') {
    console.log('麦克风权限已被拒绝。');
    showDeniedMessage();
  }
}

function showDeniedMessage() {
  alert('麦克风权限已被拒绝。请检查您的浏览器设置或系统隐私设置以启用麦克风。');
  // 提供链接或步骤指导用户如何开启权限
}

// 示例调用
checkAndRequestMicrophone();

function showMicrophoneDeniedGuidance() {
  const message = '无法访问麦克风。请按照以下步骤启用麦克风权限：\n\n' +
                  '1. 检查浏览器地址栏左侧的站点信息（通常是锁形图标）。\n' +
                  '2. 找到麦克风权限设置，并将其更改为“允许”或“询问”。\n' +
                  '3. 如果浏览器设置中无法更改，请检查您的操作系统隐私设置（如Windows设置 > 隐私 > 麦克风，或macOS系统偏好设置 > 安全与隐私 > 麦克风）。\n\n' +
                  '更改设置后，请刷新页面。';
  alert(message);
}

/**
 * 检查并处理麦克风权限状态。
 * @returns {Promise<string>} 返回当前的权限状态 ('granted', 'prompt', 'denied')。
 */
async function getMicrophonePermissionState() {
  if (!navigator.permissions || !navigator.permissions.query) {
    console.warn('当前浏览器不支持 Permissions API。');
    alert('您的浏览器不支持权限查询功能，请尝试更新浏览器。');
    return 'unsupported';
  }

  try {
    const permissionStatus = await navigator.permissions.query({ name: 'microphone' });
    const state = permissionStatus.state;

    console.log(`麦克风权限当前状态: ${state}`);

    switch (state) {
      case 'granted':
        console.log('麦克风权限已授权，可以直接使用。');
        // 可以直接调用 getUserMedia 或其他麦克风相关功能
        // 例如：await navigator.mediaDevices.getUserMedia({ audio: true });
        break;
      case 'prompt':
        console.log('麦克风权限待提示，准备触发请求。');
        // 此时，可以显示一个按钮，点击后触发 getUserMedia
        // 如果用户点击，会弹出权限请求
        // try {
        //   const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        //   console.log('用户已授权麦克风，流已获取。');
        //   stream.getTracks().forEach(track => track.stop()); // 示例：立即停止
        // } catch (err) {
        //   console.error('用户拒绝或获取麦克风失败:', err);
        //   // 再次查询权限状态，因为用户可能已拒绝
        //   const newStatus = await navigator.permissions.query({ name: 'microphone' });
        //   if (newStatus.state === 'denied') {
        //     alert('您已拒绝麦克风权限。请在浏览器设置中启用。');
        //   }
        // }
        break;
      case 'denied':
        console.log('麦克风权限已被拒绝。');
        alert('麦克风权限已被拒绝。请检查您的浏览器或系统设置，并允许网站访问麦克风。');
        // 引导用户手动开启权限
        break;
      default:
        console.warn(`未知的麦克风权限状态: ${state}`);
    }
    return state;

  } catch (error) {
    console.error('查询麦克风权限时发生错误:', error);
    alert('查询麦克风权限时发生错误。');
    return 'error';
  }
}

// 在应用启动时调用，以获取初始状态
getMicrophonePermissionState();