Flutter相机功能插件artemis_camera_kit的使用

Flutter相机功能插件artemis_camera_kit的使用

ArtemisCameraKit 使用原生 Android 和 iOS API 进行拍照和扫描条形码及文本识别。

主要特性:

  • 易于实现
  • 自动权限处理(无需第三方库)
  • 自动管理相机资源以减少电池使用并避免与其他基于相机的应用程序冲突(您也可以手动暂停和恢复相机)
  • fill 属性用于相机预览框架
  • 优化内存使用在拍照时
  • 在拍照和扫描条形码时使用 autoonoff 闪光模式

开始使用

安装

iOS

info.plist 中添加 <key>io.flutter.embedded_views_preview</key> 并设置值为 YES
同时添加 <key>Privacy - Camera Usage Description</key>

使用

创建一个 ArtemisCameraKitController 的实例,然后初始化 ArtemisCameraKitView 并传递 ArtemisCameraKitController 实例以进行更好的控制。

final controller = ArtemisCameraKitController();

在构建方法中使用该 Widget:

ArtemisCameraKitView(
  fill: true,
  initFlash: FlashMode.off,
  barcodeType: BarcodeType.allFormats,
  mode: UsageMode.barcodeScanner,
  onBarcodeRead: (b) {
    log("Barcode Read $b");
  },
)

或者,对于文本识别模式:

ArtemisCameraKitView(
  fill: true,
  initFlash: FlashMode.off,
  mode: UsageMode.ocrReader,
  onOcrRead: (o) {
    log("Text Read ${o.text}");
  },
)

暂停和恢复相机

此插件根据 Android 和 iOS 生命周期以及小部件可见性自动管理暂停和恢复相机,您也可以通过控制器随时调用这些方法。

controller.pauseCamera();
controller.resumeCamera();

拍照

此插件可以用于拍摄当前流的照片以便进行其他操作。

String? imgPath = await cameraKitController.takePicture();

条形码扫描或从图像中进行文本识别

此插件可以用于拍摄当前流的照片以便进行其他操作。

String? imgPath = await cameraKitController.takePicture();
OcrData? ocr = await cameraKitController.processImageFromPath(imgPath);
BarcodeData barcode = cameraKitController.getBarcodesFromImage(imgPath);

文本识别功能在 Android 上因 mlkit 限制而禁用

示例代码

以下是一个完整的示例代码,展示了如何使用 artemis_camera_kit 插件来实现相机功能。

