capture-vision-react-native-samples

MRZ Scanner Integration Guide

In this guide, we will guide you to develop a MRZ scanning app with the MRZScanner component.

MRZScanner is a ready-to-use component that allows developers to quickly set up an MRZ scanning app. With the built-in component, it streamlines the integration of MRZ scanning functionality into any application.

Supported Machine-Readable Travel Document Types

The Machine Readable Travel Documents (MRTD) standard specified by the International Civil Aviation Organization (ICAO) defines how to encode information for optical character recognition on official travel documents.

Currently, the SDK supports three types of MRTD:

[!NOTE] If you need support for other types of MRTDs, our SDK can be easily customized. Please contact support@dynamsoft.com.

ID (TD1 Size)

The MRZ (Machine Readable Zone) in TD1 format consists of 3 lines, each containing 30 characters.

Example of MRZ in TD1 format

ID (TD2 Size)

The MRZ (Machine Readable Zone) in TD2 format consists of 2 lines, with each line containing 36 characters.

Example of MRZ in TD2 format

Passport (TD3 Size)

The MRZ (Machine Readable Zone) in TD3 format consists of 2 lines, with each line containing 44 characters.

Example of MRZ in TD2 format

System Requirements

React Native

Android

iOS

Others

Installation

Run the following commands in the root directory of your react-native project to add dynamsoft-capture-vision-react-native and dynamsoft-mrz-scanner-bundle-react-native into dependencies

# using npm
npm install dynamsoft-capture-vision-react-native
npm install dynamsoft-mrz-scanner-bundle-react-native

# OR using Yarn
yarn add dynamsoft-capture-vision-react-native
yarn add dynamsoft-mrz-scanner-bundle-react-native

then run the command to install all dependencies:

# using npm
npm install 

# OR using Yarn
yarn install

For iOS, you must install the necessary native frameworks from CocoaPods by running the pod install command as below:

cd ios
pod install

Configure Native Projects

The Dynamsoft Capture Vision SDK needs the camera permission to use the camera device, so it can capture from video stream.

Android

For Android, we have defined camera permission within the SDK, you don’t need to do anything.

iOS

For iOS, you need to include the camera permission in ios/your-project-name/Info.plist inside the <dict> element:

<key>NSCameraUsageDescription</key>
    <string></string>

Build the MRZ Scanner Component

Now that the package is added, it’s time to start building the MRZ Scanner component using the SDK.

Import

To use the MRZScanner API, please import MRZScanner class and the related MRZScanConfig and MRZScanResult from dynamsoft-mrz-scanner-bundle-react-native

Simplest Example

```typescript jsx import { MRZScanner, MRZScanResult, MRZScanConfig } from ‘dynamsoft-mrz-scanner-bundle-react-native’;

async function scanMRZ() { const config = { // Initialize the license. // The license string here is a trial license. Note that network connection is required for this license to work. // You can request an extension via the following link: https://www.dynamsoft.com/customer/license/trialLicense?product=mrz&utm_source=samples&package=react-native license: ‘DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9’, } as MRZScanConfig; const result = await MRZScanner.launch(config); // do something with the result }


You can call the above function anywhere (e.g., when the app starts, on a button click, etc.) to achieve the effect:
open an MRZ scanning interface, and after scanning is complete, close the interface and return the result. 
Following is the simplest example of how to use the `scanMRZ` function:

```typescript jsx
import {Button, Text, View} from 'react-native';

function App(): React.JSX.Element {
  return (
    <View style=>
      <Button title={'Scan MRZ'} onPress={() => scanMRZ()}/>
    </View>
  );
}

[!NOTE]

MRZ Scan Result And MRZ Data

Also see it in the MRZScanResult and MRZData section of API References.

MRZScanResult structure:

MRZData structure:

(Optional)Change the MRZScanConfig to meet your needs

Also see it in the MRZScanConfig section of API References.

```typescript jsx import {MRZScanConfig, EnumDocumentType} from ‘dynamsoft-mrz-scanner-bundle-react-native’;

const config = { /**

/**

/**

/**

/**

/**

/**

/**

/**

/**

Run the Project

Go to your project folder, open a new terminal and run the following command:

For Android

# using npm
npm run android

# OR using Yarn
yarn android

For iOS

Signing

# using npm
npm run ios

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your new app running on your device. This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

[!NOTE] If you want to run Android via Windows, You may encounter some build errors due to the Windows Maximum Path Length Limitation. Therefore, we recommend that you move the project to a directory with a shorter path.

How to Use the New Architecture of React Native (Optional)

How to enable new architecture in Android

How to enable new architecture in iOS

Full Sample Code

The full sample code is available here.

License

Contact

https://www.dynamsoft.com/company/contact/