vision-camera-mrz-scanner
Version:
VisionCamera Frame Processor Plugin to detect and read MRZ data from passports using MLKit Text Recognition.
241 lines (238 loc) • 10.3 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MRZCamera } from 'vision-camera-mrz-scanner';
import { parseMRZ } from '../util/mrzParser';
const MRZScanner = _ref => {
let {
style,
skipButtonEnabled,
skipButton,
onSkipPressed,
skipButtonStyle,
cameraProps,
onData,
skipButtonText,
mrzFinalResults,
enableMRZFeedBack,
numberOfQAChecks,
enableBoundingBox,
mrzFeedbackCompletedColor,
mrzFeedbackUncompletedColor,
mrzFeedbackContainer,
mrzFeedbackTextStyle,
isActiveCamera
} = _ref;
//*****************************************************************************************
// setting up the state
//*****************************************************************************************
const numQAChecks = numberOfQAChecks ?? 3;
const [scanSuccess, setScanSuccess] = useState(false);
const [docMRZQAList, setDocMRZQAList] = useState([]);
const [docTypeQAList, setDocTypeQAList] = useState([]);
const [issuingCountryQAList, setIssuingCountryQAList] = useState([]);
const [givenNamesQAList, setGivenNamesQAList] = useState([]);
const [lastNamesQAList, setLastNamesQAList] = useState([]);
const [idNumberQAList, setIdNumberQAList] = useState([]);
const [nationalityQAList, setNationalityQAList] = useState([]);
const [dobQAList, setDobQAList] = useState([]);
const [genderQAList, setGenderQAList] = useState([]);
const [docExpirationDateQAList, setDocExpirationDateQAList] = useState([]);
const [isActive, setIsActive] = useState(true);
const [additionalInformationQAList, setAdditionalInformationQAList] = useState([]);
useEffect(() => {
return () => {
setIsActive(false);
};
}, []);
/**
* If all elements in list match element, add the new element.
* If not, empty the list, then add the new element to the list.
* @param list
* @param element
*/
const mrzQACheck = (list, element) => {
let newList = [...list];
for (let i = 0; i < list.length; i++) {
if (list[i] !== element) {
newList = [];
}
}
newList.push(element);
return newList;
};
/**
* Returns true if all QALists are full (their sizes are >= numberOfPreviousMRZsToCompareTo).
* If one or more of them are not full, it updates them with the most recently captured field that pertains to them.
* @param numberOfPreviousMRZsToCompareTo
* @param mrzResults
*/
const currentMRZMatchesPreviousMRZs = (numberOfPreviousMRZsToCompareTo, mrzResults) => {
if (docMRZQAList.length >= 1 && docTypeQAList.length >= numberOfPreviousMRZsToCompareTo && issuingCountryQAList.length >= numberOfPreviousMRZsToCompareTo && givenNamesQAList.length >= numberOfPreviousMRZsToCompareTo && lastNamesQAList.length >= numberOfPreviousMRZsToCompareTo && idNumberQAList.length >= numberOfPreviousMRZsToCompareTo && nationalityQAList.length >= numberOfPreviousMRZsToCompareTo && dobQAList.length >= numberOfPreviousMRZsToCompareTo && genderQAList.length >= numberOfPreviousMRZsToCompareTo && docExpirationDateQAList.length >= numberOfPreviousMRZsToCompareTo && issuingCountryQAList.length >= numberOfPreviousMRZsToCompareTo) {
return true;
}
if (givenNamesQAList.length < numberOfPreviousMRZsToCompareTo) {
setGivenNamesQAList(mrzQACheck(givenNamesQAList, mrzResults.givenNames));
}
if (lastNamesQAList.length < numberOfPreviousMRZsToCompareTo) {
setLastNamesQAList(mrzQACheck(lastNamesQAList, mrzResults.lastNames));
}
if (idNumberQAList.length < numberOfPreviousMRZsToCompareTo) {
setIdNumberQAList(mrzQACheck(idNumberQAList, mrzResults.idNumber));
}
if (nationalityQAList.length < numberOfPreviousMRZsToCompareTo) {
setNationalityQAList(mrzQACheck(nationalityQAList, mrzResults.nationality));
}
if (dobQAList.length < numberOfPreviousMRZsToCompareTo) {
setDobQAList(mrzQACheck(dobQAList, mrzResults.dob));
}
if (genderQAList.length < numberOfPreviousMRZsToCompareTo) {
setGenderQAList(mrzQACheck(genderQAList, mrzResults.gender));
}
if (issuingCountryQAList.length < numberOfPreviousMRZsToCompareTo) {
setIssuingCountryQAList(mrzQACheck(issuingCountryQAList, mrzResults.issuingCountry));
}
if (docTypeQAList.length < numberOfPreviousMRZsToCompareTo) {
setDocTypeQAList(mrzQACheck(docTypeQAList, mrzResults.docType));
}
if (docExpirationDateQAList.length < numberOfPreviousMRZsToCompareTo) {
setDocExpirationDateQAList(mrzQACheck(docExpirationDateQAList, mrzResults.docExpirationDate));
}
if (additionalInformationQAList.length < numberOfPreviousMRZsToCompareTo) {
setAdditionalInformationQAList(mrzQACheck(additionalInformationQAList, mrzResults.additionalInformation));
}
if (docMRZQAList.length < 1) {
setDocMRZQAList(mrzQACheck(docMRZQAList, mrzResults.docMRZ));
}
return false;
};
const statusCheck = (completedQAChecks, numOfChecks) => {
if (numOfChecks === undefined) {
numOfChecks = numQAChecks;
}
if (completedQAChecks === numOfChecks) {
return mrzFeedbackCompletedColor ?? 'rgba(53,94,59,1.0)';
} else {
return mrzFeedbackUncompletedColor ?? 'white';
}
};
const styles = StyleSheet.create({
feedbackContainer: {
position: 'absolute',
top: 55,
alignItems: 'flex-start',
backgroundColor: 'rgba(200,200,200,0.8)',
width: '100%',
textAlignVertical: 'center'
},
feedbackText: {
color: 'white',
fontSize: 10,
textAlign: 'center',
width: '33.3%',
paddingTop: 10,
textAlignVertical: 'center',
height: '100%'
},
flexRow: {
flexDirection: 'row'
},
givenNamesQAList: {
color: statusCheck(givenNamesQAList.length)
},
lastNamesQAList: {
color: statusCheck(lastNamesQAList.length)
},
dobQAList: {
color: statusCheck(dobQAList.length)
},
nationalityQAList: {
color: statusCheck(nationalityQAList.length)
},
idNumberQAList: {
color: statusCheck(idNumberQAList.length)
},
issuingCountryQAList: {
color: statusCheck(issuingCountryQAList.length)
},
docExpirationDateQAList: {
color: statusCheck(docExpirationDateQAList.length)
},
additionalInformationQAList: {
color: statusCheck(additionalInformationQAList.length)
},
docMRZQAList: {
color: statusCheck(docMRZQAList.length, 1)
},
genderQAList: {
color: statusCheck(genderQAList.length),
paddingBottom: 10
},
docTypeQAList: {
color: statusCheck(docTypeQAList.length),
paddingBottom: 10
}
});
return /*#__PURE__*/React.createElement(View, {
testID: "scanDocumentView",
style: StyleSheet.absoluteFill
}, /*#__PURE__*/React.createElement(MRZCamera, {
onData: lines => {
if (onData) {
onData(lines);
} else {
const mrzResults = parseMRZ(lines);
if (mrzResults) {
if (currentMRZMatchesPreviousMRZs(numQAChecks, mrzResults)) {
setScanSuccess(true);
setIsActive(false);
mrzFinalResults(mrzResults);
}
}
}
},
scanSuccess: scanSuccess,
skipButtonText: skipButtonText,
style: [style ? style : StyleSheet.absoluteFill],
skipButtonEnabled: skipButtonEnabled,
skipButtonStyle: skipButtonStyle,
skipButton: skipButton,
onSkipPressed: onSkipPressed,
cameraProps: cameraProps,
enableBoundingBox: enableBoundingBox,
isActiveCamera: isActiveCamera ?? isActive // if isActiveCamera is not defined, use the internal state
}), enableMRZFeedBack ? /*#__PURE__*/React.createElement(View, {
style: [styles.feedbackContainer, mrzFeedbackContainer]
}, /*#__PURE__*/React.createElement(View, {
style: styles.flexRow
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.feedbackText, styles.givenNamesQAList, mrzFeedbackTextStyle]
}, `Given name ${givenNamesQAList.length} / ${numQAChecks}`), /*#__PURE__*/React.createElement(Text, {
style: [styles.feedbackText, styles.lastNamesQAList, mrzFeedbackTextStyle]
}, `Last name ${lastNamesQAList.length} / ${numQAChecks}`), /*#__PURE__*/React.createElement(Text, {
style: [styles.feedbackText, styles.dobQAList, mrzFeedbackTextStyle]
}, `DOB ${dobQAList.length} / ${numQAChecks}`)), /*#__PURE__*/React.createElement(View, {
style: styles.flexRow
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.feedbackText, styles.nationalityQAList, mrzFeedbackTextStyle]
}, `Nationality ${nationalityQAList.length} / ${numQAChecks}`), /*#__PURE__*/React.createElement(Text, {
style: [styles.feedbackText, styles.idNumberQAList, mrzFeedbackTextStyle]
}, `ID Number ${idNumberQAList.length} / ${numQAChecks}`), /*#__PURE__*/React.createElement(Text, {
style: [styles.feedbackText, styles.issuingCountryQAList, mrzFeedbackTextStyle]
}, `Issuing Country ${issuingCountryQAList.length} / ${numQAChecks}`)), /*#__PURE__*/React.createElement(View, {
style: styles.flexRow
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.feedbackText, styles.docExpirationDateQAList, mrzFeedbackTextStyle]
}, `Expiration Date ${docExpirationDateQAList.length} / ${numQAChecks}`), /*#__PURE__*/React.createElement(Text, {
style: [styles.feedbackText, styles.additionalInformationQAList, mrzFeedbackTextStyle]
}, `Additional Info ${additionalInformationQAList.length} / ${numQAChecks}`), /*#__PURE__*/React.createElement(Text, {
style: [styles.feedbackText, styles.docMRZQAList, mrzFeedbackTextStyle]
}, `DocMRZ ${docMRZQAList.length} / ${1}`)), /*#__PURE__*/React.createElement(View, {
style: styles.flexRow
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.feedbackText, styles.genderQAList, mrzFeedbackTextStyle]
}, `Gender ${genderQAList.length} / ${numQAChecks}`), /*#__PURE__*/React.createElement(Text, {
style: [styles.feedbackText, styles.docTypeQAList, mrzFeedbackTextStyle]
}, `DocType ${docTypeQAList.length} / ${numQAChecks}`))) : undefined);
};
export default MRZScanner;
//# sourceMappingURL=MRZScanner.js.map