Custom UI

If you want to integrate the capture process with your existing UI the library can be used as a Native Component in React Native. By using the Native component the full user experience can be customized. It uses listener functions to notify the calling application about events from the capture process which can then be used guide the user through the steps of the process.

Integration of Biometric capture

import {
  MBCaptureSessionView,
  FaceStatus,
  MBCaptureSessionOptions,
  type MBCaptureSessionResult,
  FacePose, FaceDistance,
  FacePosition, MBCaptureConstraints
} from "mobai-biometric";

export default function CaptureScreen(props: any) {

  function onFaceBoundingBoxValidating(
    facePoses: Array<FacePose>,
    faceDistance: FaceDistance, 
    facePositions: Array<FacePosition>) {
     console.log(faceDistance);
     console.log(facePoses);
     console.log(facePositions);
    }

  function onFaceValidating(faceStatus: FaceStatus) {
    console.log("Face Validating: ", faceStatus);
  }

  function onFaceCaptureStarted() {
    console.log("Face Capture Started");
  }
  function onFaceCaptureSuccess(
    mbCaptureSessionResult: MBCaptureSessionResult
  ) {
    console.log("Face Capture Success", mbCaptureSessionResult.padData.length);
  }
  function onFaceCaptureProgress(captureProgress: number) {
    console.log("Face Capture Progress");
  }

  function onFaceCaptureFailed(message: string) {
    console.log("Face Capture Failed");
  }

  function onFaceCaptureCountDown(downCounter: string) {
    console.log("Face Capture Failed");
  }

  const options = setCaptureSessionOptions({
    timeBeforeAutomaticCapture: 1,
    previewScaleType: PreviewScaleType.fill,
    captureConstrains: MBCaptureConstraints.V2,
  });

  return (
    <View style={styles.screenContainer}>
      <MBCaptureSessionView
        options={options}
        onFaceValidating={onFaceValidating}
        onFaceCaptureStarted={onFaceCaptureStarted}
        onFaceCaptureProgress={onFaceCaptureProgress}
        onFaceCaptureSuccess={onFaceCaptureSuccess}
        onFaceCaptureFailed={onFaceCaptureFailed}
        onFaceCaptureCountDown={onFaceCaptureCountDown}
        onFaceBoundingBoxValidating={onFaceBoundingBoxValidating}
        style={styles.captureSessionView}
      ></MBCaptureSessionView>
    </View>
  );
}

const styles = StyleSheet.create({
  captureSessionView: {
    marginBottom: 20,
    marginTop: 20,
    marginLeft: 20,
    marginRight: 20,
    flex: 1,
  },

  screenContainer: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
  },
});

Listener Functions

The capture process moves between different states as the process progresses.

Validating events

When the capture process starts the library will try to find a face in front of the camera. When a valid face is found a countdown will start. The function that is fired depends on the selected version for the face capturing SDK:

MBCaptureConstraints.V1 execute onFaceValidating.
MBCaptureConstraints.V2 execute onFaceBoundingBoxValidating.

Countdown event

When the countdown is finished the library will start the capture process. If the user moves their face and the face becomes invalid it will start from the beginning. Here the onFaceCaptureCountDown will be called.

Started event

When the capture process starts the onFaceCaptureStarted function will be called. If the user moves their face and the face becomes invalid the capture process will start from the beginning.

Progress event

When the capture process has started the onFaceCaptureProgress function will be called to indicate the progress of the capture process.

Success event

When the capture process is completed successfully the onFaceCaptureSuccess function will be called containing the results of the process.

Failed event

If the capture process fails for some reason the onFaceCaptureFailed function will be called with the reason for the failure.

Events description

