解决Chrome中getUserMedia在生产域名下的Permission denied问题

针对www.example.com生产环境调用摄像头出现Uncaught (in promise) DOMException: Permission denied错误，需检查以下域名相关配置：

• HTTPS 安全上下文验证
  Chrome要求调用媒体设备必须在安全上下文（HTTPS）下运行。开发环境可能因localhost或浏览器豁免规则正常运行，但生产环境需确保www.example.com全程使用HTTPS，无HTTP资源加载或跳转漏洞，否则会导致安全上下文失效，触发权限拒绝。

• 浏览器站点权限设置
  检查Chrome中www.example.com的摄像头权限状态：

  1. 打开Chrome设置 > 隐私和安全 > 网站设置 > 摄像头
  2. 确认www.example.com的权限未设为「禁止」，改为「允许」或「每次询问」
  3. 若之前手动禁止过该域名权限，需重置对应设置

• Content-Security-Policy (CSP) 配置检查
  生产环境的CSP头若过于严格，会阻止getUserMedia调用：

  • 确保CSP包含media-src 'self'，允许媒体资源访问
  • 检查device-src指令，需设置为device-src 'self'或明确允许摄像头设备访问
  • 避免CSP中存在限制媒体设备的规则

• 域名权限缓存清理
  Chrome会缓存站点权限设置，若之前误操作禁止过权限，可能残留缓存：

  • 打开Chrome开发者工具 > Application > Storage > 针对www.example.com清除站点数据
  • 或点击地址栏左侧锁图标，直接查看并重置该域名的摄像头权限

• iframe 嵌套权限（若涉及）
  若页面嵌套在iframe中运行：

  • 确保父页面与iframe域名一致，跨域iframe会受权限限制
  • 为iframe添加allow="camera"属性，明确允许摄像头访问

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