调用navigator.mediaDevices.getUserMedia返回Permission denied错误如何解决

问题根因排查&解决方案 #

• 检查移动端系统级浏览器权限
  你只验证了桌面端的系统浏览器权限，未校验移动端设备的权限配置：

  • iOS端：打开设置 → 找到你测试用的浏览器（Chrome/Edge等）→ 确认摄像头权限未被设置为「拒绝」，需设为「询问」或「允许」
  • 安卓端：打开设置 → 应用管理 → 对应浏览器 → 权限管理 → 确认摄像头权限未被永久禁用
    移动端系统如果禁用了浏览器的摄像头全局权限，所有站点的摄像头请求都会被直接拦截，不会弹出权限申请框，直接返回Permission denied。

• 修正facingMode参数的兼容写法
  移动端部分Chromium内核浏览器对facingMode的参数格式要求严格，直接传入字符串'environment'会被识别为非法参数，不会抛出参数错误而是直接返回权限异常，修改为兼容写法即可：

async function enableVideoStream() {
  try {
    console.log('In useUserMedia =>');
    const stream = await navigator.mediaDevices.getUserMedia(
      {
        audio: false,
        video: { facingMode: { ideal: 'environment' } }, // 修改为ideal包裹的写法
      },
    );
    setMediaStream(stream);
  } catch (err) {
    // 建议新增错误细节打印，方便定位
    console.log('错误类型', err.name, '错误详情', err.message, err);
  }
}

• 校验Rails后端的权限策略响应头
  Rails默认会开启严格的安全响应头配置，检查你的站点响应头中是否存在Permissions-Policy字段，若该字段配置为camera=()则会全局禁止页面调用摄像头，需要修改Rails的安全配置，添加摄像头权限允许规则：
  如需允许全站调用摄像头，可在Rails的config/initializers/content_security_policy.rb中添加对应配置，设置Permissions-Policy: camera=(self)（同站允许）或camera=(*)（全允许）。

• 确认函数触发时机符合浏览器安全规则
  浏览器禁止非用户主动交互触发的媒体设备请求，如果你是在useEffect等页面自动执行的逻辑中调用enableVideoStream，请求会被直接拦截返回权限拒绝，不会弹出申请框。必须将该函数绑定到用户主动触发的事件回调中（如按钮的onClick事件、触摸事件等）。

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