Safari中iframe调用getUserMedia提示allow属性错误如何解决

核心原因 #

Safari对媒体权限的Permissions Policy实现和Chrome、Firefox存在兼容性差异，不支持allow属性中使用*通配符，同时存在部分专属兼容要求。

排查与解决步骤 #

• 修正allow属性写法：删除通配符*，显式指定iframe对应的完整HTTPS源地址，同时确保src属性填写完整的HTTPS协议前缀
• 新增Safari专属兼容属性：在iframe标签上添加allowusermedia属性，该属性为Safari早期版本适配媒体设备的必填配置，对高版本Safari也无副作用
• 配置iframe站点的响应头：在iframe内嵌站点的服务端响应头中添加Permissions-Policy配置，显式允许主站域名调用摄像头、麦克风权限，示例配置如下：

  Permissions-Policy: camera=("https://你的主站域名"), microphone=("https://你的主站域名")
  

• 验证浏览器权限配置：进入Safari浏览器「设置-网站」面板，分别检查摄像头、麦克风的站点权限，确认主站和iframe站点的权限没有被禁用
• 代码层增加权限预校验：调用getUserMedia前先通过权限接口查询授权状态，避免直接调用抛出异常，示例代码如下：

  const camPermission = await navigator.permissions.query({name: 'camera'});
  if (camPermission.state === 'granted') {
    // 再调用getUserMedia
  }
  

正确的iframe配置示例 #

<iframe 
  allow="camera https://test.com; microphone https://test.com"
  allowusermedia
  src="https://test.com" 
/>

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