如何在浏览器中访问用户音视频，避免多权限弹窗且兼容设备不可用？

先尝试合并请求音视频权限，失败后再回退到单独请求的方式，确实是当前平衡用户体验和功能可用性的最优方案，原因如下：

核心优势 #

1. 优先保证用户体验：合并请求只会触发一次浏览器权限弹窗，避免了两次弹窗带来的打扰，符合用户操作习惯。
2. 最大化功能可用性：当合并请求失败时（比如某一设备不可用或权限被拒），通过单独请求可以尽可能获取可用的媒体轨道，不会因单个设备问题导致完全无法使用音视频功能。

优化后的实现思路 #

为了进一步提升体验和效率，可以在错误处理中加入错误类型判断，避免不必要的后续请求：

let videoTrack = null;
let audioTrack = null;

// 第一步：尝试合并请求
try {
  const combinedStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  videoTrack = combinedStream.getVideoTracks()[0];
  audioTrack = combinedStream.getAudioTracks()[0];
} catch (err) {
  // 根据错误类型决定是否回退到单独请求
  if (err.name === 'NotFoundError' || err.name === 'NotAllowedError') {
    // 单独请求视频
    try {
      const videoStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
      videoTrack = videoStream.getVideoTracks()[0];
    } catch (videoErr) {
      console.error('视频轨道获取失败:', videoErr.message);
    }

    // 单独请求音频
    try {
      const audioStream = await navigator.mediaDevices.getUserMedia({ video: false, audio: true });
      audioTrack = audioStream.getAudioTracks()[0];
    } catch (audioErr) {
      console.error('音频轨道获取失败:', audioErr.message);
    }
  } else {
    console.error('媒体请求异常:', err.message);
  }
}

// 后续逻辑：根据获取到的轨道进行处理
if (videoTrack) {
  // 绑定到video元素或进行其他处理
}
if (audioTrack) {
  // 绑定到audio元素或进行其他处理
}

额外优化建议 #

• 提前检测设备可用性：可以先用navigator.mediaDevices.enumerateDevices()获取当前可用的媒体设备列表，提前判断摄像头、麦克风是否存在，再决定请求策略。比如如果检测到没有摄像头，直接只请求音频，跳过合并请求和视频单独请求，减少无效操作。
• 权限状态引导：如果用户之前已经拒绝过权限，浏览器会直接返回NotAllowedError，此时可以在界面上提示用户前往浏览器设置修改权限，而不是重复请求。

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