iOS PWA模式下HTML Video偶现无法播放getUserMedia流问题

问题本质 #

这是iOS WebKit内核在独立PWA运行模式下的特有底层问题，和常规浏览器的JS逻辑写法无关，核心触发逻辑是：独立PWA的媒体进程和普通Safari隔离，离屏元素不触发媒体加载、音视频轨同时请求时权限校验偶发卡死、播放逻辑触发时机不对都会导致媒体流已成功获取、srcObject赋值正确，但视频解码器不启动，readyState始终停在0，play()返回的Promise永远不决议。

原有代码存在3个明确的触发点：

• 创建的video元素始终没有插入DOM树，iOS下离屏video默认不会启动媒体资源加载
• 缺少iOS Safari需要的webkit前缀播放属性，controls属性在PWA下偶现和加载逻辑冲突
• 没有超时重试逻辑，卡死后没有资源重置步骤，只能靠用户手动杀应用重启

具体修复步骤 #

• 提前初始化video元素并挂载到DOM：页面加载阶段就创建video标签插入DOM，可通过定位放到视口外、设为透明，不要等getUserMedia返回流之后再创建元素
• 补全所有iOS必需的播放属性：必须加webkit-playsinline属性，首次播放保持静音、开启autoplay，初始状态不要加controls属性，等播放成功后再开启
• 拆分媒体请求逻辑：首次调用getUserMedia只请求视频轨，确认视频正常播放后，再单独请求音频轨合并到现有流，避免音视频同时请求时PWA权限进程卡死；初始不要加过严的分辨率约束，拿到流后再根据设备实际支持的参数调整画质
• 增加超时兜底重试逻辑：赋值srcObject后主动调用video.load()触发加载，设置3秒超时阈值，如果超时后readyState仍为0，就停止当前流的所有轨道，重新请求媒体流，最多重试3次，不要用无限轮询死等状态变更

注意：所有摄像头初始化逻辑必须绑定在用户点击、触摸等直接交互事件的回调里触发，不要在页面自动加载时直接调用，否则会被iOS的自动播放策略拦截。

参考实现代码 #

// 页面初始化阶段就创建video并挂载到DOM
const video = document.createElement('video');
// 补全所有iOS需要的属性
video.muted = true;
video.autoplay = true;
video.playsInline = true;
video.setAttribute('webkit-playsinline', 'true');
video.setAttribute('playsinline', 'true');
// 初始隐藏，避免显示异常
video.style.position = 'fixed';
video.style.opacity = '0';
video.style.pointerEvents = 'none';
document.body.appendChild(video);

let retryCount = 0;
const MAX_RETRY = 3;

async function initCamera() {
  try {
    // 先只请求视频轨，降低卡死概率
    const stream = await navigator.mediaDevices.getUserMedia({
      video: {
        facingMode: 'environment'
        // 初始不加分辨率约束，播放成功后再调整
      }
    });
    video.srcObject = stream;
    // 主动触发加载
    video.load();

    // 超时控制
    const timeoutId = setTimeout(() => {
      if (video.readyState < 2) {
        // 加载失败，释放现有资源重试
        stream.getTracks().forEach(track => track.stop());
        if (retryCount < MAX_RETRY) {
          retryCount++;
          initCamera();
        }
      }
    }, 3000);

    // 等待播放成功
    await video.play();
    clearTimeout(timeoutId);
    // 播放成功后再加音频轨、调整分辨率、开启controls
    video.controls = true;
    const audioStream = await navigator.mediaDevices.getUserMedia({audio: true});
    audioStream.getAudioTracks().forEach(track => stream.addTrack(track));
    // 这里可以再调用getCapabilities获取设备支持参数，调整视频分辨率
  } catch (e) {
    console.error('摄像头初始化失败', e);
    if (retryCount < MAX_RETRY) {
      retryCount++;
      initCamera();
    }
  }
}

// 绑定到用户点击事件触发，不要自动执行
document.querySelector('#startCameraBtn').addEventListener('click', initCamera);

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