【flutter3 camera】获取图像流并编码为base64以json格式发送服务器_flutter base64

本人萌新，花一天时间，教程+ChatGPT+百度，搞了这么一个Demo出来，发出来互相学习。
我的目的是做实时图像识别，即我这边处理每一帧的相机预览流，发送给服务器，获得识别结果，将矩形框绘制到屏幕上。这篇博客只包含获取相机画面，转换成jpeg，压缩，旋转，编码至base64，json http post请求，这几部分。

主要点：

1. 设置 CameraController 构造参数中的 imageFormatGroup 为 ImageFormatGroup.jpeg
2. 配置预览图像流的订阅，_streamSubscription = _controller.startImageStream()；
3. 在预览流处理部分中，调用 convertImageToBase64() 进行jpeg，压缩，旋转，编码至base64这几步操作，构建map作为json数据的前身，作为参数使用 httpPost() 请求服务器；
4. 若服务器接收不到数据，请先用 postman 这个软件对服务器做一下 post 测试，图中为json post请求页面。
   

注意点：x86虚拟机可能会有问题（闪退，我没深究原因），我的 arm64 真机完全没问题。我只会搞安卓，所以ios行不行我不清楚。运行总体来说比较流畅。

依赖部分：

dependencies:
  flutter:
    sdk: flutter
  camera:
  path:
  path_provider:
  image:
  http:
1
2
3
4
5
6
7
8

代码部分：
最底下有一些封装的工具类函数
英文注释是ChatGPT生成的，不过内容都是对的，可以阅读一下。

import 'dart:async';
import 'dart:io';
// import 'dart:typed_data';

import 'package:camera/camera.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_image_compress/flutter_image_compress.dart';

import 'dart:convert';
// import 'package:flutter_image_compress/flutter_image_compress.dart';
// import 'package:image/image.dart' as img;
import 'package:path_provider/path_provider.dart';
import 'package:http/http.dart' as http;

Future<void> main() async {
  // Ensure that plugin services are initialized so that `availableCameras()`
  // can be called before `runApp()`
  WidgetsFlutterBinding.ensureInitialized();

  // Obtain a list of the available cameras on the device.
  final cameras = await availableCameras();

  // Get a specific camera from the list of available cameras.
  final firstCamera = cameras.first;

  runApp(
    MaterialApp(
      theme: ThemeData.dark(),
      home: TakePictureScreen(
        // Pass the appropriate camera to the TakePictureScreen widget.
        camera: firstCamera,
      ),
    ),
  );
}

// A screen that allows users to take a picture using a given camera.
class TakePictureScreen extends StatefulWidget {
  const TakePictureScreen({
    super.key,
    required this.camera,
  });

  final CameraDescription camera;

  @override
  TakePictureScreenState createState() => TakePictureScreenState();
}

class TakePictureScreenState extends State<TakePictureScreen> {
  late CameraController _controller;

  late Future<void> _initializeControllerFuture;

  late StreamSubscription<CameraImage> _streamSubscription;

  bool isProcessing = false;
  // 手机与电脑处于同一个局域网，没有用模拟器，所以不用那个 10.开头的ip
  final url = Uri.parse('http://192.168.2.151:5000/imageUpload');

  // final GlobalKey cameraViewGlobalKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    // To display the current output from the Camera,
    // create a CameraController.
    _controller = CameraController(
      // Get a specific camera from the list of available cameras.
      widget.camera,
      // Define the resolution to use.
      ResolutionPreset.veryHigh,
      enableAudio: false,
      imageFormatGroup: ImageFormatGroup.jpeg,
    );

    // Next, initialize the controller. This returns a Future.
    _initializeControllerFuture = _controller.initialize().then((value) {
      _streamSubscription = _controller.startImageStream(
        (CameraImage image) async {
          // 丢弃没能力处理的图像帧
          if (isProcessing) return;

          isProcessing = true;

          // print("image size:[${image.width},${image.height}]");
          String base64String = await convertImageToBase64(image);

          // 将 base64 写入文件，方便测试
          // await (await _getLocalFile()).writeAsString(base64String);

          /// 定义一个map，用于向服务器发 json
          Map<String, dynamic> data = {
            'base64': base64String,
            'PreSize': [720, 1280],
            'ViewSize': [360, 640]
          };

          httpPost(data, url, handleRespones, handleErrors);

          isProcessing = false;
        },
      ) as StreamSubscription<CameraImage>;
    });
  }

  @override
  void dispose() {
    // Dispose of the controller when the widget is disposed.
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Take a picture')),
      // You must wait until the controller is initialized before displaying the
      // camera preview. Use a FutureBuilder to display a loading spinner until the
      // controller has finished initializing.
      body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // If the Future is complete, display the preview.
            return CameraPreview(_controller);
          } else {
            // Otherwise, display a loading indicator.
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

// ----------------------------- Utils -----------------------------------------

/// 相机图像流 转 jpeg，压缩旋转后再转 base64
Future<String> convertImageToBase64(CameraImage image) async {
  // 将CameraImage转换为Uint8List格式
  final Uint8List bytes = _concatenatePlanes(image.planes);

  // 使用flutter_image_compress库将图像压缩为JPEG格式
  final compressedBytes = await FlutterImageCompress.compressWithList(
    bytes,
    format: CompressFormat.jpeg,
    quality: 70, // JPEG图像的压缩质量（1-100）
    rotate: 90, // 图片方向不对，需要旋转一下
    minWidth: 640, // 图片还未旋转，高度与宽度是反的。 压缩后的像素大小
    minHeight: 360,
  );

  final base64String = base64Encode(compressedBytes);

  return base64String;
}

/// 辅助函数，将CameraImage的plane组合为Uint8List格式
Uint8List _concatenatePlanes(List<Plane> planes) {
  final WriteBuffer allBytes = WriteBuffer();
  for (Plane plane in planes) {
    allBytes.putUint8List(plane.bytes);
  }
  return allBytes.done().buffer.asUint8List();
}

/// 获取 temp 目录，安卓为 "data/data/app-package/cache/"
Future<File> _getLocalFile() async {
  // 获取应用目录
  String dir = (await getTemporaryDirectory()).path;
  return File('$dir/base64.txt');
}

/// 以 json 做参数，post 请求目标服务器；
/// data: 用 map 装的 json 数据；
/// url：服务器链接；
/// handleRespones：处理服务器返回数据；
/// handleErrors：处理 handleRespones 中抛出的异常
void httpPost(Map data, var url, Function(http.Response) handleRespones,
    Function(Error) handleErrors) {
  // 将Map对象编码为JSON格式的字符串
  var body = json.encode(data);

  http.post(url,
      body: body,
      headers: {'Content-Type': 'application/json'}).then((response) {
    handleRespones(response);
  }).catchError((error) {
    handleErrors(error);
  });
}

void handleRespones(http.Response response) {
  print('Response status: ${response.statusCode}');
  print('Response body: ${response.body}');
}

void handleErrors(Error error) {
  print('Error: $error');
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203