.. _ChapterReactNativeIntegration:

************************
React Native Integration
************************

Overview
--------
The Face Capture SDK comes with a React Native interface for integration.
This chapter will outline the requirements for React Native integration and which parts of the demo source code correspond to the integration tasks outlined in the Application Design chapter.

Integration Requirements
------------------------
The Face Capture SDK requires Camera permissions.

Demo Code
---------
This section provides details regarding the Face Capture API and how it is used to implement an application.

Create a Face Capture Object
^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Create a Face Capture Object*
 :name: createAFaceCaptureObject

    import FaceCapture from 'react-native-face-capture'
	
This provides you with the singleton FaceCapture object from the library.

Create a Workflow Object
^^^^^^^^^^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Create a Workflow Object*
 :name: createAWorkflowObject

    workflow = await FaceCapture.createWorkflow(FaceCapture.constants.FOXTROT);

Adjust Workflow Settings
^^^^^^^^^^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Adjust Workflow Settings*
 :name: adjustWorkflowSettings

    await workflow.setStringProperty(FaceCapture.constants.WorkflowPropertyUsername, username);
    await workflow.setDoubleProperty(FaceCapture.constants.WorkflowPropertyCaptureTimeout, captureTimeout);
    await workflow.setStringProperty(FaceCapture.constants.WorkflowPropertyCaptureProfile, captureProfile);

Select a Camera
^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Select a camera*
 :name: selectACamera

    cameraList = await FaceCapture.getCameraList(FaceCapture.constants.CameraPositionFront);
    camera = cameraList[0];
    await camera.setOrientation(FaceCapture.constants.CameraOrientationPortrait);

Begin a Capture Session
^^^^^^^^^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Begin a Capture Session*
 :name: beginACaptureSession

    await FaceCapture.startCaptureSession(workflow, camera);

Stop a Capture Session
^^^^^^^^^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Stop a Capture Session*
 :name: stopACaptureSession

    await FaceCapture.stopCaptureSession();

Get the capture region
^^^^^^^^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Get capture region*
 :name: getTheCaptureRegion

    captureRegion = await FaceCapture.captureSessionGetCaptureRegion();
	
The capture region can be used to determine where on the GUI to display a graphic to guide the user to that space for a successful capture.

Get the current Capture Session State
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Capture Session State*
 :name: captureSessionState

    captureState = await FaceCapture.getCaptureSessionState();
	
Put this function inside a loop to continually poll for new state updates until the capture ends.

Get the Capture State's Status
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Capture Session Status Changes*
 :name: captureSessionStatusChanges

    captureSessionStatus = await captureState.getStatus();
	
Depending on the status returned, the Capture State may not contain an image nor feedback.
Query this first to determine if the application should query for a frame and feedback.
Please see the extended description in the API chapter for additional information.

Get the Capture State's Image
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Capture Session Images*
 :name: captureSessionImages

    captureSessionFrame = await captureState.getFrame();

Get the Capture State's Feedback
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Capture Session Feedback*
 :name: captureSessionFeedback

    captureSessionFeedback = await captureState.getFeedback();
	
The string returned from this function should be used to determine what localized instructions to put on screen.
The feedback string itself is not intended to be displayed to end users.

Get the Server Package
^^^^^^^^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Get the Server Package*
 :name: getTheServerPackage

    captureServerPackage = await FaceCapture.getServerPackage(workflow, FaceCapture.constants.PackageTypeBalanced);

Get the Encrypted Server Package
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Get the Encrypted Server Package*
 :name: getTheEncryptedServerPackage

    captureServerPackage = await currentFaceCapture.getEncryptedServerPackage(FaceCapture.constants.EncryptionTypeRSA_AES_256_CBC, encryptionKey, workflow, FaceCapture.constants.PackageTypeBalanced);

Enable Autocapture
^^^^^^^^^^^^^^^^^^

.. code-block:: JavaScript
 :caption: *Enable Autocapture*
 :name: enableAutocapture

    await currentFaceCapture.captureSessionEnableAutocapture(true);
	
After starting the capture session, this can be set to false to stop the capture session from successfully completing until it is set back to true.
This is useful for creating an intentional delay during the capture process.
A slight delay at the start of capture may allow the subject to steady the device or hold still to prevent blur when capturing.