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.

Usage

import {
  MBCaptureSessionView,
  FaceStatus,
  MBCaptureSessionOptions,
  type MBCaptureSessionResult,
} from "mobai-biometric";

export default function CaptureScreen(props: any) {
  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,
  });

  return (
    <View style={styles.screenContainer}>
      <MBCaptureSessionView
        options={options}
        onFaceValidating={onFaceValidating}
        onFaceCaptureStarted={onFaceCaptureStarted}
        onFaceCaptureProgress={onFaceCaptureProgress}
        onFaceCaptureSuccess={onFaceCaptureSuccess}
        onFaceCaptureFailed={onFaceCaptureFailed}
        onFaceCaptureCountDown={onFaceCaptureCountDown}
        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.

1. 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. Here the onFaceValidating function will be called
2. 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
3. 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.
4. When the capture process has started the onFaceCaptureProgress function will be called to indicate the progress of the capture process.
5. When the capture process is completed successfully the onFaceCaptureSuccess function will be called containing the results of the process.
6. If the capture process fails for some reason the onFaceCaptureFailed function will be called with the reason for the failure.

Prop Name	Description	Signature
onFaceValidating	Provides the current face status-position in the camera preview	onFaceValidating(faceStatus: FaceStatus)
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

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.
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 represents (540x960)px, TargetResolution.HD_720 represents (720x1280)px, TargetResolution.HD_1080 rrepresents (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
});