CamerAwesome

? 在您自己的应用程序中嵌入相机体验应该不是那么难。一个集成超棒的 Android/iOS 相机体验的 Flutter 插件。

此包为您提供了完全可自定义的相机体验，您可以在应用程序中使用。使用我们内置的超棒界面，或按您想要的方式进行自定义。

原生功能

以下是 CamerAwesome 为 Flutter 端提供的所有原生功能。

系统 Android iOS
? 请求权限 ✅ ✅
? 录制视频 ✅ ✅
? 启用/禁用音频 ✅ ✅
? 拍照 ✅ ✅
? 照片实时滤镜 ✅ ✅
? 曝光级别 ✅ ✅
? 广播实时图像流 ✅ ✅
? 图像分析（条形码扫描及更多。） ✅ ✅
? 缩放 ✅ ✅
? 设备闪光灯支持 ✅ ✅
⌛️ 自动对焦 ✅ ✅
? 实时切换相机 ✅ ✅
?‍? 相机旋转流 ✅ ✅
? 后台自动停止 ✅ ✅
? 传感器类型切换 ⛔️ ✅
? 启用/禁用前置摄像头镜像 ✅ ✅

?  安装和使用

在 pubspec.yaml 中添加该软件包

dependencies:
  camerawesome: ^1.3.0
  ...

平台特定设置

  • iOS

在 ios/Runner/Info.plist 中添加这些

<key>NSCameraUsageDescription</key>
<string>Your own description</string>

<key>NSMicrophoneUsageDescription</key>
<string>To enable microphone access when recording video</string>

<key>NSLocationWhenInUseUsageDescription</key>
<string>To enable GPS location access for Exif data</string>
  • Android

在 android/app/build.gradle 中将最小 SDK 版本更改为 21（或更高）

minSdkVersion 21

为了能够拍照或录制视频，您可能需要额外的权限，具体取决于 Android 版本以及您要保存它们的位置。在 官方文档 中阅读更多相关信息。

从 1.4.0 版本开始，插件中不包含 WRITE_EXTERNAL_STORAGE。

如果您想录制带音频的视频，请将此权限添加到您的 AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.example.yourpackage">
  <uses-permission android:name="android.permission.RECORD_AUDIO" />

  <!-- Other declarations -->
</manifest>

您可能还想将照片的位置保存在 exif 元数据中。在这种情况下，请添加以下权限

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.example.yourpackage">
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

  <!-- Other declarations -->
</manifest>
⚠️ 覆盖 Android 依赖项

CamerAwesome 使用的一些依赖项可以在您遇到冲突时被覆盖。更改这些变量以定义您要使用的版本

buildscript {
  ext.kotlin_version = '1.7.10'
  ext {
    // You can override these variables
    compileSdkVersion = 33
    minSdkVersion = 24 // 21 minimum
    playServicesLocationVersion = "20.0.0"
    exifInterfaceVersion = "1.3.4"
  }
  // ...
}

只有在您确定自己在做什么时才更改这些变量。

例如，设置 Play Services Location 版本可能有助于您与其他插件的冲突。下面一行显示了这些冲突的一个示例

java.lang.IncompatibleClassChangeError: Found interface com.google.android.gms.location.ActivityRecognitionClient, but class was expected

在您的 Flutter 应用中导入该包

import 'package:camerawesome/camerawesome_plugin.dart';

? 超棒的内置界面

只需使用我们的构建器。这就是您在应用程序中创建完整相机体验所需的一切。

CameraAwesomeBuilder.awesome(
  saveConfig: SaveConfig.image(
    pathBuilder: _path(),
  ),
  onMediaTap: (mediaCapture) {
    OpenFile.open(mediaCapture.filePath);
  },
),

CamerAwesome default UI

此构建器可以通过各种设置进行自定义

  • 主题
  • 屏幕各部分的构建器
  • 初始相机设置
  • 预览定位
  • 额外的预览装饰
  • 以及更多！

这是一个示例。

Customized UI

请查看 完整文档 以了解更多信息。

? 创建自定义界面

如果 awesome() 工厂不够用，您可以使用 custom() 替代。

它提供了一个 builder 属性，让您可以创建自己的相机体验。

相机预览将在您提供给构建器的内容后面可见。

CameraAwesomeBuilder.custom(
  saveConfig: SaveConfig.image(pathBuilder: _path()),
  builder: (state, previewSize, previewRect) {
    // create your interface here
  },
)

