camerakit_flutter 0.0.5

A camerakit plugin that provides developers with seamless integration and access to Snapchat's CameraKit features within their Flutter applications.

camerakit-flutter

An open-source SDK package for Flutter that provides developers with seamless integration and access to Snapchat's CameraKit features within their Flutter applications. Flutter developers now can access set configuration from Flutter for both platforms (IOS and Android), you can open CameraKit , get media results (Images and Videos) and get list of lenses against group ids.

Obtaining CameraKit Keys

Your App ID and API Token can be found in the Snap Kit Portal and is used to provide authorized access to Camera Kit remote services. For more information you can read the docs Android, IOS.

CAUTION

API Token is different for Production and Staging Environment. A watermark will be applied to the camera view when using the Staging API token.

Once you have access to the account, locate your groupIds, cameraKitLensId (optional) and cameraKitApiToken.

Now that you have obtained all your credentials, you can use it to initialize the Configuration class in your Flutter application as mentioned in the below section.

class Constants {
  /// List of group IDs for Camera Kit (TODO: Fill group ID here).
  static const List<String> groupIdList = ['your-group-ids'];
  /// optional: if you want to get single lense you can set it otherwise set empty sting
  /// The lens ID for Camera Kit (TODO: Fill lens ID here).
  static const cameraKitLensId = 'camera-kit-lens-id';
  /// The API token for Camera Kit in the staging environment (TODO: Fill API token here).
  static const cameraKitApiToken = 'your-api-token'; //TODO fill api token staging & production here
}

Installation

First, add camerakit_flutter: as a dependency in your pubspec.yaml file.

import 'package:camerakit_flutter/camerakit_flutter.dart';

Then run flutter pub get to install the package.

iOS

Add the following keys to your Info.plist file, located in

• NSCameraUsageDescription - describe why your app needs permission for the camera library. It's a privacy feature to ensure that apps don't access sensitive device features without the user's knowledge and consent.
• NSMicrophoneUsageDescription - used to explain to the user why the app needs access to the device's microphone.

	<key>NSCameraUsageDescription</key>
	<string>app need camera permission for showing camerakit lens</string>
	<key>NSMicrophoneUsageDescription</key>
	<string>app need microphone permission for recording a video</string>

Demo

https://github.com/DevCrew-io/camerakit-flutter/assets/136708738/63eb485d-1998-43f1-90ae-64193fde262e

Key Features

Passing CameraKit's credentials in Flutter

Access CameraKit in Flutter

Get List of lenses for given list of group ids

Get media results

Show list of lenses

Show camerakit's captured media

Set Configuration

Configuration class is used to pass all credentials required for Camerakit, you can pass list of Group ids to show all group lenses. You don't need to set separate credentials for iOS and Android.

final config = Configuration(
      Constants.cameraKitApiToken,
      Constants.groupIdList,
      Constants.cameraKitLensId,
    );
    _cameraKitFlutterImpl.setCredentials(config);

Access Camerakit in Flutter

You can access camerakit by just calling openCameraKit function. Before calling you need instance of CameraKitFlutterImpl to get required function

  late final _cameraKitFlutterImpl =
      CameraKitFlutterImpl(cameraKitFlutterEvents: this);
  await _cameraKitFlutterImpl.openCameraKit();

Get group lenses

To get group lenses you need to pass concerned list of group ids to the function.

 _cameraKitFlutterImpl.getGroupLenses(Constants.groupIdList);

Implement the interface CameraKitFlutterEvents to overirde receivedLenses function. you will get the List of Lens model.

class _MyAppState extends State<MyApp> implements CameraKitFlutterEvents {
  @override
  void receivedLenses(List<Lens> lensList) async {

    await Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => LensListView(lensList: lensList)));
  }
}

Get media results

Call openCamerakit function to open Camerakit,

  await _cameraKitFlutterImpl.openCameraKit();

After capturing image or recording video you will get the results in onCameraKitResult method.

  @override
  void onCameraKitResult(Map<dynamic, dynamic> result) {
    setState(() {
      _filePath = result["path"] as String;
      _fileType = result["type"] as String;
    });
  }

Show media

Here is example to show the image taken by camerakit.

class MediaResultWidget extends StatefulWidget {
  final String filePath;
  final String fileType;

  const MediaResultWidget(
      {super.key, required this.filePath, required this.fileType});

  @override
  State<MediaResultWidget> createState() => _CameraResultWidgetState();
}

class _CameraResultWidgetState extends State<MediaResultWidget> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();

    _controller = VideoPlayerController.file(File(widget.filePath))
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
    _controller.addListener(() {
      if (!_controller.value.isPlaying &&
          _controller.value.isInitialized &&
          (_controller.value.duration == _controller.value.position)) {
        //checking the duration and position every time
        setState(() {
          print(
              "*************** video paying  c o m p l e t e d *******************");
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('CameraKit Result'),
        ),
        floatingActionButton: widget.filePath.isNotEmpty &&
            widget.fileType == "video"
            ? FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        )
            : Container(),
        body: widget.filePath.isNotEmpty
            ? widget.fileType == 'video'
            ? Center(
          child: AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller),
          ),
        )
            : widget.fileType == 'image'
            ? Image.file(File(widget.filePath))
            : const Text("UnKnown File to show")
            : const Text("No File to show"));
  }
}

Show lens list

Here is example to show list of lenses.

class LensListView extends StatefulWidget {
  final List<Lens> lensList;

  const LensListView({super.key, required this.lensList});

  @override
  State<LensListView> createState() => _LensListWidgetState();
}

class _LensListWidgetState extends State<LensListView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lens List'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const SizedBox(
            height: 10,
          ),
          widget.lensList.isNotEmpty
              ? Expanded(
            child: ListView.separated(
                itemCount: widget.lensList.length,
                separatorBuilder: (BuildContext context, int index) =>
                const Divider(),
                itemBuilder: (context, index) => Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Row(
                    children: [
                      Image.network(
                        widget.lensList[index].thumbnail?[0] ?? "",
                        width: 70,
                        height: 70,
                      ),
                      const SizedBox(
                        width: 20,
                      ),
                      Text(
                        widget.lensList[index].name!,
                        style: const TextStyle(
                            fontSize: 16,
                            fontStyle: FontStyle.italic),
                      )
                    ],
                  ),
                )),
          )
              : Container()
        ],
      ),
    );
  }
}

Bugs and feature requests

Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Author

DevCrew I/O

Connect with Us:

Contributing

Contributions, issues, and feature requests are welcome!

Show your Support

Give a star if this project helped you.

Copyright & License

Code copyright 2023 DevCrew I/O. Code released under the MIT license.