santiagofm / vision-camera-mrz-scanner

A plugin to recognize MRZ passports using MLKit and the open source project mrz for free.

vision-camera-mrz-scanner

VisionCamera Frame Processor Plugin to detect and read MRZ data from passports using MLKit Text Recognition.

• A helper function has been added for those using headers or footers to adjust the bounding box parameters. A working example using React-native 0.70.6 and updated reanimated and vision camera packages are located here: example

Installation & Configuration

Install

# install with npm
npm install vision-camera-mrz-scanner

# or install with yarn
yarn add vision-camera-mrz-scanner

Configure

Add the below plugin to your babel config file

// babel.config.js
module.exports = {
  plugins: [
    [
      'react-native-reanimated/plugin',
      {
        globals: ['__scanMRZ'],
      },
    ],
  ],
};

Add the following permission to the AndroidManifest.xml located at ~/android/app/src/AndroidManifest.xml

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

---

Functions

boundingBoxAdjustToView()

• It takes a frame and a view, and returns an object with two functions: adjustPoint and adjustRect

sortFormatsByResolution()

• Sort the camera formats by resolution, with the highest resolution first.

scanMRZ()

• For use inside the frame processor. This function is only needed if you are using the MRZCamera directly rather than the MRZScanner.

---

Basic Usage

import * as React from 'react';

import {StyleSheet, View} from 'react-native';
import {MRZProperties, MRZScanner} from 'vision-camera-mrz-scanner';

export default function App() {
  return (
    <View style={styles.container}>
      <MRZScanner
        mrzFinalResults={(mrzResults: MRZProperties) => {
          // do something with the results
          console.log('mrzResults: ', JSON.stringify(mrzResults, null, 2));
        }}
        enableMRZFeedBack={true}
        enableBoundingBox={false}
        style={StyleSheet.absoluteFill}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: '100%',
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Just want OCR Camera without the MRZ Scan?

// import MRZCamera instead of MRZScanner
import {MRZCamera, MRZScannerProps} from 'vision-camera-mrz-scanner';

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library