有关更多信息，请参阅 文档

使用自定义构建器

这是我们构建器方法的定义。

typedef CameraLayoutBuilder = Widget Function(CameraState cameraState, PreviewSize previewSize, Rect previewRect);

您唯一可以管理相机的是 cameraState。根据我们的相机体验处于哪种状态，您将可以访问一些不同的方法。previewSize 和 previewRect 可用于在相机预览周围或之上定位您的 UI。

CamerAwesome 状态如何工作？

使用状态，您可以执行任何您需要的操作，而无需考虑相机流程

  • 在应用程序启动时，我们处于 PreparingCameraState
  • 然后，根据您设置的 initialCaptureMode，您将处于 PhotoCameraState 或 VideoCameraState
  • 开始视频将推送 VideoRecordingCameraState
  • 停止视频将推回 VideoCameraState

    此外，如果您想使用一些特定功能，您可以使用 when 方法，这样您就可以这样写。

state.when(
  onPhotoMode: (photoState) => photoState.start(),
  onVideoMode: (videoState) => videoState.start(),
  onVideoRecordingMode: (videoState) => videoState.pause(),
);

有关更多信息，请参阅 文档

? 分析模式

使用此可实现

  • QR 码扫描。
  • 面部识别。
  • AI 对象检测。
  • 实时视频聊天。以及更多 ?

Face AI

您可以在 example 目录中找到使用 MLKit 的示例。上面的示例来自 ai_analysis_faces.dart。它检测人脸并绘制它们的轮廓。

还可以使用 MLKit 读取条形码

Barcode scanning

查看 ai_analysis_barcode.dart 和 preview_overlay_example.dart 获取示例，或查看 文档。

如何使用它

CameraAwesomeBuilder.awesome(
  saveConfig: SaveConfig.image(
    pathBuilder: _path(),
  ),
  onImageForAnalysis: analyzeImage,
  imageAnalysisConfig: AnalysisConfig(
        // Android specific options
        androidOptions: const AndroidAnalysisOptions.nv21(
            // Target width (CameraX will chose the closest resolution to this width)
            width: 250,
        ),
        // Wether to start automatically the analysis (true by default)
        autoStart: true,
        // Max frames per second, null for no limit (default)
        maxFramesPerSecond: 20,
    ),

MLkit 建议在 Android 上使用 nv21 格式。bgra8888 是 iOS 格式。对于机器学习，您不需要全分辨率图像（720 或更低应该足够，并且可以简化计算）

在 文档 中了解更多关于图像分析配置的信息。

还可以查看有关如何使用 MLKit 读取条形码 和 检测人脸 的详细说明。

⚠️ 在 Android 上，有些设备不支持同时进行视频录制和图像分析。

  • 如果不支持，图像分析将被忽略。
  • 您可以使用 CameraCharacteristics .isVideoRecordingAndImageAnalysisSupported(Sensors.back) 检查设备是否具有此功能。

? 更新传感器配置

通过状态，您可以访问 SensorConfig 类。

功能 注释
setZoom 更改缩放
setFlashMode 在 NONE、ON、AUTO、ALWAYS 之间更改闪光灯
setBrightness 手动更改亮度级别（最好自动设置）
setMirrorFrontCamera 设置前置摄像头的镜像

所有这些配置都可以通过流进行监听，因此您的 UI 可以根据实际配置自动更新。

? 照片实时滤镜

使用内置界面为您的照片应用实时滤镜

Built-in live filters

您也可以选择从一开始就使用特定滤镜

CameraAwesomeBuilder.awesome(
  // other params
  filter: AwesomeFilter.AddictiveRed,
)

或以编程方式设置滤镜

CameraAwesomeBuilder.custom(
  builder: (cameraState, previewSize, previewRect) {
    return cameraState.when(
      onPreparingCamera: (state) =>
      const Center(child: CircularProgressIndicator()),
      onPhotoMode: (state) =>
          TakePhotoUI(state, onFilterTap: () {
            state.setFilter(AwesomeFilter.Sierra);
          }),
      onVideoMode: (state) => RecordVideoUI(state, recording: false),
      onVideoRecordingMode: (state) =>
          RecordVideoUI(state, recording: true),
    );
  },
)

在 文档 中查看所有可用的滤镜。

GitHub

查看 Github