biopassid_face_sdk 1.2.1-alpha.1 biopassid_face_sdk: ^1.2.1-alpha.1 copied to clipboard
BioPass ID Face SDK Flutter plugin.
BioPass ID Face SDK Flutter
Key Features • Customizations • Quick Start Guide • FaceConfig • FaceEvent • Changelog • Support
Key features #
- Face Detection
- We ensure that there will be only one face in the capture.
- Face Positioning
- Ensure face position in your capture for better enroll and match.
- Auto Capture
- When a face is detected the capture will be performed in how many seconds you configure.
- Resolution Control
- Configure the image size thinking about the tradeoff between image quality and API's response time.
- Aspect Ratio Control
- Fully customizable interface
Customizations #
Increase the security of your applications without harming your user experience.
All customization available:
- Title Text
- Help Text
- Loading Text
- Font Family
- Face Frame
- Overlay
- Default Camera
- Capture button
Enable or disable components:
- Tittle text
- Help Text
- Capture button
- Button icons
- Flip Camera button
- Flash button
Change all colors:
- Overlay color and opacity
- Capture button color
- Capture button text color
- Flip Camera color
- Flash Button color
- Text colors
Quick Start Guide #
First, you will need a license key to use the biopassid_face_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: #
Android | iOS | |
---|---|---|
Support | SDK 21+ | iOS 13+ |
- A device with a camera
- License key
- Internet connection is required to verify the license
2. Installation #
First, add biopassid_face_sdk
as a dependency in your pubspec.yaml file.
Android #
Change the minimum Android sdk version to 21 (or higher) in your android/app/build.gradle
file.
minSdkVersion 21
Change the compile Android sdk version to 31 (or higher) in your android/app/build.gradle
file.
compileSdkVersion 31
Change the Kotlin version to 1.5.32 (or higher) in your android/build.gradle
file.
buildscript {
ext.kotlin_version = '1.5.32'
}
iOS #
Requires iOS 13.0 or higher.
Add two rows to the ios/Info.plist
:
- one with the key
Privacy - Camera Usage Description
and a usage description. - and one with the key
Privacy - Photo Library Usage Description
and a usage description.
If editing Info.plist
as text, add:
<key>NSCameraUsageDescription</key>
<string>Your camera usage description</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Your library usage description</string>
Then go into your project's ios folder and run pod install.
# Go into ios folder
$ cd ios
# Install dependencies
$ pod install
3. How to use #
Basic Example #
To call Face Capture in your Flutter project is as easy as follow:
import 'package:flutter/material.dart';
import 'package:biopassid_face_sdk/biopassid_face_sdk.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Face Capture Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final config =
FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
.setLicenseKey('your-license-key')
.setDefaultCameraPosition(FaceCameraLensDirection.FRONT)
.setShowFlipCameraButton(true)
.setStringsScreenTitle('Capturando Face')
.setStylesOverlayColor(const Color(0xCC000000));
void callback(FaceEvent event) {
// handle Face return
print('photo: ${event.photo}');
}
void openCamera() async {
await FaceSdk.buildCameraView(
config: config,
callback: callback,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Face Capture Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: openCamera,
child: const Text('Capture Face'),
),
),
);
}
}
Example using http package to call the BioPass ID API #
For this example we used the Enroll 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_sdk/biopassid_face_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({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Face Capture Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// Instantiate Face config by passing your license key
final config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
.setLicenseKey('your-license-key');
// Handle Face callback
void callback(FaceEvent event) async {
// Encode image to base64 string
final imageBase64 = base64Encode(event.photo);
// Create url
final url = Uri.https('api.biopassid.com', 'multibiometrics/enroll');
// 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({
'Person': {
'CustomID': 'your-customID',
'Face': [
{'Face-1': 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}');
}
// Build Face camera view
void openCamera() async {
await FaceSdk.buildCameraView(
config: config,
callback: callback,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Face Capture Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: openCamera,
child: const Text('Capture Face'),
),
),
);
}
}
4. Callback #
Setting the Callback #
You can pass a function callback to receive the captured image. You can write you own callback following this example:
void callback(FaceEvent event) {
print('photo: ${event.photo}');
doSomething(event);
}
5. LicenseKey #
First, you will need a license key to use the biopassid_face_sdk
. To get your license key contact us through our website BioPass ID. #
To use biopassid_face_sdk
you need a license key. To set the license key needed is simple as setting another attribute. Simply doing:
final config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
.setLicenseKey('your-license-key');
6. AutoCapture #
For automatic capture to work, the autoCapture needs to be enabled. By default, autoCapture is already enabled. If autoCapture is disabled, automatic capture will be disabled and the responsibility for capturing will be the user's responsibility through a button. For continuous capture, autoCapture will be ignored and automatic capture will always occur. To set the autoCapture is simple as setting another attribute. Simply doing:
final config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
.setLicenseKey('your-license-key')
.setAutoCapture(true);
7. TimeToCapture #
To use the timeToCapture, the autoCapture needs to be on and a time in milliseconds needs to be passed to timeToCapture. By default, the timeToCapture value is 3000ms for single capture and 1000ms for continuous capture. If the timeToCapture is equal to zero, the capture will be instantaneous. To set the timeToCapture is simple as setting another attribute. Simply doing:
final config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
.setLicenseKey('your-license-key')
.setAutoCapture(true)
.setTimeToCapture(3000);
8. MaxNumberFrames #
You can use the maxNumberFrames to set a maximum number of frames to be captured during continuous capture. For the single capture, the maxNumberFrames will always be ignored. If the maxNumberFrames is less than one or null, the capture will continue until the user presses the back button. Setting maxNumberFrames is as simple as setting another attribute. Simply by doing:
final config = FaceConfigPreset.getConfig(FaceConfigType.CONTINUOUS_CAPTURE)
.setLicenseKey('your-license-key')
.setMaxNumberFrames(10);
9. MaxFaceDetectionTime #
You can use the maxFaceDetectionTime to set a maximum time in milliseconds that face detection will be active. If after this time the SDK is unable to identify a face, face detection will be disabled and a capture button will be displayed, thus passing the capture responsibility to the user. The time will only start counting after a first detection attempt. By default, the value of maxFaceDetectionTime is 40000 ms. This functionality only affects single capture mode. Setting maxNumberFrames is as simple as setting another attribute. Simply by doing:
final config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
.setLicenseKey("your-license-key")
.setMaxFaceDetectionTime(40000);
FaceConfig #
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:
FaceCaptureConfig #
Variable name | Type | Default value |
---|---|---|
licenseKey | String | '' |
cameraPreset | FaceCameraPreset | FaceCameraPreset.MEDIUM |
defaultCameraPosition | FaceCameraLensDirection | FaceCameraLensDirection.FRONT |
outputFormat | FaceOutputFormat | FaceOutputFormat.JPEG |
captureButtonType | FaceCaptureButtonType | FaceCaptureButtonType.DEFAULT |
showFlashButton | bool | false |
showFlipCameraButton | bool | true |
flashEnabledByDefault | bool | false |
showHelpText | bool | true |
showScreenTitle | bool | true |
autoCapture | bool | true |
timeToCapture | int | 3000 // time in milliseconds |
maxNumberFrames | int? | null |
maxFaceDetectionTime | int | 40000 // time in milliseconds |
strings | FaceStrings | |
styles | FaceStyles |
ContinuousCaptureConfig #
Variable name | Type | Default value |
---|---|---|
licenseKey | String | '' |
cameraPreset | FaceCameraPreset | FaceCameraPreset.MEDIUM |
defaultCameraPosition | FaceCameraLensDirection | FaceCameraLensDirection.FRONT |
outputFormat | FaceOutputFormat | FaceOutputFormat.JPEG |
captureButtonType | FaceCaptureButtonType | FaceCaptureButtonType.DEFAULT |
showFlashButton | bool | false |
showFlipCameraButton | bool | false |
flashEnabledByDefault | bool | false |
showHelpText | bool | true |
showScreenTitle | bool | true |
autoCapture | bool | true |
timeToCapture | int | 1000 // time in milliseconds |
maxNumberFrames | int? | null |
maxFaceDetectionTime | int | 40000 // time in milliseconds |
strings | FaceStrings | |
styles | FaceStyles |
FaceStrings #
Variable name | Type | Default value |
---|---|---|
screenTitle | String | 'Capturando Face' |
helpText | String | 'Encaixe seu rosto no formato acima e aguarde o sinal verde' |
loading | String | 'Processando...' |
customCaptureButtonText | String | 'Capture Face' |
noFaceDetectedMessage | String | 'Nenhuma face detectada' |
multipleFacesDetectedMessage | String | 'Múltiplas faces detectadas' |
detectedFaceIsCenteredMessage | String | 'Mantenha o celular parado' |
detectedFaceIsCloseMessage | String | 'Afaste o rosto da câmera' |
detectedFaceIsDistantMessage | String | 'Aproxime o rosto da câmera' |
detectedFaceIsOnTheLeftMessage | String | 'Mova o celular para a direita' |
detectedFaceIsOnTheRightMessage | String | 'Mova o celular para a esquerda' |
detectedFaceIsTooUpMessage | String | 'Mova o celular para baixo' |
detectedFaceIsTooDownMessage | String | 'Mova o celular para cima' |
FaceStyles #
Variable name | Type | Default value |
---|---|---|
faceShape | FaceScreenShape | FaceScreenShape.CUSTOM |
faceColor | Color | Color(0xFFFFFFFF) |
faceEnabledColor | Color | Color(0xFF16AC81) |
faceDisabledColor | Color | Color(0xFFE25353) |
overlayColor | Color | Color(0xCC000000) |
backButtonIcon | String? | null |
backButtonColor | Color | Color(0xFFFFFFFF) |
backButtonSize | Size | Size(24, 24) |
flashButtonIcon | String? | null |
flashButtonSize | Size | Size(24, 24) |
flashButtonEnabledColor | Color | Color(0xFFFFCC01) |
flashButtonDisabledColor | Color | Color(0xFFFFFFFF) |
flipCameraButtonIcon | String? | null |
flipCameraButtonColor | Color | Color(0xFFFFFFFF) |
flipCameraButtonSize | Size | Size(65, 43) |
textColor | Color | Color(0xFFFFFFFF) |
textSize | double | 20 |
customFont | String? | null |
captureButtonIcon | String? | null |
captureButtonColor | Color | Color(0xFFD9D9D9) |
captureButtonSize | Size | Size(76, 76) |
customCaptureButtonBackgroundColor | Color | Color(0xFFD6A262) |
customCaptureButtonSize | Size | Size(300, 45) |
customCaptureButtonTextColor | Color | Color(0xFFFFFFFF) |
customCaptureButtonTextSize | double | 20 |
Changing Font Family #
on Android side
You can use the default font family or set a font you prefer. To set a font, 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 iOS side
To add the font files to your Xcode project:
- In Xcode, select the Project navigator.
- Drag your fonts from a Finder window into your project. This copies the fonts to your project.
- Select the font or folder with the fonts, and verify that the files show their target membership checked for your app’s targets.
Then, add the "Fonts provided by application" key to your app’s Info.plist file. For the key’s value, provide an array of strings containing the relative paths to any added font files.
In the following example, the font file is inside the fonts directory, so you use fonts/roboto_mono_bold_italic.ttf as the string value in the Info.plist file.
on Dart side
Finally, just set the font passing the name of the font file when instantiating FaceConfig in your Flutter app.
final config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
.setStylesFontFamily('roboto_mono_bold_italic');
Changing Icon #
on Android side
You can use the default icon or set a icon you prefer. 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 iOS side
To add icon files to your Xcode project:
- In the Project navigator, select an asset catalog: a file with a .xcassets file extension.
- Drag an image from the Finder to the outline view. A new image set appears in the outline view, and the image asset appears in a well in the detail area.
on Dart side
Finally, just set the icon passing the name of the icon file when instantiating FaceConfig in your Flutter app.
final config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
// changing back button icon
.setStylesBackButtonIcon('ic_baseline_camera')
// changing flash button icon
.setStylesFlashButtonIcon('ic_baseline_camera')
// changing flip camera button icon
.setStylesFlipCameraButtonIcon('ic_baseline_camera')
// changing capture button icon
.setStylesCaptureButtonIcon('ic_baseline_camera');
FaceCameraPreset (enum) #
Name | Resolution |
---|---|
FaceCameraPreset.LOW | 240p (352x288 on iOS, 320x240 on Android) |
FaceCameraPreset.MEDIUM | 480p (640x480 on iOS, 720x480 on Android) |
FaceCameraPreset.HIGH | 720p (1280x720) |
FaceCameraPreset.VERYHIGH | 1080p (1920x1080) |
FaceCameraPreset.ULTRAHIGH | 2160p (3840x2160) |
FaceCameraPreset.MAX | The highest resolution available |
FaceCameraLensDirection (enum) #
Name |
---|
FaceCameraLensDirection.FRONT |
FaceCameraLensDirection.BACK |
FaceCaptureFormat (enum) #
Name |
---|
FaceCaptureFormat.JPEG |
FaceCaptureFormat.PNG |
FaceCaptureButtonType (enum) #
Name |
---|
FaceCaptureButtonType.CUSTOM |
FaceCaptureButtonType.ICON |
FaceScreenShape (enum) #
Name |
---|
FaceScreenShape.SQUARE |
FaceScreenShape.ELLIPSE |
FaceScreenShape.CUSTOM |
Using Custom Capture Button #
final config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
.setCaptureButtonType(FaceCaptureButtonType.CUSTOM)
.setStylesCustomButtonBackgroundColor(const Color(0xFFFFFF00))
.setStylesCustomButtonTextColor(const Color(0xFFFF00FF))
.setStringsCustomButtonText('Capture');
Using Icon Capture Button #
final config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
.setCaptureButtonType(FaceCaptureButtonType.ICON)
.setStylesCaptureButtonIcon('ic_baseline_camera')
.setStylesCaptureButtonColor(const Color(0xFFFF0000))
.setStylesCaptureButtonSize(const Size(76, 76));
How to instantiate and functionalities #
To instantiate it's easy as to do one function call (as we have seen previously on the example). You only need to specify which type of config you want using a ENUM FaceConfigType. Every type however can have different features implemented, here are the supported types:
Config Type | Enum | feature |
---|---|---|
Face Capture | FaceConfigType.FACE_CAPTURE | Capture still image and detects face |
Continuous Capture | FaceConfigType.CONTINUOUS_CAPTURE | Capture every frame per second |
FaceEvent #
On your Face callback function, you receive a FaceEvent.
FaceEvent #
Name | Type |
---|---|
photo | Uint8List |
Changelog #
v1.2.1 #
- Documentation update;
- Bug fix in maxFaceDetectionTime for Android.
v1.2.0 #
- Documentation update;
- Refactoring on autoCaptureTimeout:
- Now the autoCaptureTimeout is called timeToCapture.
- New feature maxFaceDetectionTime:
- It is now possible to set a maximum time that face detection will be active.
v1.1.1 #
- Documentation update.
v1.1.0 #
- New feature maxNumberFrames:
- It is now possible to set a maximum number of frames to be captured during continuous capture.
- Documentation update.
v1.0.1 #
- Documentation update;
- Fixed a bug that caused the camera preview image to be stretched during continuous capture for Android;
- Improved license functionality for iOS.
v1.0.0 #
- Documentation update;
- FaceCameraPreset Refactoring;
- Fix autoCaptute and autoCaptuteTimeout for iOS;
- Fix CustomFonts feature for iOS.
v0.1.23 #
- Documentation update;
- New config option autoCaptureTimeout;
- UI customization improvements:
- Added FaceScreenShape with more face shape options;
- Added progress animation during face detection.
v0.1.22 #
- Bug fixes;
- Documentation update.
v0.1.21 #
- Bug fixes.
v0.1.20 #
- New licensing feature.
v0.1.19 #
- Bug fixes.
v0.1.18 #
- Bug fixes;
- Flash mode fixes;
- Face detection improvement;
- New feature automatic capture;
- UI customization improvements;
- New feature face detection;
- Camera preset fix;
- Camera preview fix;
- New icon capture button;
- Fix in requesting permissions;
- Fix in performance of ContinuousCapture;
- Parameterizable screenTitle;
- New option to set text color;
- New custom capture button;
- Class name standardization;
- New option to set the font.
v0.1.13 #
- Removing API Integration;
- New CaptureFormat configuration.
v0.1.12 #
- Refactoring enroll and update person;
- Addition of delete and verify person;
- Added loading message during capture.
v0.1.11 #
- Adding error handling for devices that don't have a camera;
- Adding error handling for when there are no cameras available for the camera position chosen during setup;
- Addition of enroll and update person.
v0.1.10 #
- Update package name;
- Fix base url;
- Fix face shape.
v0.1.9 #
- Configuration and Integration with BioPassID SDK Android and iOS v0.1.9;
- New flashButtonEnabledColor attribute in BioPassIDStyles.
v0.1.8 #
- Configuration and Integration with BioPassID SDK iOS v0.1.8;
- Configuration and Integration with BioPassID SDK Android v0.1.8;
- Implemented spoof on liveness (Android);
- Bug fixes.
v0.1.7 #
- Configuration and Integration with BioPassID SDK Android v0.1.7;
- Configuration and Integration with BioPassID SDK iOS v0.1.7;
- Add liveness detection config;
- Implemented spoof on liveness (iOS);
- Bug fixes.
v0.1.6 #
- Configuration and Integration with BioPassID SDK iOS v0.1.6;
- Configuration and Integration with BioPassID SDK Android v0.1.6;
- An apiKey for each BioPassID plan;
- New way to set apiKey.
v0.1.5 #
- Configuration and integration with BioPassID SDK Android v0.1.5;
- Add face detection config;
- ICAO, Spoofing and APIKey variables added to config;
- BioPassIDEvent modified to return photo and response from ICAO and Spoofing endpoints.