BioPass ID Face Liveness SDK Flutter

Quick Start Guide • Prerequisites • Installation • How to use • LicenseKey • FaceLivenessConfig • Something else • Changelog • Support

Quick Start Guide #

First, you will need a license key to use the biopassid_face_liveness_sdk. To get your license key contact us through our website BioPass ID. #

Check out our official documentation for more in depth information on BioPass ID.

1. Prerequisites: #

- A device with a camera
- License key
- Internet connection is required to verify the license

2. Installation #

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

Android #

Change the minimum Android sdk version to 24 (or higher) in your android/app/build.gradle file.

minSdkVersion 24

3. How to use #

Basic Example #

To call Face Liveness in your Flutter project is as easy as follow:

import 'package:biopassid_face_liveness_sdk/biopassid_face_liveness_sdk.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Face Liveness Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late FaceLivenessController controller;

  @override
  void initState() {
    super.initState();
    final config = FaceLivenessConfig(licenseKey: 'your-license-key');
    controller = FaceLivenessController(
      config: config,
      onFaceCapture: (image, captureResult) {
        print('Image: $image');
        print('onFaceCapture: $captureResult');
      },
      onFaceDetected: (captureResult) {
        print('onFaceDetected: $captureResult');
      },
    );
  }

  void takeFace() async {
    await controller.takeFace();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Face Liveness Demo')),
      body: Center(
        child: ElevatedButton(
          onPressed: takeFace,
          child: const Text('Capture Face'),
        ),
      ),
    );
  }
}

Example using http package to call the BioPass ID API #

For this example we used the Liveness from the Multibiometrics plan.

First, add the http package. To install the http package, add it to the dependencies section of the pubspec.yaml file. You can find the latest version of the http package the pub.dev.

dependencies:
  http: <latest_version>

Additionally, in your AndroidManifest.xml file, add the Internet permission.

<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />

Here, you will need an API key to be able to make requests to the BioPass ID API. To get your API key contact us through our website BioPass ID.

import 'dart:convert';

import 'package:biopassid_face_liveness_sdk/biopassid_face_liveness_sdk.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Face Liveness Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late FaceLivenessController controller;

  @override
  void initState() {
    super.initState();
    final config = FaceLivenessConfig(licenseKey: 'your-license-key');
    controller = FaceLivenessController(
      config: config,
      onFaceCapture: (image, captureResult) async {
        // Encode image to base64 string
        final imageBase64 = base64Encode(image);

        // Create url
        final url =
            Uri.https('api.biopassid.com', 'multibiometrics/v2/liveness');

        // Create headers passing your api key
        final headers = {
          'Content-Type': 'application/json',
          'Ocp-Apim-Subscription-Key': 'your-api-key'
        };

        // Create json body
        final body = json.encode({
          'Spoof': {'Image': imageBase64}
        });

        // Execute request to BioPass ID API
        final response = await http.post(
          url,
          headers: headers,
          body: body,
        );

        // Handle API response
        print('Response status: ${response.statusCode}');
        print('Response body: ${response.body}');
      },
      onFaceDetected: (captureResult) {
        print('onFaceDetected: $captureResult');
      },
    );
  }

  void takeFace() async {
    await controller.takeFace();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Face Liveness Demo')),
      body: Center(
        child: ElevatedButton(
          onPressed: takeFace,
          child: const Text('Capture Face'),
        ),
      ),
    );
  }
}

4. LicenseKey #

First, you will need a license key to use the biopassid_face_liveness_sdk. To get your license key contact us through our website BioPass ID. #

To use biopassid_face_liveness_sdk you need a license key. To set the license key needed is simple as setting another attribute. Simply doing:

final config = FaceLivenessConfig(licenseKey: 'your-license-key');

5. Getting face capture #

You can pass a function callback to receive the captured image. You can write you own callback following this example:

final config = FaceLivenessConfig(licenseKey: 'your-license-key');
final controller = FaceLivenessController(
    config: config,
    onFaceCapture: (image, captureResult) {
        print('Image: ${image.first}');
        print('onFaceCapture: $captureResult');
    },
    onFaceDetected: (captureResult) {
        print('onFaceDetected: $captureResult');
    },
);
await controller.takeFace();

FaceLivenessFaceCaptureResult #

FaceLivenessConfig #

You can also use pre-build configurations on your application, so you can automatically start using multiples services and features that better suit your application. You can instantiate each one and use it's default properties, or if you prefer you can change every config available. Here are the types that are supported right now:

FaceLivenessConfig #

Default configs:

final defaultConfig = FaceLivenessConfig(
  licenseKey: '',
  resolutionPreset: FaceLivenessResolutionPreset.veryHigh,
  fontFamily: 'facelivenesssdk_ic_close',
  faceDetection: FaceLivenessDetectionOptions(
    timeToCapture: 3000,
    maxFaceDetectionTime: 60000,
    minFaceProp: 0.1,
    maxFaceProp: 0.4,
    minFaceWidth: 150,
    minFaceHeight: 150,
    ied: 90,
    bboxPad: 20,
    faceDetectionThresh: 0.5,
    rollThresh: 4.0,
    pitchThresh: 4.0,
    yawThresh: 4.0,
    closedEyesThresh: 0.7,
    smilingThresh: 0.7,
    tooDarkThresh: 50,
    tooLightThresh: 170,
  ),
  mask: FaceLivenessMaskOptions(
    enabled: true,
    backgroundColor: const Color(0xCC000000),
    frameColor: const Color(0xFFFFFFFF),
    frameEnabledColor: const Color(0xFF16AC81),
    frameErrorColor: const Color(0xFFE25353),
  ),
  titleText: FaceLivenessTextOptions(
    enabled: true,
    content: 'Capturing Face',
    textColor: const Color(0xFFFFFFFF),
    textSize: 20,
  ),
  loadingText: FaceLivenessTextOptions(
    enabled: true,
    content: 'Processing...',
    textColor: const Color(0xFFFFFFFF),
    textSize: 14,
  ),
  helpText: FaceLivenessTextOptions(
    enabled: true,
    content: 'Fit your face into the shape below',
    textColor: const Color(0xFFFFFFFF),
    textSize: 14,
  ),
  feedbackText: FaceLivenessFeedbackTextOptions(
    enabled: true,
    messages: FaceLivenessFeedbackTextMessages(
      noDetection: 'No faces detected',
      multipleFaces: 'Multiple faces detected',
      faceCentered: 'Face centered. Do not move',
      tooClose: 'Turn your face away',
      tooFar: 'Bring your face closer',
      tooLeft: 'Move your face to the right',
      tooRight: 'Move your face to the left',
      tooUp: 'Move your face down',
      tooDown: 'Move your face up',
      faceAngleMisaligned: 'Misaligned face angle',
      closedEyes: 'Open your eyes',
      smiling: 'Do not smile',
      tooDark: 'Too dark',
      tooLight: 'Too light',
    ),
    textColor: const Color(0xFFFFFFFF),
    textSize: 14,
  ),
  backButton: FaceLivenessButtonOptions(
    enabled: true,
    backgroundColor: const Color(0x00000000),
    buttonPadding: 0,
    buttonSize: const Size(56, 56),
    iconOptions: FaceLivenessIconOptions(
      enabled: true,
      iconFile: 'facelivenesssdk_ic_close',
      iconColor: const Color(0xFFFFFFFF),
      iconSize: const Size(32, 32),
    ),
    labelOptions: FaceLivenessTextOptions(
      enabled: false,
      content: 'Back',
      textColor: const Color(0xFFFFFFFF),
      textSize: 14,
    ),
  ),
);

FaceLivenessDetectionOptions #

FaceLivenessMaskOptions #

FaceLivenessFeedbackTextOptions #

FaceLivenessFeedbackTextMessages #

FaceLivenessButtonOptions #

FaceLivenessIconOptions #

FaceLivenessTextOptions #

FaceLivenessResolutionPreset (enum) #

How to change font family #

on Android side #

You can use the default font family or set one of your own. To set a font family, create a folder font under res directory in your android/app/src/main/res. Download the font which ever you want and paste it inside font folder. All font file names must be only: lowercase a-z, 0-9, or underscore. The structure should be some thing like below.

on Dart side #

Finally, just set the font family passing the name of the font file when instantiating FaceLivenessConfig in your Flutter app.

final config = FaceLivenessConfig(
  licenseKey: 'your-license-key',
  fontFamily: 'roboto_mono_bold_italic',
);

How to change icon #

on Android side #

You can use the default icons or define one of your own. To set a icon, download the icon which ever you want and paste it inside drawable folder in your android/app/src/main/res. All icon file names must be only: lowercase a-z, 0-9, or underscore. The structure should be some thing like below.

on Dart side #

Finally, just set the icon passing the name of the icon file when instantiating FaceLivenessConfig in your Flutter app.

final config = FaceLivenessConfig(licenseKey: 'your-license-key');
// Changing back button icon
config.backButton.iconOptions.iconFile = 'ic_baseline_camera';

Something else #

Do you like the Face SDK and would you like to know about our other products? We have solutions for fingerprint detection and digital signature capture.

• Face SDK
  • Face SDK Flutter
  • Face SDK React Native
  • Face SDK JavaScript
• Fingerprint SDK
  • Fingerprint SDK Flutter
  • Fingerprint SDK React Native
• Signature SDK
  • Signature SDK Flutter
  • Signature SDK React Native

Changelog #

v1.0.0 #

• Added documentation;
• Added face detection on Android;
• Added auto capture on Android.