IOS主屏幕Web App中html5-qrcode相机无法正常工作求助

针对你遇到的iOS 17.5.1将网站添加到主屏幕后，html5-qrcode无法正常获取相机权限的问题，提供以下几个可行的解决方向：

• 严格遵循用户主动交互触发权限申请
  iOS 17.5+对Web App的权限申请逻辑做了收紧，必须在用户明确的点击、触摸等主动交互动作之后发起相机权限请求，不能在页面加载完成后自动请求。确保Html5Qrcode.start()方法是绑定在用户点击按钮的回调函数内执行，示例代码如下：

  // 给扫描按钮绑定点击事件
  document.querySelector('#start-scan').addEventListener('click', async () => {
    const qrScanner = new Html5Qrcode('scan-container');
    try {
      await qrScanner.start(
        { facingMode: 'environment' }, // 优先使用后置摄像头
        { fps: 15, qrbox: 200 },
        (text) => console.log('扫描结果:', text),
        (err) => console.warn('扫描错误:', err)
      );
    } catch (e) {
      console.error('相机启动失败:', e);
    }
  });
  

• 完善Web App的配置标签与Manifest
  除了apple-mobile-web-app-capable，补充必要的meta标签和manifest.json配置，确保Web App处于正确的独立运行模式：

  <!-- 添加到主屏幕的状态栏样式 -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <!-- Web App标题 -->
  <meta name="apple-mobile-web-app-title" content="二维码扫描">
  <!-- 关联Manifest文件 -->
  <link rel="manifest" href="/manifest.json">
  

  manifest.json中需明确指定display: standalone，确保Web App以独立窗口运行：

  {
    "display": "standalone",
    "name": "二维码扫描工具",
    "short_name": "扫码",
    "icons": [
      {
        "src": "/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ]
  }
  

• 手动确认系统权限设置
  部分情况下iOS 17.5.1会异常回收Web App的相机权限，可引导用户前往「设置」→ 找到你的Web App（在设置列表往下拉，找到对应应用名）→ 「相机」，确认权限设置为「允许」。

• 升级html5-qrcode到最新版本
  旧版本的html5-qrcode可能未适配iOS 17.5的权限机制，通过包管理器更新到最新版本：

  npm update html5-qrcode
  

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