Predefined UI

The react native library can be easily integrated into your application by using the predefined UI. It utilizes a Native Module in React Native to start the capture interface and uses the event emitter to send results back to your application.

Usage

To start the capture interface in React Native simply import the launch function from the @mobaibio/mobai-biometric package and call the function.

import {
  ErrorResult,
  MBCaptureSessionResult,
  EVENT_FAILURE,
  EVENT_SUCCESS,
  launch,
  MobaiBiometric,
  MobaiBiometricOptions,
} from "mobai-biometric";

mobaiBiometricEmmiter = new NativeEventEmitter(MobaiBiometric);

const onCaptureFinished = (result: MBCaptureSessionResult) => {
  console.log("Capture Finished");
  console.log(EVENT_SUCCESS + " image " + result.image.length);
  console.log(EVENT_SUCCESS + " padData " + result.padData.length);
};

const onFailureWithErrorMessage = (result: ErrorResult) => {
  console.log(EVENT_FAILURE + " error " + result.errorDescription);
};

mobaiBiometricEmmiter.addListener(EVENT_SUCCESS, onCaptureFinished);

mobaiBiometricEmmiter.addListener(EVENT_FAILURE, onFailureWithErrorMessage);

export const launchNativeModule = () => {
  var myOptions: MobaiBiometricOptions = { 
    autoCaptureEnabled: true,
    targetResolution: TargetResolution.HD_720 
    };
  launch(myOptions);
};

Event Emitters

In order to receive data from the native library we use event emitter to send events that can be handled by a listener function:

Event Name	Description
EVENT_SUCCESS	Sent when the capture process has finished successfully and provides the captured data to the listener function
EVENT_FAILURE	Sent when the capture process is not able to finish successfully and returns the failure reason to the listener function

Configuration

Some aspects of the capture process is configurable by providing options object to the launch function.

MobaiBiometricOptons

Variable Name	Type	Default Value	Description
numberOfFramesBeforeCapture	number	0	describes number of frame that library capture before starting the process of capturing.
numberOfFrameToCollect	number	3	describes the number of frames to collect during the capture session.
frameInterval	number	10	after collected the first frame, is the number of frames to skip before collecting a frame.
timeBeforeAutomaticCapture	number	1	number of seconds that user needs to wait in automatic capture.
isDebugging	boolean	false	If it is set to false will just display the overlay on the top of the camera. If it is set to true will display all components available ont the top of the camera(timer text, progress bar and face status text).
cameraPermissionAlert	CameraPermissionAlert	undefined	Camera permission object for showing alert when permission is denied from user
targetResolution	TargetResolution	undefined	TargetResolution is used to define the resolution in witch the frames are collected. TargetResolution.QHD represents (540x960)px, TargetResolution.HD_720 represents (720x1280)px, TargetResolution.HD_1080 rrepresents (1080x1920)px, TargetResolution.HD_4K represents (2160x3840)px.
faceStatusTexts	FaceStatusTexts	undefined	Is used to customize or localize the text displayed to the user indicating if the face is in correct position or not.
if no input is provided to `faceStatusTexts` default values are used.
previewScaleType	PreviewScaleType	fill	The mode used to scale the camera preview in the view. It can be set to either `fit` or `fill`. `PreviewScaleType.fill` will ensure the camera preview is taking up the whole view in both width and height. However, this means that some parts of the image will be cropped from the preview. This does not have any impact on the images captured from the camera. `PreviewScaleType.fit` will ensure that exactly what is captured from the camera is shown in the view.
showCountdownLabel	boolean	false	- Is used to show or hide the label displayed during countdown before capture starts.
- The text for the countdownLabel can be set using the `countdownLabelText` option.
countdownLabelText	string	'Hold Still'	Is used to customize the text shown in the countdown label
showProgressBar	boolean	false	Is used to show or hide the progress bar. The progress bar indicates to the user how far in the capture process we are.
showFaceStatusLabel	boolean	false	Is used to show or hide the face status label. The face status label is used to indicate to the user if the face is in the correct position or not.
payloadOptimization	boolean	false	Enable or disable the optimization of the payload you send to the backend, reduces the payload size.

CameraPermissionAlert Camera permission object for showing alert when permission is denied from user

FaceStatusTexts

FaceStatusTexts

Member	Type	Description
faceTooFarAway	string	Text to display when the face is too far away from the camera
faceTooFarUp	string	Text to display when the face i too far up in the camera
faceTooFarDown	string	Text to display when the face is too far down in the camera
faceTooFarLeft	string	Text to display when the face is too far left in the camera
faceTooFarRight	string	Text to display when the face is too far right in the camera
faceTooClose	string	Text to display when the face is too close to the camera
faceNotFound	string	Text to display when no face is found
tooManyFaces	string	Text to display when too many faces are found in the camera
validFace	string	Text to display when the face is in a valid position in the camera

Usage​

Event Emitters​

Configuration​

MobaiBiometricOptons​

Usage

Event Emitters

Configuration

MobaiBiometricOptons