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
# install with npm
npm install vision-camera-mrz-scanner
# or install with yarn
yarn add vision-camera-mrz-scanner// 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"/>- It takes a frame and a view, and returns an object with two functions: adjustPoint and adjustRect
- Sort the camera formats by resolution, with the highest resolution first.
- For use inside the frame processor. This function is only needed if you are using the MRZCamera directly rather than the MRZScanner.
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',
},
});// import MRZCamera instead of MRZScanner
import {MRZCamera, MRZScannerProps} from 'vision-camera-mrz-scanner';See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent