Flutter Web中Camera的startImageStream无法运行，报断言失败错误

你使用的camera包版本（0.9.8+1）不支持在Web平台（Chrome桌面/安卓Chrome）调用startImageStream方法，该版本的CameraController内部断言限制了此方法仅能在Android/iOS平台使用，Web环境触发断言失败报错。

1. 升级camera依赖到支持Web的版本 #

打开项目的pubspec.yaml文件，将camera依赖更新为最新稳定版（例如当前最新稳定版为^0.10.5+5），同时添加权限处理依赖（用于Web/移动端的相机权限请求）：

dependencies:
  flutter:
    sdk: flutter
  camera: ^0.10.5+5
  permission_handler: ^10.2.0

然后执行命令更新依赖：

flutter pub get

2. 配置Web平台权限 #

在项目的web/index.html文件中，添加相机权限相关配置，确保Web浏览器能正确请求相机权限：

<head>
  <!-- 原有内容 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 添加相机权限声明 -->
  <meta name="flutter-web-browser-config" content="camera=yes">
</head>

3. 修改代码适配Web平台 #

更新页面代码，添加平台判断、权限请求和错误处理：

// ignore_for_file: unused_local_variable, avoid_print, unused_element, unused_import, depend_on_referenced_packages, must_be_immutable, sized_box_for_whitespace
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/foundation.dart'; // 新增：用于平台判断
import 'package:heart_rate_app/networking/firebase_api.dart';
import 'package:heart_rate_app/networking/heart_rate_api.dart';
import 'dart:io' as io;
import 'package:path_provider/path_provider.dart';
import 'package:camera/camera.dart';
import 'package:cross_file_image/cross_file_image.dart';
import 'package:permission_handler/permission_handler.dart'; // 新增：权限处理

import '../utils/color_detector.dart';

class HomePage extends StatefulWidget {
  HomePage({Key? key, required this.cameras}) : super(key: key);
  List<CameraDescription> cameras;

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<CameraDescription> cameras = [];
  late CameraController controller;

  @override
  void initState() {
    super.initState();
    _initCamera(); // 替换原有初始化逻辑
  }

  // 新增：相机初始化+权限请求
  Future<void> _initCamera() async {
    // Web平台先请求相机权限
    if (kIsWeb) {
      final status = await Permission.camera.request();
      if (status != PermissionStatus.granted) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text("需要相机权限才能使用功能")),
        );
        return;
      }
    }

    controller = CameraController(widget.cameras[0], ResolutionPreset.high);
    try {
      await controller.initialize();
      if (mounted) setState(() {});
    } catch (e) {
      print("相机初始化失败: $e");
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("相机初始化失败: $e")),
      );
    }
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!controller.value.isInitialized) {
      return const Center(child: CircularProgressIndicator());
    }
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 100,
            width: 100,
            child: CameraPreview(controller),
          ),
          const SizedBox(height: 20,),
          ElevatedButton(
            onPressed: () async {
              try {
                await controller.startImageStream((CameraImage image) {
                  // 在这里处理图像流数据
                  print("收到图像帧");
                });
              } catch (e) {
                print("启动图像流失败: $e");
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text("启动图像流失败: $e")),
                );
              }
            },
            child: const Text("capture")),
        ],
      ),
    );
  }
}

4. 测试验证 #

• 运行Web项目：flutter run -d chrome
• 在安卓Chrome上测试：可以通过flutter run -d web-server --web-port=8080启动，然后在手机Chrome访问对应IP+端口。

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