Flutter Web应用移动端浏览器调用摄像头失败问题排查

问题背景 #

开发的Flutter Web摄像头Demo在MacBook Chrome中运行正常，但在移动端Chrome调用时报错，使用的依赖版本：

camera: ^0.11.0+1
video_player: ^2.8.6

移动端报错截图：

解决步骤 #

• 强制HTTPS访问：移动端Chrome要求摄像头权限必须在HTTPS环境下生效（本地localhost/IP访问除外）。部署到服务器时务必启用HTTPS；本地开发可通过flutter run -d chrome --web-port=8080 --web-hostname=0.0.0.0启动服务，用手机访问电脑IP+端口测试。
• 用户交互后请求权限：移动端浏览器会拦截自动触发的权限请求，必须在用户主动操作（如点击按钮）后再调用摄像头初始化逻辑，示例代码：

ElevatedButton(
  onPressed: () async {
    final cameras = await availableCameras();
    final controller = CameraController(
      cameras[0],
      ResolutionPreset.medium,
      enableAudio: false,
    );
    try {
      await controller.initialize();
      // 初始化成功后的逻辑
    } catch (e) {
      print('初始化失败: $e');
    }
  },
  child: const Text('打开摄像头'),
)

• 适配移动端摄像头参数：避免硬编码分辨率，使用ResolutionPreset预设值，让插件自动适配移动端摄像头的支持格式，减少兼容性问题。
• 检查浏览器版本：确保移动端Chrome版本在80以上，旧版本对MediaDevices API的支持不完善，可能导致权限请求失败。
• 添加错误捕获：在初始化代码中加入try-catch块，打印详细错误信息，帮助快速定位问题根源。

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