Document Capture (React Native)

Estimated reading: 7 minutes 225 views

AWDocumentCapture: Installation, Usage Guide and API Documentation

AWDocumentCapture is a private node module used for document scanning and processing. It uses native camera capabilities to scan documents and returns an encrypted string of the scanned document. The module also supports document processing using both Camera and Image, scanning of Multi-Page documents, ICAO (International Civil Aviation Organization) compliance, and active authentication by leveraging the ability to reprocess the document on the server side.

This comprehensive guide will walk you through the installation of AWDocumentCapture and its dependencies, necessary Android Manifest and iOS Info.plist changes, an overview of the functions and their implementations, and will illustrate how to utilize them in your application.

1. Installation

As a pre-requisite, you need to have Node.js and npm installed on your system.

Step 1: Set up .npmrc to use our private npm registry

Before proceeding with the integration of either Face Capture or Document Capture SDK, ensure that your project is set up to use our private npm registry.

  1. Create a .npmrc file in the root directory of your project.
  2. Add the following lines:
@aware-mcoe:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}

Step 2: Export the aware-mcoe npm token

  • Mac:
export NPM_TOKEN=Token we provide you
  • Windows:

PowerShell:

$env:NPM_TOKEN="Token we provide you".

or CMD to export the token:

SET NPM_TOKEN=Token we provide you.

Step 3 Install the Document Capture SDK:

Run the command below to install the Document Capture SDK:

npm i @aware-mcoe/awrn-document-capture

Or you can modify your package.json to include the following line:

"@aware-mcoe/awrn-document-capture": "0.0.1"

Step 4: Install Dependencies

Run the following command in the root directory of your project:

npm install

2. Manifest and .plist Changes

Next, you'll need to modify your AndroidManifest.xml and Info.plist files to grant the necessary permissions:

For Android, add these permissions to your Android Manifest file:

<uses-permission android:name="android.permission.INTERNET" />    
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.NFC" />

For iOS, update your Info.plist file to include the following keys:

<key>NSCameraUsageDescription</key>
<string>Is used to access your device's camera</string>
<key>NFCReaderUsageDescription</key>
<string>NFC tag to read NDEF messages</string>
<key>com.apple.developer.nfc.readersession.iso7816.select-identifiers</key>
<array>
    <string>A0000002471001</string>
    <string>E80704007F00070302</string>
    <string>A000000167455349474E</string>
    <string>A0000002480100</string>
    <string>A0000002480200</string>
    <string>A0000002480300</string>
    <string>A00000045645444C2D3031</string>
</array>

3. Include License File

This step involves incorporating the license file into your Android and iOS applications as an asset. Follow the steps outlined below based on your platform:

Android

  1. Locate the doc.license file that needs to be included as an asset.
  2. Navigate to the directory where your Android project is located. You should be able to find the /android/app/src/main/assets folder.
  3. If the assets folder does not exist, create one in the /android/app/src/main/ directory.
  4. Copy the doc.license file and paste it into the assets folder.
  5. The file path should look like /android/app/src/main/assets/yourfile.license.

iOS

  1. Find the doc.license file that needs to be included as an asset.
  2. Navigate to the directory where your iOS project is located, it should be something like /ios/appName.
  3. Paste the doc.license file into the /ios/appName directory.
  4. Open your iOS project in XCode by launching the .xcworkspace file.
  5. In XCode, locate the doc.license file in the project navigator (the left-side panel).
  6. Drag and drop the doc.license file into the root of your application structure in XCode.
  7. Ensure that the doc.license file is included in the "Copy Bundle Resources" phase of the build phases. You can check this by clicking on your project in the Navigator, selecting the appropriate Target, going to the "Build Phases" tab, and looking under "Copy Bundle Resources". If it is not listed, click the '+' and add it.

Note: The file paths provided are examples and may differ based on the structure and name of your actual project.

4. Usage and Function Implementation

Import AWDocumentCapture into your JavaScript file as follows:

import AWDocumentCapture from './awdocumentcapture/AWDocumentCapture';

