viettel-ekyc-sdk
Version:
172 lines • 8.28 kB
JavaScript
import React, { useRef, useState } from 'react';
import { Image, StyleSheet, View } from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import Scanner, { RectangleOverlay, } from 'react-native-rectangle-scanner';
import { ActionIdCardFrame } from '../components/actionFrame';
import { BackgroundBackCamera } from '../components/BackgroundCamera';
import { Loadding } from '../components/Loadding';
import { SizedBox } from '../components/SizedBox';
import { WarningIdCardFrame } from '../components/WarningFrame';
import { getSquareInitPosition } from '../constants/camera';
import { OS } from '../constants/OS';
import { stylesCamera } from '../constants/style';
import { checkQualityAndSpoof, cropImageFrame, resizedImage, } from '../utils/widget';
const squareCameraPostion = getSquareInitPosition(undefined);
export const IdCardComponent = ({ headerComponent, warningFrameComponent, autoCaptureComponent, pickImageComponent, loadingComponent, enableAutoCapture, actionAfterGetImage, enableCheckSanity, enableCheckTempering, }) => {
const [isEnableSwitch, setIsEnableSwitch] = useState(enableAutoCapture || false);
const [enableDetect, setEnableDetect] = useState(true);
const [detectedRectangle, setDetectedRectangle] = useState(undefined);
let [isLoading, setIsLoading] = useState(false);
const cameraRef = useRef();
const onCapture = () => {
cameraRef.current.capture();
setEnableDetect(false);
};
const checkImage = async (image) => {
let imageResizedPath = await resizedImage(image);
let errorMessage = await checkQualityAndSpoof(imageResizedPath, enableCheckSanity, enableCheckTempering);
if (!isEnableSwitch) {
actionAfterGetImage({
image: imageResizedPath,
errorMessage: errorMessage || '',
});
}
else {
if (errorMessage !== '') {
setEnableDetect(true);
}
else {
actionAfterGetImage({
image: imageResizedPath,
errorMessage: errorMessage || '',
});
}
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
const actionPickImage = async (data) => {
setIsLoading(true);
if ((data === null || data === void 0 ? void 0 : data.assets) !== undefined && (data === null || data === void 0 ? void 0 : data.assets.length) > 0) {
setIsLoading(true);
const image = data === null || data === void 0 ? void 0 : data.assets[0].uri;
await checkImage(image);
}
setIsLoading(false);
};
const onPickImage = React.useCallback(() => {
ImagePicker.launchImageLibrary({
selectionLimit: 1,
mediaType: 'photo',
includeBase64: false,
}, actionPickImage);
}, [actionPickImage]);
const bottomLeftFrame = {
x: squareCameraPostion.x,
y: squareCameraPostion.y + squareCameraPostion.height,
};
const bottomRightFrame = {
x: squareCameraPostion.x + squareCameraPostion.width,
y: squareCameraPostion.y + squareCameraPostion.height,
};
const topLeftFrame = {
x: squareCameraPostion.x,
y: squareCameraPostion.y,
};
const topRightFrame = {
x: squareCameraPostion.x + squareCameraPostion.width,
y: squareCameraPostion.y,
};
const checkRectangleDetectOnFrame = (
// eslint-disable-next-line no-shadow
detectedRectangle) => {
const topLeft = detectedRectangle.topLeft;
const bottomLeft = detectedRectangle.topRight;
const topRight = detectedRectangle.bottomLeft;
const bottomRight = detectedRectangle.bottomRight;
if (detectedRectangle.dimensions != null) {
const zoom = detectedRectangle.dimensions.height / OS.HEIGHT;
if (topLeft.x > topLeftFrame.x * zoom &&
topLeft.y > topLeftFrame.y * zoom &&
topRight.x < topRightFrame.x * zoom &&
topRight.y > topRightFrame.y * zoom &&
bottomLeft.x > bottomLeftFrame.x * zoom &&
bottomLeft.y < bottomLeftFrame.y * zoom &&
bottomRight.x < bottomRightFrame.x * zoom &&
bottomRight.y < bottomRightFrame.y * zoom) {
return true;
}
}
return false;
};
const processImage = async (uri, topLeft, squarePosition) => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Image.getSize(uri, async (width, height) => {
let imageCroppedPath = await cropImageFrame(uri, topLeft, width, squarePosition.width, squarePosition.height);
if (imageCroppedPath !== undefined) {
await checkImage(imageCroppedPath);
setIsLoading(false);
}
else {
setIsLoading(false);
}
});
};
return (React.createElement(View, { style: styles.container },
React.createElement(BackgroundBackCamera, { squareCameraPostion: squareCameraPostion }),
headerComponent !== undefined ? headerComponent() : null,
React.createElement(View, { style: styles.cameraPreview },
React.createElement(Scanner, { ref: cameraRef, onPictureProcessed: async (event) => {
setIsLoading(true);
const urlDecoded = decodeURIComponent(event.initialImage);
await processImage(urlDecoded, topLeftFrame, squareCameraPostion);
}, capturedQuality: 1.0, onRectangleDetected: isEnableSwitch
? // eslint-disable-next-line no-shadow
({ detectedRectangle }) => {
// console.log(detectedRectangle)
if (checkRectangleDetectOnFrame(detectedRectangle)) {
// @ts-ignore
setDetectedRectangle(detectedRectangle);
}
else {
setDetectedRectangle(undefined);
}
}
: () => {
setDetectedRectangle(undefined);
}, enableTorch: false,
// eslint-disable-next-line react-native/no-inline-styles
style: { flex: 1 }, onErrorProcessingImage: (err) => console.log('error', err) }),
React.createElement(RectangleOverlay, { detectedRectangle: detectedRectangle, backgroundColor: 'rgba(255,181,6, 0.2)', borderColor: 'rgb(255,181,6)', borderWidth: 4, detectedBackgroundColor: 'rgba(255,181,6, 0.3)', detectedBorderWidth: 6, detectedBorderColor: 'rgb(255,218,124)', onDetectedCapture: () => {
if (enableDetect)
onCapture();
}, allowDetection: true })),
React.createElement(View, { style: stylesCamera.mainContainer },
React.createElement(View, { style: stylesCamera.warningAndActionContainer },
warningFrameComponent || React.createElement(WarningIdCardFrame, null),
React.createElement(SizedBox, { width: 0, height: 20 }),
React.createElement(ActionIdCardFrame, { autoCaptureComponent: autoCaptureComponent, pickImageComponent: pickImageComponent, capture: () => {
onCapture();
}, pickImage: () => {
onPickImage();
}, toggleSwitch: () => {
setIsEnableSwitch(!isEnableSwitch);
}, isEnableSwitch: isEnableSwitch }))),
isLoading ? (loadingComponent !== undefined ? (loadingComponent()) : (React.createElement(Loadding, null))) : (React.createElement(View, null))));
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignContent: 'center',
alignItems: 'center',
},
cameraPreview: {
position: 'relative',
height: `100%`,
width: `100%`,
},
cameraMain: {
height: OS.HEIGHT,
width: OS.WIDTH,
},
});
//# sourceMappingURL=IdCardComponent.js.map