import 'dart:convert';
import 'dart:developer';
import 'package:artemis_camera_kit/artemis_camera_kit_controller.dart';
import 'package:artemis_camera_kit/artemis_camera_kit_platform_interface.dart';
import 'package:artemis_camera_kit/artemis_camera_kit_view.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final ArtemisCameraKitController cameraKitController = ArtemisCameraKitController();
  List<String> barcodes = [];
  String address = "";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            children: [
              Wrap(
                direction: Axis.horizontal,
                children: [
                  TextButton(
                    onPressed: () {
                      cameraKitController.getCameraPermission().then((value) {
                        log(value.toString());
                      });
                    },
                    child: const Text("获取相机权限"),
                  ),
                  TextButton(
                    onPressed: () {
                      cameraKitController.initCamera(hasBarcodeReader: true).then((value) {});
                    },
                    child: const Text("初始化相机"),
                  ),
                  TextButton(
                    onPressed: () {
                      cameraKitController.changeFlashMode(mode: FlashMode.on);
                    },
                    child: const Text("开启闪光灯"),
                  ),
                  TextButton(
                    onPressed: () {
                      cameraKitController.changeFlashMode(mode: FlashMode.off);
                    },
                    child: const Text("关闭闪光灯"),
                  ),
                  TextButton(
                    onPressed: () {
                      cameraKitController.pauseCamera();
                    },
                    child: const Text("暂停相机"),
                  ),
                  TextButton(
                    onPressed: () {
                      cameraKitController.resumeCamera();
                    },
                    child: const Text("恢复相机"),
                  ),
                  TextButton(
                    onLongPress: () {
                      cameraKitController.getBarcodesFromImage(address).then((value) {
                        if (value == null) {
                          print("NULL Bar");
                        } else {
                          print(value.toJson());
                        }
                      });
                    },
                    onPressed: () {
                      cameraKitController.takePicture().then((imgPath) {
                        log(imgPath.toString());
                        if (imgPath != null) {
                          address = imgPath;
                          cameraKitController.processImageFromPath(imgPath).then((value) {
                            if (value == null) {
                              print("NULL OCR");
                            } else {
                              print(value.toJson());
                            }
                          });
                        }
                      });
                    },
                    child: const Text("拍照"),
                  ),
                ],
              ),
              Expanded(
                child: ArtemisCameraKitView(
                  fill: true,
                  initFlash: FlashMode.off,
                  mode: UsageMode.barcodeScanner,
                  onBarcodeRead: (c) {
                    log("barcode Read ${c}");
                  },
                  onOcrRead: (o) {
                    log("Text Read ${o.text}");
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter相机功能插件artemis_camera_kit的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter相机功能插件artemis_camera_kit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用 artemis_camera_kit 插件来实现 Flutter 应用中的相机功能的示例代码。这个示例将涵盖基本的相机预览、拍照和保存图片到设备存储的功能。

首先,确保你的 Flutter 项目中已经添加了 artemis_camera_kit 插件。在 pubspec.yaml 文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  artemis_camera_kit: ^最新版本号  # 请替换为实际发布的最新版本号

然后运行 flutter pub get 来安装依赖。

接下来,是主要的 Dart 代码实现:

1. 导入必要的包

import 'package:flutter/material.dart';
import 'package:artemis_camera_kit/artemis_camera_kit.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

2. 创建相机页面

class CameraPage extends StatefulWidget {
  @override
  _CameraPageState createState() => _CameraPageState();
}

class _CameraPageState extends State<CameraPage> {
  late CameraController cameraController;
  late Future<void> cameraFuture;

  @override
  void initState() {
    super.initState();
    cameraFuture = _requestCameraPermission();
  }

  Future<void> _requestCameraPermission() async {
    await CameraKit.requestPermissions();
    cameraController = CameraKit.cameraController;
    if (!cameraController.value.isInitialized) {
      await cameraController.initialize();
    }
  }

  Future<File?> _captureImage() async {
    final XFile? image = await cameraController.takePicture();
    if (image == null) return null;

    final String path = image.path;
    return File(path);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Camera Example'),
      ),
      body: FutureBuilder<void>(
        future: cameraFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return Center(
                child: Text(
                  'Error: ${snapshot.error}!',
                  style: TextStyle(color: Colors.red),
                ),
              );
            }

            return CameraPreview(cameraController);
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: async () async {
          final File? imageFile = await _captureImage();
          if (imageFile != null) {
            final String imagePath = imageFile.path;
            // 这里可以添加保存或显示图片的逻辑
            print('Captured image saved at $imagePath');
          }
        },
        tooltip: 'Capture Image',
        child: Icon(Icons.camera_alt),
      ),
    );
  }
}

3. 在主应用中使用相机页面

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Camera Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CameraPage(),
    );
  }
}

注意事项

  1. 权限处理:在实际应用中,你需要在 AndroidManifest.xmlInfo.plist 文件中添加相机和存储权限。
  2. 错误处理:在实际应用中,应添加更多的错误处理逻辑,例如检查相机是否可用,处理权限请求失败等。
  3. UI 定制:你可以根据需求定制相机预览和拍照按钮的 UI。

这个示例代码展示了如何使用 artemis_camera_kit 插件实现基本的相机功能。根据你的需求,你可以进一步扩展和定制这个示例。

回到顶部