The AWDocumentCapture module provides a set of methods for various operations. For instance, to initialize Document Reader, use the initializeDocumentReader(pathToLicense) method, where pathToLicense is the path to the license file. Other key methods include processByUsingCamera(), processRFID(), and stopRFIDProcessing().

For ICAO compliance, use the setICAO(icaoOption) function, where icaoOption is a number representing the level of ICAO compliance (0 = Do Not Perform ICAO, 1 = Must Perform ICAO, 2 = ICAO Optional). You can also use the setReprocessParams(doReprocess, baseURL, apiKey, accessToken) function to update the active authentication settings.

5. Callbacks and Settings

AWDocumentCapture utilizes a series of callback functions to handle various events and offers a range of settings:

Callbacks

  • isInitilializedFunction: Signals the initialization of Document Reader.
  • databaseProgress: Tracks the progress of the database preparation. Default is console.log.
  • returnEncryptedString: Handles the encrypted string from document scanning.
  • onProcessingComplete: Triggers once processing is complete.
  • onError: Handles errors. Default value is console.error.

Settings

  • mustPerformICAO: Determines if ICAO compliance is required. Default is ICAO.none.
  • encryptionNeeded: Determines if encryption is needed for the output of document scanning. Default is true.
  • multiPageProcessing: Determines if multi-page processing is needed. Default is true.
  • doublePageSpread: Determines if scanning is performed on a double page spread. Default is false.
  • checkHologram: Determines if hologram checking is performed during scanning. Default is false.
  • timeout: Sets the time limit (in seconds) for document processing. Default is 20.0.
  • shouldReprocess: Sets whether the SDK should perform document reprocessing for active authentication.
  • baseURL: Sets the base URL for the document capture SDK to use during document reprocessing.
  • reprocessingAPIKey: Sets the APIKey used by the document capture SDK during document reprocessing.
  • reprocessingAccessToken: Sets the access token used by the document capture SDK during document reprocessing.

These settings can be customized by passing an options object when constructing a new instance of AWDocumentCapture. For example:

let docCapture = new AWDocumentCapture({
  mustPerformICAO: ICAO.required,
  encryptionNeeded: false,
  timeout: 60.0,
  onError: (error) => console.log("An error occurred:", error),
  // other options...
});

6. Example Usage

Here's a full example demonstrating the use of the AWDocumentCapture module:

import React, { useState } from 'react';
import AWDocumentCapture from './awdocumentcapture/AWDocumentCapture';
import { View, Button } from 'react-native';

export default function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [databaseProgress, setDatabaseProgress] = useState(0);
  const LIC_PATH = '/path/to/your/doc.license';

  const awDocCapture = new AWDocumentCapture({
    isInitilializedFunction: () => setIsLoading(false),
    databaseProgress: (event: number) => setDatabaseProgress(event),
    returnEncryptedString: (encryptedString: any) => { /* Handle encrypted string */ },
    onProcessingComplete: () => setIsLoading(false),
    onError: (error) => console.log("An error occurred:", error),
  });

  const initialize = async () => {
    await awDocCapture.init();
    await awDocCapture.initializeDocumentReader(LIC_PATH);
  }

  const captureDocument = async () => {
    await awDocCapture.processByUsingCamera();
  }

  initialize();

  return (
    <View>
      <Button 
        title="Capture Document"
        onPress={captureDocument}
        disabled={isLoading}
      />
    </View>
  );
}

In this example, we first import the necessary dependencies and initialize the AWDocumentCapture instance. We then create an asynchronous function initialize to initialize the document reader. After initialization, the 'Capture Document' button becomes available. Once pressed, it captures the document using the device's camera.

Remember, you need to replace '/path/to/your/doc.license' with the actual path to your doc.license file.

Please note: This example uses the default settings for the AWDocumentCapture instance. You can customize these according to your needs.

You have now successfully installed and configured the AWDocumentCapture module, and are familiar with the main features of its API.

CONTENTS

Powered By Aware Inc