Prop Name	Description	Signature
onFaceValidating	Provides the current face status-position in the camera preview based on the face landmarks	`onFaceValidating(faceStatus: FaceStatus)`
onFaceBoundingBoxValidating	Provides the current face status-position in the camera preview based on the face bounding box	`onFaceBoundingBoxValidating: (facePoses: Array<FacePose>, faceDistance: FaceDistance, facePositions: Array<FacePosition>)`
onFaceCaptureCountDown	It returns the remaining time in seconds before start collecting frames	`onFaceCaptureCountDown(downCounter: string)`
onFaceCaptureStarted	Is execute the capture session starts	`onFaceCaptureStarted()`
onFaceCaptureProgress	It shows the capture session progress with a value from 0-1	`onFaceCaptureProgress(captureProgress: number)`
onFaceCaptureSuccess	Is executed when the capture session is successfully finished	`onFaceCaptureSuccess(mbCaptureSessionResult: MBCaptureSessionResult)`
onFaceCaptureFailed	It is executed when the face capture fails, it returns the type of error	`onFaceCaptureFailed(message: string)`

FaceStatus Is used to indicate whether the face of the person is in a valid position or if the face is not in a valid position in front of the camera. If the face is not in a valid position, the face status indicates the reason for the non-valid position.

Face status	Description
TooFarAway	The face is too far away from the camera
TooFarUp	The face is too far up from the camera
TooFarDown	The face is too far down from the camera
TooFarLeft	The face is too far left from the camera
TooFarRight	The face is too far right from the camera
TooClose	The face is too close to the camera
NotFound	There is not a face in the camera
TooManyFaces	There are too many faces in the camera
ValidFace	The face is in the correct position

FaceDistance Is an enum representation of the distance between the device and the face.

TOO_FAR_AWAY it says the face is too far away.
TOO_CLOSE it says the face is too close.

FacePosition Is an enum representation of the face position in correspondence with the region of interest. This value is returned as member of a list of its own type because the face position can have from one to four errors at the same time. For instance: a face can be too far left and too far up at the same time. Then the list contains [TOO_FAR_LEFT, TOO_FAR_UP]. It returns just VALID_FACE_POSE or NOT_FOUND in the list if any of these are given.

FacePosition entries:

TOO_FAR_UP face is too far up.
TOO_FAR_LEFT face is too far left.
TOO_FAR_DOWN face is too far down.
TOO_FAR_RIGHT face is too far right.
NOT_FOUND not face is detected.

FacePose Is an enum representation of the face pose angle. This value is returned as member of a list of its own type because the face pose angle can have from one to three errors at the same time. For instance: a face can have an excessive yaw rotation and an excessive roll rotation. Then the list contains[YAW_EXCESSIVE_FACE_ROTATION, ROLL_EXCESSIVE_FACE_ROTATION]. It returns just VALID_FACE_POSE or NOT_FOUND in the list if any of these are given.

FacePose entries:

YAW_EXCESSIVE_FACE_ROTATION the face has excessive yaw rotation.
ROLL_EXCESSIVE_FACE_ROTATION the face has excessive roll rotation.
PITCH_EXCESSIVE_FACE_ROTATION the face has excessive pitch rotation.

Configuration

Props associated with MBCaptureSessionView. Inside the library we have some options for changing behaviour of capturing data:

Variable Name	Type	Default Value	Description
numberOfFramesBeforeCapture	number	0	Describes the number of frames to collect during the capture session.
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.
numberOfFrameToCollect	number	3	After collecting the first frame, is the number of frames to skip before collecting a frame.
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 represent (1080x1920)px, TargetResolution.HD_4K represents (2160x3840)px.
frameInterval	number	10	Describes the number of frames to skip before it starts collecting.
timeBeforeAutomaticCapture	number	1	Is the set time in seconds the capture should wait to start collecting frames.
isDebugging	boolean	false
previewScaleType	enum	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.
payloadOptimization	boolean	false	Enable or disable the optimization of the payload you send to the backend, reduces the payload size.

Example options:

const options = setCaptureSessionOptions({
  numberOfFrameToCollect: 3,
  numberOfFramesBeforeCapture: 0,
  frameInterval: 3,
  timeBeforeAutomaticCapture: 1,
  previewScaleType: PreviewScaleType.fill,
  targetResolution: TargetResolution.HD_720,
  captureConstrains: MBCaptureConstraints.V2,
});

Integration of Biometric capture​

Listener Functions​

Validating events​

Countdown event​

Started event​

Progress event​

Success event​

Failed event​

Events description​

Configuration​