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.

Integration of Biometric capture

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,
  type MBFacePositionStatusText,
} 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);

var facePositionStatusText: MBFacePositionStatusText = {
    faceTooFarDown: "Position: Face too far down",
    faceTooFarLeft: "Position: Face too far left",
    faceTooFarRight: "Position: Face too far right",
    faceTooFarUp: "Position: Face too far up",
    faceValidPosition: "Position: Valid position",
    faceNotFound: "Distance: Face not found"
  }

export const launchNativeModule = () => {
  var myOptions: MobaiBiometricOptions = { 
    autoCaptureEnabled: true,
    targetResolution: TargetResolution.HD_720,
    captureConstrains: MBCaptureConstraints.V2,
    facePositionStatusText: facePositionStatusText 
    };
  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.

MobaiBiometricOptions

Variable Name	Type	Default Value	Description
numberOfFramesBeforeCapture	number	0	describes number of frame that library capture before starting the process of capturing.
captureConstrains	MBCaptureConstraints	MBCaptureConstraints.V1	Indicates whether executing MBCaptureConstraints.V1 that is the oldest version and uses limited set of constrains or MBCaptureConstraints.V2 that is the newest version. Ensures more accurate and high quality data captured and better performance.
facePositionStatusText	MBFacePositionStatusText	MBFacePositionStatusText	Is used to customize or localize the text displayed to the user indicating if the face position status based on the face bounding box validation.
faceDistanceStatusText	MBFaceDistanceStatusText	MBFaceDistanceStatusText	Is used to customize or localize the text displayed to the user indicating if the face distance status based on the face bounding box validation.
facePoseStatusText	MBFacePoseStatusText	MBFacePoseStatusText	Is used to customize or localize the text displayed to the user indicating if the face pose status based on the face bounding box validation.
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 represent (540x960)px, TargetResolution.HD_720 represent (720x1280)px, TargetResolution.HD_1080 represents (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.

Member	Type	Description
title	string	The title of the alert box
message	string	The message to show the user
settingText	string	The title of the button to go to the iOS settings page
cancelText	string	The title of the button to dismiss the alert

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

MBFacePositionStatusText

Member	Type	Description
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
faceValidPosition	string	Text to display when the face position is valid
faceNotFound	string	Text to display when no face is found

MBFaceDistanceStatusText

Member	Type	Description
faceTooFarAway	string	Text to display when the face is too far away from the camera
faceTooClose	string	Text to display when the face is too close to the camera
faceValidDistance	string	Text to display when the face distance is valid
faceNotFound	string	Text to display when no face is found

MBFacePoseStatusText

Member	Type	Description
faceExcessiveYaw	string	Text to display when the face yaw pose exceeds the allowed range in degrees
faceExcessivePitch	string	Text to display when the face pitch pose exceeds the allowed range in degrees
faceExcessiveRoll	string	Text to display when the face roll pose exceeds the allowed range in degrees
faceValidPose	string	Text to display when the face pose is valid
faceNotFound	string	Text to display when no face is found