Flutter Web使用camcode扫码时移动端Chrome调用摄像头一直加载如何解决

• 优先排查协议安全限制
  移动端Chrome要求摄像头权限申请必须在HTTPS环境下触发，仅localhost例外。你通过本地IP访问终端运行的开发服务时走的是HTTP协议，会被浏览器直接拦截权限申请流程，导致组件一直加载。
  临时调试可以开启Chrome不安全origin豁免：安卓端Chrome地址栏输入chrome://flags，搜索Insecure origins treated as secure，将你本地开发服务的IP+端口地址填入输入框，启用选项后重启浏览器即可绕过限制。
  正常开发/生产环境需要配置HTTPS，运行Flutter Web时添加SSL相关启动参数即可：
  flutter run -d chrome --web-port=8080 --web-hostname=0.0.0.0 --web-ssl-cert=证书文件路径 --web-ssl-key=密钥文件路径
  无正式证书可生成自签名证书，将证书安装到安卓设备的信任凭据中即可正常访问。
• 调整摄像头适配参数
  camcode官方示例的默认分辨率配置更适配桌面设备，移动端可能因硬件不支持对应分辨率导致加载失败，可手动指定移动端适配的低分辨率参数：

  CamCode(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    // 优先选择720P这类移动端普遍支持的分辨率
    preferredResolution: const Resolution(1280, 720),
    onBarcode: (scannedCode) {
      // 处理扫码逻辑
    },
  )
  

• 调整权限申请触发时机
  安卓Chrome禁止页面在无用户交互的情况下自动申请敏感权限，不要在页面初始化时直接加载CamCode组件，可以添加一个扫码触发按钮，用户点击后再渲染CamCode组件，避免权限申请被自动拦截。
• 排查摄像头枚举逻辑
  部分安卓设备默认枚举到的第一个摄像头是前置，可手动指定优先使用后置摄像头，避免调用到不符合预期的摄像头导致加载异常。

内容的提问来源于stack exchange，提问作者aru van housen