.. _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, how to operate the included developer demo, 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 Operation
--------------
The Face Capture SDK comes with a small developer demo that is intended to show how various options work.
The demo allows developers to rapidly test various combinations of settings to determine what they need to adjust to meet their own application's requirements.
The demo is not intended to resemble a finished product and provides the user with many options that should not be accessible to an end-user in a production environment.
Source code for the demo is provided within the SDK installer package.

Due to an issue with the "react-native" npm package used in the demo, you may run into an error where "node_modules/react-native/scripts/xcode/with-environment.sh" is not found.
This can be fixed by creating a blank file at that location and giving it executable permissions. This is only applicable to building on iOS.

Home Screen
^^^^^^^^^^^

.. image:: screen_home.png
	:align: center
	:alt: Home Screen
	:width: 350px
	:height: 600px
	:scale: 50 %

Settings Screen
^^^^^^^^^^^^^^^

.. image:: screen_settings.png
	:align: center
	:alt: Settings Screen
	:width: 350px
	:height: 600px
	:scale: 50%

Capture Screen
^^^^^^^^^^^^^^

.. image:: screen_capture.png
	:align: center
	:alt: Settings Screen
	:width: 350px
	:height: 600px
	:scale: 50%

Result Screen
^^^^^^^^^^^^^

.. image:: screen_result.png
	:align: center
	:alt: Settings Screen
	:width: 350px
	:height: 600px
	:scale: 50%

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

    currentFaceCapture = new FaceCapture();

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

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

    currentWorkflow = await currentFaceCapture.createWorkflow(settingWorkflow);

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

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

    await currentWorkflow.setStringProperty(WorkflowProperty.USERNAME.value, settingUsername);
    await currentWorkflow.setDoubleProperty(WorkflowProperty.CAPTURE_TIMEOUT.value, settingCaptureTimeout);
    await currentWorkflow.setStringProperty(WorkflowProperty.CAPTURE_PROFILE.value, settingCaptureProfile);

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

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

    currentCameraList = await currentFaceCapture.getCameraList(settingCameraPosition);
    currentCamera = currentCameraList[0];
    await currentCamera.setOrientation(settingCameraOrientation);

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

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

    await currentFaceCapture.startCaptureSession(currentWorkflow, currentCamera);

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

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

    await currentFaceCapture.stopCaptureSession();

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

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

    currentCaptureRegion = await currentFaceCapture.captureSessionGetCaptureRegion();

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

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

    currentCaptureState = await currentFaceCapture.getCaptureSessionState();

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

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

    currentCaptureSessionFrame = await currentCaptureState.getFrame();

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

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

    currentCaptureSessionFeedback = await currentCaptureState.getFeedback();

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

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

    currentCaptureSessionStatus = await currentCaptureState.getStatus();

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

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

    currentCaptureServerPackage = await currentFaceCapture.getServerPackage(currentWorkflow, settingPackageType);

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

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

    currentCaptureServerPackage = await currentFaceCapture.getEncryptedServerPackage(currentEncryptionType, currentEncryptionKey, currentWorkflow, settingPackageType);

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

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

    await currentFaceCapture.captureSessionEnableAutocapture(true);