@trustchex/react-native-sdk 1.161.0

package/lib/module/Shared/Components/IdentityDocumentCamera.js

@@ -0,0 +1,968 @@
+"use strict";
+
+/* eslint-disable react-native/no-inline-styles */
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet, Text as TextView, Platform, Vibration, TouchableOpacity, Text, Linking, Image } from 'react-native';
+import { Camera, runAsync, runAtTargetFps, useCameraDevice, useCameraFormat, useCameraPermission, useFrameProcessor } from 'react-native-vision-camera';
+import { useRunOnJS, useSharedValue } from 'react-native-worklets-core';
+import { useTextRecognition } from "../VisionCameraPlugins/TextRecognition/index.js";
+import { useFaceDetector } from "../VisionCameraPlugins/FaceDetector/index.js";
+import mrzUtils from "../Libs/mrz.utils.js";
+import { crop } from "../VisionCameraPlugins/Cropper/index.js";
+import { useKeepAwake } from "../Libs/native-keep-awake.utils.js";
+import ImageEditor from '@react-native-community/image-editor';
+import { useIsFocused } from '@react-navigation/native';
+import { AdaptiveThresholdTypes, ColorConversionCodes, DataTypes, ObjectType, OpenCV, ThresholdTypes } from 'react-native-fast-opencv';
+import { getAverageBrightness } from "../Libs/camera.utils.js";
+import { useTranslation } from 'react-i18next';
+import LottieView from 'lottie-react-native';
+import { ActivityIndicator, Button } from 'react-native-paper';
+import { scanCodes } from "../VisionCameraPlugins/BarcodeScanner/index.js";
+import { speakWithDebounce } from "../Libs/tts.utils.js";
+import AppContext from "../Contexts/AppContext.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// const windowWidth = Dimensions.get('window').width;
+// const windowHeight = Dimensions.get('window').height;
+
+const HOLOGRAM_IMAGE_COUNT = 7;
+const HOLOGRAM_DETECTION_THRESHOLD = 3500;
+const HOLOGRAM_DETECTION_RETRY_COUNT = 3;
+const SECOND_FACE_DETECTION_RETRY_COUNT = 10;
+const MRZ_VALIDATION_RETRY_COUNT = 3;
+let faceImages = [];
+const IdentityDocumentCamera = ({
+  onlyMRZScan,
+  onIdentityDocumentScanned,
+  showDebugImages = false
+}) => {
+  useKeepAwake();
+  const appContext = React.useContext(AppContext);
+  const cameraRef = React.useRef(null);
+  const cameraPermission = useCameraPermission();
+  const [permissionsRequested, setPermissionsRequested] = React.useState(false);
+  const [isActive, setIsActive] = React.useState(false);
+  const isFocused = useIsFocused();
+  const [isTorchOn, setIsTorchOn] = React.useState(false);
+  const exposureValue = useSharedValue(0);
+  const [exposure, setExposure] = React.useState(0);
+  const device = useCameraDevice('back', {
+    physicalDevices: ['wide-angle-camera']
+  });
+  const format = useCameraFormat(device, [{
+    videoResolution: {
+      width: 1920,
+      height: 1080
+    },
+    iso: 'max',
+    photoHdr: false,
+    videoHdr: false,
+    videoStabilizationMode: 'standard',
+    autoFocusSystem: 'phase-detection'
+  }]);
+  const isCameraInitialized = useSharedValue(false);
+  const [currentFaceImage, setCurrentFaceImage] = useState(undefined);
+  const [_currentHologramMaskImage, setCurrentHologramMaskImage] = useState(undefined);
+  const [currentHologramImage, setCurrentHologramImage] = useState(undefined);
+  const [currentSecondaryFaceImage, setCurrentSecondaryFaceImage] = useState(undefined);
+  const [isBrightnessLow, setIsBrightnessLow] = useState(false);
+  const [hasGuideShown, setHasGuideShown] = useState(false);
+  const [status, setStatus] = useState('SEARCHING');
+  const [nextStep, setNextStep] = useState('SCAN_ID_FRONT_OR_PASSPORT');
+  const hologramDetectionCurrentRetryCount = useSharedValue(0);
+  const secondaryFaceDetectionCurrentRetryCount = useSharedValue(0);
+  const mrzDetectionCurrentRetryCount = useSharedValue(0);
+  const faceDetectionErrorCount = useSharedValue(0);
+  const [faceDetectionEnabled, setFaceDetectionEnabled] = useState(true);
+  const {
+    t
+  } = useTranslation();
+  // const [boundingBox, setBoundingBox] = useState<Bounds>({
+  //   x: 0,
+  //   y: 0,
+  //   width: 0,
+  //   height: 0,
+  // });
+
+  const {
+    scanText
+  } = useTextRecognition({
+    language: 'latin'
+  });
+  const {
+    detectFaces
+  } = useFaceDetector({
+    contourMode: 'none',
+    landmarkMode: 'none',
+    classificationMode: 'all',
+    performanceMode: 'accurate',
+    trackingEnabled: false,
+    minFaceSize: 0.1,
+    autoScale: false
+  });
+  useEffect(() => {
+    const requestPermissions = async () => {
+      if (!cameraPermission.hasPermission) {
+        await cameraPermission.requestPermission();
+      }
+      setPermissionsRequested(true);
+    };
+    requestPermissions();
+  }, [cameraPermission]);
+  useEffect(() => {
+    if (!!device && !!format && isFocused) {
+      setIsActive(true);
+    } else {
+      setIsActive(false);
+      // Clear any pending OpenCV operations when camera becomes inactive
+      try {
+        OpenCV.clearBuffers();
+      } catch (error) {
+        // Ignore cleanup errors
+      }
+
+      // Reset face images array to free memory
+      faceImages = [];
+
+      // Reset retry counters
+      hologramDetectionCurrentRetryCount.value = 0;
+      secondaryFaceDetectionCurrentRetryCount.value = 0;
+      mrzDetectionCurrentRetryCount.value = 0;
+    }
+    return () => {
+      setIsActive(false);
+      // Cleanup on unmount
+      try {
+        OpenCV.clearBuffers();
+      } catch (error) {
+        // Ignore cleanup errors
+      }
+
+      // Clear face images array
+      faceImages = [];
+    };
+  }, [device, format, isFocused, hologramDetectionCurrentRetryCount, secondaryFaceDetectionCurrentRetryCount, mrzDetectionCurrentRetryCount, faceDetectionErrorCount]);
+  useEffect(() => {
+    if (hasGuideShown) {
+      const message = isBrightnessLow ? t('identityDocumentCamera.lowBrightness') : nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? t('identityDocumentCamera.alignPhotoSide') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.alignHologram') : nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.alignIDBackSide') : nextStep === 'COMPLETED' ? t('identityDocumentCamera.scanCompleted') : '';
+      if (appContext.currentWorkflowStep?.data?.voiceGuidanceActive && message) {
+        speakWithDebounce(message);
+      }
+    }
+  }, [appContext.currentWorkflowStep?.data?.voiceGuidanceActive, hasGuideShown, isBrightnessLow, nextStep, t]);
+  const detectDocumentType = (faces, ocrText, mrzFields) => {
+    if (faces.length > 0 && !mrzFields && ocrText?.includes('Signature')
+    // ocrText?.includes('Surname') &&
+    // ocrText?.includes('Given Name(s)') &&
+    // ocrText?.includes('Date of Birth') &&
+    // ocrText?.includes('Document No') &&
+    // ocrText?.includes('Valid Until')
+    ) {
+      return 'ID_FRONT';
+    } else if (faces.length === 0 && mrzFields?.documentCode === 'I'
+    // ocrText?.includes("Father's Name") &&
+    // ocrText?.includes("Mother's Name") &&
+    // ocrText?.includes('Issued By')
+    ) {
+      return 'ID_BACK';
+    } else if (faces.length > 0 && mrzFields?.documentCode === 'P') {
+      return 'PASSPORT';
+    }
+    return 'UNKNOWN';
+  };
+
+  // const setBoundingBoxInJS = useRunOnJS(
+  //   (bounds: Bounds) => {
+  //     setBoundingBox(bounds);
+  //   },
+  //   [setBoundingBox],
+  // );
+
+  // const isBlockInFrame = (block: BlocksData) => {
+  //   'worklet';
+  //   const scanningFrame = {
+  //     x: 0.03 * 1080,
+  //     y: 0.35 * 1920,
+  //     width: 0.94 * 1080,
+  //     height: 0.3 * 1920,
+  //   } as Bounds;
+  //   const bounds = {
+  //     x: block.blockFrame.x,
+  //     y: block.blockFrame.y,
+  //     width: block.blockFrame.width,
+  //     height: block.blockFrame.height,
+  //   } as Bounds;
+
+  //   if (
+  //     bounds.x >= scanningFrame.x &&
+  //     bounds.y >= scanningFrame.y &&
+  //     bounds.x + bounds.width <= scanningFrame.x + scanningFrame.width &&
+  //     bounds.y + bounds.height <= scanningFrame.y + scanningFrame.height
+  //   ) {
+  //     return true;
+  //   }
+
+  //   setBoundingBoxInJS({
+  //     x: (bounds.x / 1080) * windowWidth,
+  //     y: (bounds.y / 1920) * windowHeight,
+  //     width: (bounds.width / 1080) * windowWidth,
+  //     height: (bounds.height / 1920) * windowHeight,
+  //   });
+
+  //   return false;
+  // };
+
+  const applyThreshold = image => {
+    const gray = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
+
+    // Convert to grayscale
+    OpenCV.invoke('cvtColor', image, gray, ColorConversionCodes.COLOR_RGB2GRAY);
+
+    // Apply GaussianBlur to reduce noise
+    const kSize = OpenCV.createObject(ObjectType.Size, 5, 5);
+    OpenCV.invoke('GaussianBlur', gray, gray, kSize, 0);
+
+    // Apply Otsu's thresholding
+    OpenCV.invoke('threshold', gray, gray, 0, 255, ThresholdTypes.THRESH_BINARY + ThresholdTypes.THRESH_OTSU);
+    return gray;
+  };
+  const areImagesSimilar = (image1, image2, threshold = 15000) => {
+    try {
+      if (!image1 || !image2) {
+        return false;
+      }
+      const mat1 = OpenCV.base64ToMat(image1);
+      const mat2 = OpenCV.base64ToMat(image2);
+      const diff = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
+      OpenCV.invoke('absdiff', applyThreshold(mat1), applyThreshold(mat2), diff);
+      const count = OpenCV.invoke('countNonZero', diff);
+      return count.value < threshold;
+    } catch (error) {
+      // console.log('Error while comparing images:', error);
+      return false;
+    }
+  };
+  const detectHologram = images => {
+    try {
+      const lowerBound = OpenCV.createObject(ObjectType.Scalar, 40, 90, 90);
+      const upperBound = OpenCV.createObject(ObjectType.Scalar, 179, 255, 255);
+      const diffs = [];
+      const hologram = OpenCV.base64ToMat(images[0]);
+      for (let i = 0; i < images.length - 1; i++) {
+        const mat1 = OpenCV.base64ToMat(images[i]);
+        const mat2 = OpenCV.base64ToMat(images[i + 1]);
+        let diff = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
+        OpenCV.invoke('absdiff', mat1, mat2, diff);
+        OpenCV.invoke('cvtColor', diff, diff, ColorConversionCodes.COLOR_RGB2HSV);
+        OpenCV.invoke('inRange', diff, lowerBound, upperBound, diff);
+        if (OpenCV.invoke('countNonZero', diff).value > 500) {
+          OpenCV.invoke('addWeighted', hologram, 0.5, mat2, 0.5, 0, hologram);
+          diffs.push(diff);
+        }
+      }
+      const hologramMask = diffs[0];
+      for (let i = 1; i < diffs.length; i++) {
+        OpenCV.invoke('addWeighted', hologramMask, 0.5, diffs[i], 0.5, 0, hologramMask);
+      }
+      OpenCV.invoke('adaptiveThreshold', hologramMask, hologramMask, 255, AdaptiveThresholdTypes.ADAPTIVE_THRESH_GAUSSIAN_C, ThresholdTypes.THRESH_BINARY_INV, 21, 2);
+      const count = OpenCV.invoke('countNonZero', hologramMask);
+      if (count.value > HOLOGRAM_DETECTION_THRESHOLD) {
+        const hologramMaskJs = OpenCV.toJSValue(hologramMask);
+        const hologramJs = OpenCV.toJSValue(hologram);
+        return [hologramMaskJs.base64, hologramJs.base64];
+      }
+    } catch (error) {
+      // console.log('Error while detecting hologram:', error);
+    }
+    return [];
+  };
+  const getFaceImagesOrderedByLocation = faces => {
+    return faces.sort((a, b) => {
+      if (a.bounds.x < b.bounds.x) {
+        return -1;
+      } else if (a.bounds.x > b.bounds.x) {
+        return 1;
+      }
+      return 0;
+    });
+  };
+  const getFaceImages = async (faces, image, width, height) => {
+    if (!faces.length || !image || width <= 0 || height <= 0) {
+      return [];
+    }
+    const croppedFaces = [];
+    try {
+      for (const face of getFaceImagesOrderedByLocation(faces)) {
+        const uri = `data:image/jpeg;base64,${image}`;
+
+        // Add validation for face bounds to prevent invalid crop operations
+        if (face.bounds.x < 0 || face.bounds.y < 0 || face.bounds.width <= 0 || face.bounds.height <= 0 || face.bounds.x >= width || face.bounds.y >= height) {
+          console.warn('Invalid face bounds detected, skipping face:', face.bounds);
+          continue;
+        }
+
+        // Calculate crop area with bounds checking
+        const expandedWidth = face.bounds.width * 1.5;
+        const expandedHeight = face.bounds.height * 1.5;
+        const offsetX = Math.max(0, face.bounds.x - expandedWidth / 6);
+        const offsetY = Platform.OS === 'ios' ? Math.max(0, face.bounds.y - expandedHeight / 6) : Math.max(0, width - face.bounds.y - expandedHeight / 1.2);
+        const croppedFace = await ImageEditor.cropImage(uri, {
+          offset: {
+            x: offsetX,
+            y: offsetY
+          },
+          size: {
+            width: expandedWidth,
+            height: expandedHeight
+          },
+          displaySize: {
+            width: 240,
+            height: 320
+          },
+          includeBase64: true,
+          quality: 1
+        });
+        if (croppedFace.width !== 240 || croppedFace.height !== 320) {
+          try {
+            const croppedFaceMat = OpenCV.base64ToMat(croppedFace.base64);
+
+            // Ensure crop dimensions are valid for the matrix
+            const matCropWidth = Math.min(240, croppedFace.width);
+            const matCropHeight = Math.min(320, croppedFace.height);
+
+            // Only crop if we have valid dimensions
+            if (matCropWidth > 0 && matCropHeight > 0) {
+              OpenCV.invoke('crop', croppedFaceMat, croppedFaceMat, OpenCV.createObject(ObjectType.Rect, 0, 0, matCropWidth, matCropHeight));
+              croppedFaces.push(OpenCV.toJSValue(croppedFaceMat).base64);
+            } else {
+              // Fallback to original base64 if crop dimensions are invalid
+              croppedFaces.push(croppedFace.base64);
+            }
+          } catch (cropError) {
+            console.warn('OpenCV crop operation failed:', cropError);
+            // Fallback to original image if OpenCV crop fails
+            croppedFaces.push(croppedFace.base64);
+          }
+        } else {
+          croppedFaces.push(croppedFace.base64);
+        }
+      }
+    } catch (error) {
+      console.warn('Error while cropping face:', error);
+    }
+    return croppedFaces;
+  };
+  const setNextStepAndVibrate = nextStepType => {
+    setNextStep(nextStepType);
+    Vibration.vibrate(100);
+  };
+  const handleBrightness = useRunOnJS(isBright => {
+    setIsBrightnessLow(!isBright);
+  }, [setIsBrightnessLow]);
+  const handleFaceAndText = useRunOnJS(async (text, faces, frameWidth, frameHeight, barcode, image) => {
+    if (device?.hasTorch && isTorchOn && (currentHologramImage || hologramDetectionCurrentRetryCount.value >= HOLOGRAM_DETECTION_RETRY_COUNT)) {
+      setIsTorchOn(false);
+    }
+    if (nextStep === 'COMPLETED') {
+      setStatus('SCANNED');
+      return;
+    }
+    if (!text || text.length < 10 || !image) {
+      setStatus('SEARCHING');
+      return;
+    }
+    const {
+      mrzText,
+      parsedResult: parsedMRZData
+    } = mrzUtils.getMRZData(text);
+    const croppedFaces = await getFaceImages(faces, image, frameWidth, frameHeight);
+    const documentType = detectDocumentType(faces, text, parsedMRZData?.fields);
+    const scannedData = {
+      image,
+      documentType,
+      mrzText: mrzText ?? undefined,
+      mrzFields: parsedMRZData?.fields
+    };
+    scannedData.faceImage = croppedFaces[0];
+    setCurrentFaceImage(croppedFaces[0]);
+    if (!onlyMRZScan) {
+      if (nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' && !(documentType === 'ID_FRONT' || documentType === 'PASSPORT') || nextStep === 'SCAN_ID_BACK' && documentType !== 'ID_BACK') {
+        setStatus('INCORRECT');
+        return;
+      }
+      if (croppedFaces.length > 0 && croppedFaces[0]) {
+        if (currentFaceImage) {
+          scannedData.faceImage = currentFaceImage;
+        } else {
+          scannedData.faceImage = croppedFaces[0];
+          setCurrentFaceImage(croppedFaces[0]);
+        }
+        if (currentHologramImage) {
+          scannedData.hologramImage = currentHologramImage;
+        } else if (faceImages.length <= HOLOGRAM_IMAGE_COUNT) {
+          if (device?.hasTorch) {
+            setIsTorchOn(true);
+          }
+          faceImages.push(croppedFaces[0]);
+        } else {
+          const [hologramMask, hologram] = detectHologram(faceImages);
+          if (!!currentFaceImage && areImagesSimilar(currentFaceImage, hologram, 25000)) {
+            setCurrentHologramMaskImage(hologramMask);
+            scannedData.hologramImage = hologram;
+            setCurrentHologramImage(hologram);
+          }
+          faceImages = [];
+          hologramDetectionCurrentRetryCount.value++;
+        }
+        if (currentSecondaryFaceImage) {
+          scannedData.secondaryFaceImage = currentSecondaryFaceImage;
+        } else if (!!scannedData.faceImage && croppedFaces.length > 1 && !!croppedFaces[1] && areImagesSimilar(scannedData.faceImage, croppedFaces[1])) {
+          scannedData.secondaryFaceImage = croppedFaces[1];
+          setCurrentSecondaryFaceImage(scannedData.secondaryFaceImage);
+        } else {
+          secondaryFaceDetectionCurrentRetryCount.value++;
+        }
+      }
+    }
+    if (documentType === 'ID_FRONT') {
+      if (nextStep === 'SCAN_ID_FRONT_OR_PASSPORT') {
+        setStatus('SCANNED');
+        if (onlyMRZScan) {
+          setNextStepAndVibrate('SCAN_ID_BACK');
+          onIdentityDocumentScanned(scannedData);
+        } else {
+          setNextStepAndVibrate('SCAN_HOLOGRAM');
+        }
+      } else if (nextStep === 'SCAN_HOLOGRAM' && (!!scannedData.hologramImage || hologramDetectionCurrentRetryCount.value >= HOLOGRAM_DETECTION_RETRY_COUNT) && (!!scannedData.secondaryFaceImage || secondaryFaceDetectionCurrentRetryCount.value >= SECOND_FACE_DETECTION_RETRY_COUNT)) {
+        setStatus('SCANNED');
+        setNextStepAndVibrate('SCAN_ID_BACK');
+        onIdentityDocumentScanned(scannedData);
+      }
+    } else if (documentType === 'PASSPORT') {
+      if (nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' && !scannedData.hologramImage) {
+        setStatus('SCANNED');
+        if (onlyMRZScan) {
+          setNextStepAndVibrate('COMPLETED');
+          onIdentityDocumentScanned(scannedData);
+        } else {
+          setNextStepAndVibrate('SCAN_HOLOGRAM');
+        }
+      } else if ((nextStep === 'SCAN_HOLOGRAM' && (!!scannedData.hologramImage || hologramDetectionCurrentRetryCount.value >= HOLOGRAM_DETECTION_RETRY_COUNT) && (!!scannedData.secondaryFaceImage || secondaryFaceDetectionCurrentRetryCount.value >= SECOND_FACE_DETECTION_RETRY_COUNT) || onlyMRZScan) && !!scannedData.mrzText && (parsedMRZData?.valid || mrzDetectionCurrentRetryCount.value >= MRZ_VALIDATION_RETRY_COUNT)) {
+        setStatus('SCANNED');
+        setNextStepAndVibrate('COMPLETED');
+        onIdentityDocumentScanned(scannedData);
+      } else if (!parsedMRZData?.valid) {
+        mrzDetectionCurrentRetryCount.value++;
+      }
+    } else if (documentType === 'ID_BACK') {
+      if ((parsedMRZData?.fields?.issuingState === 'TUR' && barcode?.value?.trim() === parsedMRZData?.fields?.optional1?.trim() || parsedMRZData?.fields?.issuingState !== 'TUR' || onlyMRZScan) && nextStep === 'SCAN_ID_BACK' && !!scannedData.mrzText && (parsedMRZData?.valid || mrzDetectionCurrentRetryCount.value >= MRZ_VALIDATION_RETRY_COUNT)) {
+        scannedData.barcodeValue = barcode?.value ?? undefined;
+        setStatus('SCANNED');
+        setNextStepAndVibrate('COMPLETED');
+        onIdentityDocumentScanned(scannedData);
+      } else if (!parsedMRZData?.valid) {
+        mrzDetectionCurrentRetryCount.value++;
+      }
+    } else {
+      setStatus('SCANNING');
+    }
+
+    // Clear OpenCV buffers to prevent memory leaks
+    try {
+      OpenCV.clearBuffers();
+    } catch (bufferError) {
+      // Ignore buffer cleanup errors
+      console.warn('Buffer cleanup error:', bufferError);
+    }
+  }, [currentFaceImage, currentHologramImage, currentSecondaryFaceImage, device, nextStep, onlyMRZScan]);
+  const handleExposureValue = useRunOnJS(value => {
+    setExposure(value);
+  }, [exposure]);
+  const handleExposureAndBrightness = frame => {
+    'worklet';
+
+    const averageBrightness = getAverageBrightness(frame);
+    const minExposure = device?.minExposure ?? 0;
+    const maxExposure = device?.maxExposure ?? 0;
+    const lowerBrightnessBound = 40;
+    const upperBrightnessBound = 120;
+    if (averageBrightness < lowerBrightnessBound && exposureValue.value < maxExposure) {
+      exposureValue.value = exposureValue.value + 1;
+    } else if (averageBrightness > upperBrightnessBound && exposureValue.value > minExposure) {
+      exposureValue.value = exposureValue.value - 1;
+    }
+    const isBright = averageBrightness > lowerBrightnessBound;
+    handleExposureValue(exposureValue.value);
+    handleBrightness(isBright);
+    return isBright;
+  };
+  const handleWorklet = frame => {
+    'worklet';
+
+    try {
+      const isBright = handleExposureAndBrightness(frame);
+      if (!isBright) {
+        return;
+      }
+
+      // Validate frame dimensions before processing
+      if (!frame.width || !frame.height || frame.width <= 0 || frame.height <= 0) {
+        console.warn('Invalid frame dimensions:', {
+          width: frame.width,
+          height: frame.height
+        });
+        return;
+      }
+
+      // Detect faces first with error handling
+      let detectedFaces = [];
+      try {
+        if (faceDetectionEnabled) {
+          detectedFaces = detectFaces(frame);
+          // Reset error count on successful detection
+          faceDetectionErrorCount.value = 0;
+        }
+      } catch (faceError) {
+        console.warn('Face detection failed:', faceError);
+        faceDetectionErrorCount.value += 1;
+
+        // Disable face detection temporarily after 5 consecutive errors
+        if (faceDetectionErrorCount.value >= 5) {
+          setFaceDetectionEnabled(false);
+          // Re-enable after 10 seconds
+          setTimeout(() => {
+            setFaceDetectionEnabled(true);
+            faceDetectionErrorCount.value = 0;
+          }, 10000);
+        }
+        detectedFaces = []; // Continue without face detection
+      }
+
+      // Create a copy of the frame for cropping to avoid buffer conflicts
+      let image;
+      try {
+        image = crop(frame, {
+          cropRegion: {
+            top: 0,
+            left: 0,
+            width: 100,
+            height: 100
+          },
+          includeImageBase64: true,
+          saveAsFile: false
+        });
+      } catch (cropError) {
+        console.warn('Crop operation failed:', cropError);
+        return;
+      }
+
+      // Text recognition with error handling
+      let scannedText;
+      try {
+        scannedText = scanText(frame);
+      } catch (textError) {
+        console.warn('Text recognition failed:', textError);
+        scannedText = {
+          blocks: [],
+          resultText: ''
+        };
+      }
+
+      // Barcode scanning with error handling
+      let barcodes = [];
+      try {
+        barcodes = scanCodes(frame, {
+          barcodeTypes: ['code-128', 'code-39', 'code-93', 'ean-13', 'qr']
+        });
+      } catch (barcodeError) {
+        console.warn('Barcode scanning failed:', barcodeError);
+        barcodes = [];
+      }
+      handleFaceAndText(scannedText.resultText ?? '', detectedFaces, frame.width, frame.height, barcodes.length ? barcodes[0] : undefined, image?.base64);
+    } catch (error) {
+      console.warn('Frame processing error:', error);
+    }
+  };
+  const frameProcessor = useFrameProcessor(frame => {
+    'worklet';
+
+    if (!isCameraInitialized.value) {
+      return;
+    }
+    if (Platform.OS === 'ios') {
+      // iOS: Run at target 6 FPS using runAtTargetFps
+      runAtTargetFps(6, () => {
+        'worklet';
+
+        try {
+          handleWorklet(frame);
+        } catch (error) {
+          console.warn('Frame processor error:', error);
+        }
+      });
+    } else {
+      // Android: Run async without throttling
+      try {
+        runAsync(frame, () => {
+          'worklet';
+
+          try {
+            handleWorklet(frame);
+          } catch (workletError) {
+            console.warn('Worklet execution error:', workletError);
+          }
+        });
+      } catch (error) {
+        console.warn('Frame processor error:', error);
+      }
+    }
+  }, [handleFaceAndText, isCameraInitialized]);
+  if (!permissionsRequested) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.permissionContainer,
+      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "large"
+      })
+    });
+  }
+  if (!cameraPermission.hasPermission) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.permissionContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.permissionText,
+        children: t('general.noCameraPermissionGiven')
+      }), /*#__PURE__*/_jsx(Button, {
+        mode: "contained",
+        onPress: () => {
+          Linking.openSettings();
+        },
+        children: t('general.openSettings')
+      })]
+    });
+  }
+  if (device == null) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.permissionContainer,
+      children: /*#__PURE__*/_jsx(TextView, {
+        style: styles.permissionText,
+        children: t('general.noCameraDetected')
+      })
+    });
+  }
+  const handleFocus = async event => {
+    if (cameraRef.current && device.supportsFocus) {
+      try {
+        const {
+          locationX,
+          locationY
+        } = event.nativeEvent;
+        await cameraRef.current.focus({
+          x: locationX,
+          y: locationY
+        });
+      } catch (error) {
+        // console.log('Error while focusing:', error);
+      }
+    }
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: StyleSheet.absoluteFill,
+    children: !hasGuideShown ? /*#__PURE__*/_jsxs(View, {
+      style: styles.guide,
+      children: [/*#__PURE__*/_jsx(LottieView, {
+        source: require('../../Shared/Animations/id-or-passport.json'),
+        style: styles.guideAnimation,
+        loop: true,
+        autoPlay: true
+      }), /*#__PURE__*/_jsx(TextView, {
+        style: styles.guideHeader,
+        children: t('identityDocumentCamera.guideHeader')
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.guidePoints,
+        children: [/*#__PURE__*/_jsx(TextView, {
+          style: styles.guideText,
+          children: t('identityDocumentCamera.guideText')
+        }), /*#__PURE__*/_jsxs(TextView, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('identityDocumentCamera.guidePoint1')]
+        }), /*#__PURE__*/_jsxs(TextView, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('identityDocumentCamera.guidePoint2')]
+        }), /*#__PURE__*/_jsxs(TextView, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('identityDocumentCamera.guidePoint3')]
+        })]
+      }), /*#__PURE__*/_jsx(Button, {
+        mode: "contained",
+        onPress: () => {
+          setHasGuideShown(true);
+        },
+        children: t('general.letsGo')
+      })]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Camera, {
+        ref: cameraRef,
+        frameProcessor: frameProcessor,
+        style: StyleSheet.absoluteFill,
+        device: device,
+        format: format,
+        isActive: isActive,
+        photo: false,
+        video: false,
+        audio: false,
+        torch: isTorchOn ? 'on' : 'off',
+        fps: Math.max(format?.minFps ?? 0, 30),
+        exposure: exposure,
+        onInitialized: () => {
+          isCameraInitialized.value = true;
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.topZone,
+        children: /*#__PURE__*/_jsx(TextView, {
+          style: styles.topZoneText,
+          children: isBrightnessLow ? t('identityDocumentCamera.lowBrightness') : nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? t('identityDocumentCamera.alignPhotoSide') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.alignHologram') : nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.alignIDBackSide') : nextStep === 'COMPLETED' ? t('identityDocumentCamera.scanCompleted') : ''
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.leftZone
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.rightZone
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.bottomZone,
+        children: [showDebugImages && currentFaceImage && /*#__PURE__*/_jsxs(View, {
+          style: styles.imageContainer,
+          children: [/*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: `data:image/jpeg;base64,${currentFaceImage}`
+            },
+            style: styles.faceImage
+          }), /*#__PURE__*/_jsx(TextView, {
+            style: styles.imageContainerText,
+            children: "Face"
+          })]
+        }), showDebugImages && currentSecondaryFaceImage && /*#__PURE__*/_jsxs(View, {
+          style: styles.imageContainer,
+          children: [/*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: `data:image/jpeg;base64,${currentSecondaryFaceImage}`
+            },
+            style: styles.faceImage
+          }), /*#__PURE__*/_jsx(TextView, {
+            style: styles.imageContainerText,
+            children: "Secondary Face"
+          })]
+        }), showDebugImages && _currentHologramMaskImage && /*#__PURE__*/_jsxs(View, {
+          style: styles.imageContainer,
+          children: [/*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: `data:image/jpeg;base64,${_currentHologramMaskImage}`
+            },
+            style: styles.faceImage
+          }), /*#__PURE__*/_jsx(TextView, {
+            style: styles.imageContainerText,
+            children: "Hologram Mask"
+          })]
+        }), showDebugImages && currentHologramImage && /*#__PURE__*/_jsxs(View, {
+          style: styles.imageContainer,
+          children: [/*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: `data:image/jpeg;base64,${currentHologramImage}`
+            },
+            style: styles.faceImage
+          }), /*#__PURE__*/_jsx(TextView, {
+            style: styles.imageContainerText,
+            children: "Hologram"
+          })]
+        }), showDebugImages && /*#__PURE__*/_jsxs(View, {
+          style: styles.debugInfoContainer,
+          children: [/*#__PURE__*/_jsxs(TextView, {
+            style: styles.debugInfoText,
+            children: ["Step: ", nextStep]
+          }), /*#__PURE__*/_jsxs(TextView, {
+            style: styles.debugInfoText,
+            children: ["Status: ", status]
+          }), /*#__PURE__*/_jsx(TextView, {
+            style: styles.debugInfoText,
+            children: `Face: ${currentFaceImage ? '✓' : '✗'} ${!faceDetectionEnabled ? '(DISABLED)' : ''}`
+          }), /*#__PURE__*/_jsx(TextView, {
+            style: styles.debugInfoText,
+            children: `Hologram: ${currentHologramImage ? '✓' : '✗'} (${hologramDetectionCurrentRetryCount.value}/${HOLOGRAM_DETECTION_RETRY_COUNT})`
+          }), /*#__PURE__*/_jsx(TextView, {
+            style: styles.debugInfoText,
+            children: `2nd Face: ${currentSecondaryFaceImage ? '✓' : '✗'} (${secondaryFaceDetectionCurrentRetryCount.value}/${SECOND_FACE_DETECTION_RETRY_COUNT})`
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: [styles.scanArea, {
+          borderColor: status === 'SCANNED' || nextStep === 'COMPLETED' ? 'green' : status === 'INCORRECT' ? 'red' : 'white'
+        }],
+        children: [nextStep === 'SCAN_HOLOGRAM' && isTorchOn && !isBrightnessLow && /*#__PURE__*/_jsx(LottieView, {
+          source: require('../../Shared/Animations/hologram-scan.json'),
+          style: styles.animation,
+          loop: true,
+          autoPlay: true
+        }), nextStep !== 'COMPLETED' && isBrightnessLow && /*#__PURE__*/_jsx(LottieView, {
+          source: require('../../Shared/Animations/light.json'),
+          style: styles.animation,
+          loop: true,
+          autoPlay: true
+        }), nextStep === 'COMPLETED' && /*#__PURE__*/_jsx(LottieView, {
+          source: require('../../Shared/Animations/success.json'),
+          style: styles.animation,
+          loop: false,
+          autoPlay: true
+        })]
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: handleFocus,
+        style: styles.focusArea
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  permissionContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 20,
+    padding: 20
+  },
+  permissionText: {
+    color: 'black',
+    fontSize: 20,
+    textAlign: 'center',
+    fontWeight: 'bold'
+  },
+  scanArea: {
+    position: 'absolute',
+    top: '36%',
+    left: '5%',
+    right: '5%',
+    bottom: '36%',
+    borderWidth: 5,
+    zIndex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 5
+  },
+  focusArea: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 2
+  },
+  animation: {
+    width: '100%',
+    height: '100%',
+    opacity: 0.8
+  },
+  topZone: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: '64%',
+    backgroundColor: '#00000099',
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  topZoneText: {
+    color: 'white',
+    fontSize: 20,
+    textAlign: 'center',
+    fontWeight: 'bold',
+    padding: 20
+  },
+  leftZone: {
+    position: 'absolute',
+    top: '36%',
+    left: 0,
+    right: '95%',
+    bottom: '36%',
+    backgroundColor: '#00000099'
+  },
+  rightZone: {
+    position: 'absolute',
+    top: '36%',
+    left: '95%',
+    right: 0,
+    bottom: '36%',
+    backgroundColor: '#00000099'
+  },
+  bottomZone: {
+    position: 'absolute',
+    top: '64%',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: '#00000099',
+    padding: 20,
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 10,
+    justifyContent: 'flex-start',
+    flexWrap: 'wrap'
+  },
+  imageContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  imageContainerText: {
+    color: 'white',
+    fontSize: 8,
+    textAlign: 'center',
+    fontWeight: 'bold',
+    marginTop: 2
+  },
+  faceImage: {
+    width: 60,
+    height: 80,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: 'white'
+  },
+  debugInfoContainer: {
+    flex: 1,
+    paddingLeft: 10
+  },
+  debugInfoText: {
+    color: 'white',
+    fontSize: 8,
+    fontWeight: 'bold',
+    marginBottom: 2
+  },
+  guide: {
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    gap: 10,
+    backgroundColor: 'white'
+  },
+  guideAnimation: {
+    width: 250,
+    height: 250,
+    alignSelf: 'center'
+  },
+  guideHeader: {
+    color: 'black',
+    fontSize: 18,
+    textAlign: 'center',
+    fontWeight: 'bold'
+  },
+  guidePoints: {
+    display: 'flex',
+    gap: 10,
+    padding: 10
+  },
+  guideText: {
+    color: 'black',
+    fontSize: 14
+  }
+});
+export default IdentityDocumentCamera;