iOS端授权相机后仍出NotAllowedError，视频元素空白问题

针对你遇到的iOS端视频流空白、NotAllowedError报错问题，结合特殊现象，核心原因是iOS WebKit的媒体播放限制、约束配置错误以及视频元素属性缺失，以下是具体修复方案：

1. 严格遵循用户交互触发播放规则 #

iOS要求媒体播放操作必须处于用户主动触发的上下文（比如点击、触摸事件），getUserMedia的回调不属于这个上下文，直接调用play()会被拦截。

修复代码： #

将相机初始化逻辑绑定到用户点击事件（可复用现有拍照按钮的初始点击）：

// 绑定到用户点击事件
document.getElementById('capture-button').addEventListener('click', async () => {
  // 避免重复初始化
  if (this.video.srcObject) return;

  try {
    const constraints = {
      video: { width: { ideal: 2160 }, height: { ideal: 2160 } }
    };

    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    const videoTrack = stream.getVideoTracks()[0];
    const capabilities = videoTrack.getCapabilities();
    const ideal = Math.min(capabilities.width.max, capabilities.height.max);

    // 修正约束参数格式，等待约束生效
    await videoTrack.applyConstraints({
      width: { ideal },
      height: { ideal },
      aspectRatio: 1
    });

    this.video.srcObject = stream;
    // 在用户交互上下文内调用play，并捕获错误
    await this.video.play();
    this.cameraLoading = false;
  } catch (err) {
    console.error('相机初始化失败:', err);
  }
});

2. 修正视频元素属性 #

添加playsinline属性强制视频在页面内播放（避免自动全屏），同时补充muted和autoplay辅助iOS的播放规则：

<div class="camera" class.bind="cameraLoading ? 'hidden' : ''">
  <video id="camera-view" ref="video" playsinline muted autoplay>Video stream not available.</video>
  <div id="button-div">
    <button id="capture-button" ref="captureButton">
      <i class="fa fa-camera"></i>
    </button>
  </div>
  <canvas id="overlay-canvas" ref="overlayCanvas"></canvas>
</div>

3. 完善约束应用与错误处理 #

• 原代码中applyConstraints的参数格式错误（多余嵌套video字段），且该方法是异步操作，必须用await等待完成，否则流未准备好就播放会失败。
• 给play()添加错误捕获，避免未处理的Promise拒绝：

// 修正后的约束应用
await videoTrack.applyConstraints({
  width: { ideal },
  height: { ideal },
  aspectRatio: 1
});

// 播放时捕获错误
this.video.play().catch(err => {
  console.error('视频播放失败:', err);
  // 可在这里提示用户重新点击开启相机
});

4. 单页应用视图切换后的状态恢复 #

切换视图返回后正常，是因为此时已处于用户交互授权的上下文，可在组件激活钩子中重新触发播放：

// 以Vue组件为例，在activated钩子中恢复播放
activated() {
  if (this.video.srcObject && !this.video.paused) {
    this.video.play().catch(err => console.error('恢复播放失败:', err));
  }
}

特殊现象解释 #

• 点击拍照能捕获画面：拍照是通过canvas从视频流取帧，流已存在但未播放，取帧不受播放权限限制。
• 切换视图返回后正常：iOS WebKit会在用户交互后保留媒体播放权限上下文，返回时重新触发play符合规则。
• 有时全屏加载：未添加playsinline属性，iOS默认将视频全屏播放。

内容的提问来源于stack exchange，提问作者SGT Grumpy Pants