SkillAgentSearch skills...

CamerAwesome

๐Ÿ“ธ Embedding a camera experience within your own app shouldn't be that hard. A flutter plugin to integrate awesome Android / iOS camera experience.

Install / Use

/learn @Apparence-io/CamerAwesome
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

<a href="https://apparence.io"> <img src="https://raw.githubusercontent.com/Apparence-io/camera_awesome/master/docs/img/apparence.png" width="100%" /> </a> <div style="margin-top:40px"> <img src="https://raw.githubusercontent.com/Apparence-io/camera_awesome/master/docs/img/preview.png" width="100%" /> <img src="https://raw.githubusercontent.com/Apparence-io/camera_awesome/master/docs/img/features.png" width="100%" style="margin-top:32px" /> </div> <a href="https://apparencekit.dev" style="margin-top:32px"> <img src="https://raw.githubusercontent.com/Apparence-io/camera_awesome/master/docs/img/flutter_template.png" width="100%" alt="ApparenceKit Flutter template to bootstrap your next app" /> </a>

This plugin is also available as a template in ApparenceKit.<br>

<br>

CamerAwesome

<div> <a href="https://github.com/Solido/awesome-flutter"> <img alt="Awesome Flutter" src="https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true&style=for-the-badge" /> </a> <a href="https://github.com/Apparence-io/camera_awesome"> <img src="https://img.shields.io/github/stars/Apparence-io/camera_awesome.svg?style=for-the-badge&logo=github&colorB=green&label=Stars" alt="Star on Github"> </a> <a href="https://pub.dev/packages/camerawesome"> <img src="https://img.shields.io/pub/v/camerawesome.svg?style=for-the-badge&label=Pub" alt="Star on Github"> </a> </div>

en zh

๐Ÿ“ธ Embedding a camera experience within your own app shouldn't be that hard. <br> A flutter plugin to integrate awesome Android / iOS camera experience.<br>

<br> This package provides you with a fully customizable camera experience that you can use within your app.<br> Use our awesome built-in interface or customize it as you want.
<div style="margin-top:16px;margin-bottom:16px"> <a href="https://docs.page/Apparence-io/camera_awesome" style=""> <img src="https://raw.githubusercontent.com/Apparence-io/camera_awesome/master/docs/img/doc.png" width="100%" /> </a> </div>

Migration guide

If you are migrating from version 1.x.x to 2.x.x, please read the migration guide.

Native features

Here's all native features that cameraAwesome provides to the flutter side.

| Features | Android | iOS | | :--------------------------------------- | :-----: | :-: | | ๐Ÿ”– Ask permissions | โœ… | โœ… | | ๐ŸŽฅ Record video | โœ… | โœ… | | ๐Ÿ“น Multi camera (๐Ÿšง BETA) | โœ… | โœ… | | ๐Ÿ”ˆ Enable/disable audio | โœ… | โœ… | | ๐ŸŽž Take photos | โœ… | โœ… | | ๐ŸŒ† Photo live filters | โœ… | โœ… | | ๐ŸŒค Exposure level | โœ… | โœ… | | ๐Ÿ“ก Broadcast live image stream | โœ… | โœ… | | ๐Ÿงช Image analysis (barcode scan & more.) | โœ… | โœ… | | ๐Ÿ‘ Zoom | โœ… | โœ… | | ๐Ÿ“ธ Device flash support | โœ… | โœ… | | โŒ›๏ธ Auto focus | โœ… | โœ… | | ๐Ÿ“ฒ Live switching camera | โœ… | โœ… | | ๐Ÿ˜ตโ€๐Ÿ’ซ Camera rotation stream | โœ… | โœ… | | ๐Ÿค Background auto stop | โœ… | โœ… | | ๐Ÿ”€ Sensor type switching | โ›”๏ธ | โœ… | | ๐Ÿชž Enable/disable front camera mirroring | โœ… | โœ… |


๐Ÿ“–ย  Installation and usage

Add the package in your pubspec.yaml

dependencies:
  camerawesome: ^2.0.0-dev.1
  ...

Platform specific setup

  • iOS

Add these on 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

Change the minimum SDK version to 21 (or higher) in android/app/build.gradle:

minSdkVersion 21

In order to be able to take pictures or record videos, you may need additional permissions depending on the Android version and where you want to save them. Read more about it in the official documentation.

WRITE_EXTERNAL_STORAGE is not included in the plugin starting with version 1.4.0.

If you want to record videos with audio, add this permission to your 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>

You may also want to save location of your pictures in exif metadata. In this case, add below permissions:

<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>
<details> <summary>โš ๏ธ Overriding Android dependencies</summary>

Some of the dependencies used by CamerAwesome can be overriden if you have a conflict. Change these variables to define which version you want to use:

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"
  }
  // ...
}

Only change these variables if you are sure of what you are doing.

For example, setting the Play Services Location version might help you when you have conflicts with other plugins. The below line shows an example of these conflicts:

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

Import the package in your Flutter app

import 'package:camerawesome/camerawesome_plugin.dart';

๐Ÿ‘Œ Awesome built-in interface

Just use our builder. <br> That's all you need to create a complete camera experience within your app.

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

CamerAwesome default UI

This builder can be customized with various settings:

  • A theme.
  • Builders for each part of the screen.
  • Initial camera setup.
  • Preview positioning.
  • Additional preview decoration.
  • And much more!

Here is an example:

Customized UI

Check the full documentation to learn more.


๐ŸŽจ Creating a custom interface

If the awesome() factory is not enough, you can use custom() instead.

It provides a builder property that lets you create your own camera experience. <br>

The camera preview will be visible behind what you will provide to the builder.

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

See more in documentation

Working with the custom builder

Here is the definition of our builder method.

typedef CameraLayoutBuilder = Widget Function(CameraState cameraState, PreviewSize previewSize, Rect previewRect);
<br> The only thing you have access to manage the camera is the cameraState.<br> Depending on which state is our camera experience you will have access to some different method. <br> `previewSize` and `previewRect` might be used to position your UI around or on top of the camera preview. <br>

How do CamerAwesome states work ?

Using the state you can do anything you need without having to think about the camera flow<br><br>

  • On app start we are in PreparingCameraState<br>
  • Then depending on the initialCaptureMode you set you will be PhotoCameraState or VideoCameraState<br>
  • Starting a video will push a VideoRecordingCameraState<br>
  • Stopping the video will push back the VideoCameraState<br> <br> Also if you want to use some specific function you can use the when method so you can write like this.<br>
state.when(
  onPhotoMode: (photoState) => photoState.start(),
  onVideoMode: (videoState) => videoState.start(),
  onVideoRecordingMode: (videoState) => videoState.pause(),
);

See more in documentation

<br>

๐Ÿ Listen to picture or video event

Using the onMediaCaptureEvent you can listen to any media capture event and do whatever you want with it.

onMediaCaptureEvent: (event) {
    switch ((event.status, event.isPicture, event.isVideo)) {
        case (MediaCaptureStatus.capturing, true, false):
            debugPrint('Capturing picture...');
        case (MediaCaptureStatus.success, true, false):
            event.captureRequest.when(
                single: (single) {
                debugPrint('Picture saved: ${single.file?.path}');
                },
                multiple: (multiple) {
                multiple.fileBySensor.forEach((key, value) {
                    debugPrint('multiple image taken: $key ${value?.path}');
                });
                }
View on GitHub
GitHub Stars1.2k
CategoryDevelopment
Updated3d ago
Forks382

Languages

Dart

Security Score

100/100

Audited on Apr 4, 2026

No findings