首先得明确一个关键点：一旦用户明确拒绝了摄像头权限，没有任何前端代码可以强制浏览器再次弹出授权窗口——这是浏览器的安全设计，目的是防止网站反复骚扰用户请求权限。不过我们可以通过以下方式来解决这个问题：

1. 引导用户手动修改浏览器权限 #

这是最直接有效的方法，不同浏览器的操作路径略有不同：

• Chrome/Edge 等 Chromium 内核浏览器：
  1. 点击地址栏左侧的「锁」图标
  2. 在弹出的面板里找到「摄像头」选项
  3. 将权限从「阻止」改为「允许」
  4. 刷新页面后，再次调用 getUserMedia 就会正常工作
• Firefox：
  1. 点击地址栏左侧的「i」信息图标
  2. 选择「权限设置」
  3. 在列表中找到「摄像头」，修改权限为「允许」
  4. 刷新页面即可

2. 代码层面优化用户体验 #

虽然不能强制弹窗，但我们可以在代码里做更友好的处理，引导用户去修改权限：

navigator.mediaDevices.getUserMedia({ audio: false, video: true })
  .then(function(stream) {
    // 正常处理摄像头流
    console.log("摄像头权限已获取");
  })
  .catch(function(err) {
    // 判断是否是权限拒绝类错误
    if (err.name === 'NotAllowedError') {
      // 给用户显示清晰的操作指引
      alert("摄像头权限已被阻止，请点击地址栏左侧的锁图标，修改摄像头权限为允许后刷新页面");
    } else {
      console.log("其他错误：", err);
    }
  });

另外，你还可以使用 Permissions API 提前检查权限状态，避免直接调用 getUserMedia 报错：

if (navigator.permissions) {
  navigator.permissions.query({ name: 'camera' })
    .then(permissionStatus => {
      console.log("当前摄像头权限状态：", permissionStatus.state); // 状态可能为 'granted'、'denied'、'prompt'
      if (permissionStatus.state === 'denied') {
        // 提前提示用户修改权限
        alert("摄像头权限已被禁用，请手动修改浏览器权限后重试");
      }
    });
}

需要注意的是，Permissions API 在部分旧版浏览器中可能有兼容性限制，使用前可以先做兼容性检测。

内容的提问来源于stack exchange，提问作者Mr. Rutko