使用WebRTC时，如何让浏览器仅向用户请求一次摄像头权限？

核心原因 #

Chrome会自动持久化域名的媒体设备授权状态，但Firefox和Safari的默认行为不同：

• Firefox：仅当用户在权限弹窗中勾选**"记住此决定"**时，才会持久化授权；
• Safari：桌面版13+支持权限持久化，但默认会话结束后可能重置，需用户手动在网站权限设置中确认允许。

你之前尝试的enumerateDevices()仅用于获取设备列表，和权限持久化没有关联，所以无法解决问题。

可行解决方案 #

1. 先检查权限状态，再触发授权请求

利用浏览器的Permissions API提前判断摄像头权限状态，避免不必要的弹窗：

async function requestCameraStream() {
  let permissionState = 'prompt';
  // 尝试查询权限状态（部分旧浏览器可能不支持）
  try {
    const status = await navigator.permissions.query({ name: 'camera' });
    permissionState = status.state;
  } catch (err) {
    console.warn('权限查询API不支持，直接尝试获取摄像头');
  }

  if (permissionState === 'granted') {
    // 已有授权，直接获取流
    return navigator.mediaDevices.getUserMedia({ video: true });
  } else {
    // 无授权，触发弹窗，此时务必引导用户勾选"记住此决定"（Firefox）或在设置中保存授权（Safari）
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    return stream;
  }
}

2. 针对不同浏览器的额外处理

• Firefox：在调用getUserMedia()前，可通过页面提示引导用户勾选弹窗中的"记住此决定"，这是Firefox持久化权限的唯一方式；
• Safari：如果用户关闭浏览器后权限重置，可引导用户前往「Safari设置 > 网站 > 摄像头」，将你的网站权限设置为「允许」，这样就能永久保存授权。

3. 处理权限拒绝的情况

如果用户之前拒绝过权限且勾选了"记住拒绝"，后续调用getUserMedia()会直接抛出错误，此时需要引导用户前往浏览器设置修改权限：

async function requestCameraStream() {
  try {
    // 先尝试获取流
    return navigator.mediaDevices.getUserMedia({ video: true });
  } catch (err) {
    if (err.name === 'NotAllowedError') {
      // 用户已拒绝权限，提示去设置修改
      alert('摄像头权限已被拒绝，请前往浏览器设置中开启权限');
    }
    throw err;
  }
}

内容的提问来源于stack exchange，提问作者José Montes