Safari 15 getUserMedia支持情况及摄像头调用无画面问题咨询

1. 应该参考的API标准 #

你使用的navigator.mediaDevices.getUserMedia属于 getUserMedia/Stream API 范畴，这是W3C标准化后的正式API，Safari 15完整支持该API。
你在caniuse上看到的不被Safari 15支持的 Navigator API: getUserMedia 是已经废弃的旧版API，该接口直接挂载在navigator根对象下（调用方式为navigator.getUserMedia(...)），目前所有主流浏览器都已逐步停止对该旧接口的支持，无需参考这个指标。

2. 授权后无画面的常见原因及修复方案 #

你遇到的授权后无画面是Safari适配的典型问题，可按以下顺序排查修复：

• 补全video标签属性
  Safari（尤其是iOS端Safari）默认禁止视频在页面内自动内联播放，需要给video标签添加playsinline属性，桌面端Safari也建议加上该属性保证兼容性，修改后的HTML如下：

  <video id="camera--view" autoplay playsinline></video>
  

  如果你不需要同步采集音频，也可以额外加上muted属性，规避Safari的自动播放策略限制。
• 显式获取DOM元素
  不要直接使用id作为变量引用DOM节点，Safari不支持这种非标准的隐式全局变量，需要在调用API前显式获取元素：

  // 新增这行代码，显式获取video节点
  const cameraView = document.getElementById('camera--view');
  navigator.mediaDevices
  .getUserMedia(constraints)
  .then(function (stream) {
      track = stream.getTracks()[0];
      cameraView.srcObject = stream;
  })
  .catch(function (error) {
      console.error("Oops. Something is broken.", error);
  });
  

• 检查调用时机和运行环境
  • Safari要求getUserMedia必须由用户主动交互触发（比如按钮点击事件回调），不能在页面加载完成后自动调用，否则即使弹出授权弹窗，后续流渲染也会被限制
  • 部署的页面必须走HTTPS协议，仅本地开发的localhost环境可以豁免HTTP限制
• 简化测试配置
  先使用最简单的媒体约束参数测试，避免因参数不兼容导致的流获取失败：

  const constraints = { video: true, audio: false }
  

内容的提问来源于stack exchange，提问作者QI SHUN WONG