iPhone端PWA中getUserMedia调用相机失效，浏览器中正常

问题根源 #

iOS的standalone/fullscreen模式PWA采用了和普通Safari不同的权限策略，自动触发的媒体设备请求会被静默拦截，且不会抛出错误，导致视频流无法正常加载，仅触发初始的loadstart、progress、suspend事件。

解决步骤 #

• 完善manifest权限声明
  在manifest.json中明确添加相机权限，并确保scope和start_url配置正确，避免权限范围被限制：

  {
    "name": "Test-App",
    "display": "standalone",
    "permissions": ["camera"],
    "scope": "/",
    "start_url": "/"
  }
  

• 通过用户交互触发权限请求
  iOS要求媒体权限请求必须由用户主动操作（如按钮点击）触发，不能在页面加载时自动调用。修改代码，添加触发按钮：

  const video = document.getElementById('video');
  const events = [
    'play', 'waiting', 'loadstart', 'progress', 'suspend',
    'durationchange', 'loadedmetadata', 'loadeddata', 
    'canplay', 'playing', 'canplaythrough', 'timeupdate'
  ];
  
  events.forEach(e => {
    video.addEventListener(e, () => {
      console.log(`${e} event fired`);
    });
  });
  
  // 添加触发按钮
  const startBtn = document.createElement('button');
  startBtn.id = 'startCamera';
  startBtn.textContent = '打开相机';
  document.body.appendChild(startBtn);
  
  document.getElementById('startCamera').addEventListener('click', () => {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ 
        video: { 
          facingMode: 'user', // 可选，指定前置/后置相机
          width: { ideal: 480 },
          height: { ideal: 480 }
        } 
      })
      .then(function(stream) {
        video.srcObject = stream;
        video.onloadedmetadata = () => {
          video.play();
        };
      })
      .catch(function(error) {
        console.log("相机调用失败:", error);
      });
    }
  });
  

• 优化视频元素属性
  保留playsinline属性（iOS要求该属性实现非全屏播放），移除不必要的crossorigin属性（本地媒体流无需跨域配置）：

  <video id="video" width="200" height="200" autoplay playsinline muted></video>
  

• 确认HTTPS环境
  PWA必须部署在HTTPS环境下（localhost开发环境除外），iOS对非HTTPS的PWA会限制媒体设备权限。

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