@trustchex/react-native-sdk 1.161.0

package/src/Shared/Components/IdentityDocumentCamera.tsx

@@ -0,0 +1,1377 @@
+/* eslint-disable react-native/no-inline-styles */
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  Text as TextView,
+  Platform,
+  Vibration,
+  TouchableOpacity,
+  type GestureResponderEvent,
+  Text,
+  Linking,
+  Image,
+} from 'react-native';
+import {
+  Camera,
+  type Frame,
+  runAsync,
+  runAtTargetFps,
+  useCameraDevice,
+  useCameraFormat,
+  useCameraPermission,
+  useFrameProcessor,
+} from 'react-native-vision-camera';
+import { useRunOnJS, useSharedValue } from 'react-native-worklets-core';
+import { useTextRecognition } from '../VisionCameraPlugins/TextRecognition';
+import type { FieldRecords } from 'mrz';
+import {
+  type Face,
+  useFaceDetector,
+} from '../VisionCameraPlugins/FaceDetector';
+import mrzUtils from '../Libs/mrz.utils';
+import { crop, type CropResult } from '../VisionCameraPlugins/Cropper';
+import { useKeepAwake } from '../Libs/native-keep-awake.utils';
+import ImageEditor from '@react-native-community/image-editor';
+import { useIsFocused } from '@react-navigation/native';
+import {
+  AdaptiveThresholdTypes,
+  ColorConversionCodes,
+  DataTypes,
+  type Mat,
+  ObjectType,
+  OpenCV,
+  ThresholdTypes,
+} from 'react-native-fast-opencv';
+import { getAverageBrightness } from '../Libs/camera.utils';
+import { useTranslation } from 'react-i18next';
+import LottieView from 'lottie-react-native';
+import { ActivityIndicator, Button } from 'react-native-paper';
+import { type Barcode, scanCodes } from '../VisionCameraPlugins/BarcodeScanner';
+import { speakWithDebounce } from '../Libs/tts.utils';
+import AppContext from '../Contexts/AppContext';
+
+export type DocumentScannedData = {
+  documentType: 'ID_FRONT' | 'ID_BACK' | 'PASSPORT' | 'UNKNOWN';
+  image: string;
+  faceImage?: string;
+  secondaryFaceImage?: string;
+  hologramImage?: string;
+  barcodeValue?: string;
+  mrzText?: string;
+  mrzFields?: FieldRecords;
+};
+
+export type BlockText = {
+  blocks: BlocksData[];
+  resultText: string;
+};
+
+type BlocksData = {
+  blockFrame: FrameType;
+  blockCornerPoints: CornerPointsType;
+  lines: LinesData;
+  blockLanguages: string[] | [];
+  blockText: string;
+};
+
+type CornerPointsType = [{ x: number; y: number }];
+
+type FrameType = {
+  boundingCenterX: number;
+  boundingCenterY: number;
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+};
+
+type LinesData = [
+  lineCornerPoints: CornerPointsType,
+  elements: ElementsData,
+  lineFrame: FrameType,
+  lineLanguages: string[] | [],
+  lineText: string,
+];
+
+type ElementsData = [
+  elementCornerPoints: CornerPointsType,
+  elementFrame: FrameType,
+  elementText: string,
+];
+
+export type PhotoOptions = {
+  uri: string;
+  orientation?:
+    | 'landscapeRight'
+    | 'portrait'
+    | 'portraitUpsideDown'
+    | 'landscapeLeft';
+};
+
+export interface IdentityDocumentCameraProps {
+  onlyMRZScan: boolean;
+  onIdentityDocumentScanned: (scannedData: DocumentScannedData) => void;
+  showDebugImages?: boolean; // For development: show detected face and other images
+}
+
+// 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: string[] = [];
+
+const IdentityDocumentCamera = ({
+  onlyMRZScan,
+  onIdentityDocumentScanned,
+  showDebugImages = false,
+}: IdentityDocumentCameraProps) => {
+  useKeepAwake();
+  const appContext = React.useContext(AppContext);
+  const cameraRef = React.useRef<Camera>(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<string | undefined>(
+    undefined
+  );
+  const [_currentHologramMaskImage, setCurrentHologramMaskImage] = useState<
+    string | undefined
+  >(undefined);
+  const [currentHologramImage, setCurrentHologramImage] = useState<
+    string | undefined
+  >(undefined);
+  const [currentSecondaryFaceImage, setCurrentSecondaryFaceImage] = useState<
+    string | undefined
+  >(undefined);
+  const [isBrightnessLow, setIsBrightnessLow] = useState(false);
+  const [hasGuideShown, setHasGuideShown] = useState(false);
+  const [status, setStatus] = useState<
+    'SEARCHING' | 'SCANNING' | 'SCANNED' | 'INCORRECT'
+  >('SEARCHING');
+  const [nextStep, setNextStep] = useState<
+    'SCAN_ID_FRONT_OR_PASSPORT' | 'SCAN_ID_BACK' | 'SCAN_HOLOGRAM' | 'COMPLETED'
+  >('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: Face[],
+    ocrText: string,
+    mrzFields?: FieldRecords
+  ) => {
+    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: Mat) => {
+    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: string,
+    image2: string,
+    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: string[]) => {
+    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: Face[]) => {
+    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: Face[],
+    image: string,
+    width: number,
+    height: number
+  ) => {
+    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:
+      | 'SCAN_ID_FRONT_OR_PASSPORT'
+      | 'SCAN_ID_BACK'
+      | 'SCAN_HOLOGRAM'
+      | 'COMPLETED'
+  ) => {
+    setNextStep(nextStepType);
+    Vibration.vibrate(100);
+  };
+
+  const handleBrightness = useRunOnJS(
+    (isBright: boolean) => {
+      setIsBrightnessLow(!isBright);
+    },
+    [setIsBrightnessLow]
+  );
+
+  const handleFaceAndText = useRunOnJS(
+    async (
+      text: string,
+      faces: Face[],
+      frameWidth: number,
+      frameHeight: number,
+      barcode?: Barcode,
+      image?: string
+    ) => {
+      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: DocumentScannedData = {
+        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: number) => {
+      setExposure(value);
+    },
+    [exposure]
+  );
+
+  const handleExposureAndBrightness = (frame: 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: 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: Face[] = [];
+      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: CropResult;
+      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: BlockText;
+      try {
+        scannedText = scanText(frame) as any as BlockText;
+      } catch (textError) {
+        console.warn('Text recognition failed:', textError);
+        scannedText = { blocks: [], resultText: '' };
+      }
+
+      // Barcode scanning with error handling
+      let barcodes: any[] = [];
+      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 (
+      <View style={styles.permissionContainer}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  if (!cameraPermission.hasPermission) {
+    return (
+      <View style={styles.permissionContainer}>
+        <Text style={styles.permissionText}>
+          {t('general.noCameraPermissionGiven')}
+        </Text>
+        <Button
+          mode="contained"
+          onPress={() => {
+            Linking.openSettings();
+          }}
+        >
+          {t('general.openSettings')}
+        </Button>
+      </View>
+    );
+  }
+
+  if (device == null) {
+    return (
+      <View style={styles.permissionContainer}>
+        <TextView style={styles.permissionText}>
+          {t('general.noCameraDetected')}
+        </TextView>
+      </View>
+    );
+  }
+
+  const handleFocus = async (event: GestureResponderEvent) => {
+    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 (
+    <View style={StyleSheet.absoluteFill}>
+      {!hasGuideShown ? (
+        <View style={styles.guide}>
+          <LottieView
+            source={require('../../Shared/Animations/id-or-passport.json')}
+            style={styles.guideAnimation}
+            loop={true}
+            autoPlay
+          />
+          <TextView style={styles.guideHeader}>
+            {t('identityDocumentCamera.guideHeader')}
+          </TextView>
+          <View style={styles.guidePoints}>
+            <TextView style={styles.guideText}>
+              {t('identityDocumentCamera.guideText')}
+            </TextView>
+            <TextView style={styles.guideText}>
+              • {t('identityDocumentCamera.guidePoint1')}
+            </TextView>
+            <TextView style={styles.guideText}>
+              • {t('identityDocumentCamera.guidePoint2')}
+            </TextView>
+            <TextView style={styles.guideText}>
+              • {t('identityDocumentCamera.guidePoint3')}
+            </TextView>
+          </View>
+          <Button
+            mode="contained"
+            onPress={() => {
+              setHasGuideShown(true);
+            }}
+          >
+            {t('general.letsGo')}
+          </Button>
+        </View>
+      ) : (
+        <>
+          <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;
+            }}
+          />
+          <View style={styles.topZone}>
+            <TextView style={styles.topZoneText}>
+              {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')
+                        : ''}
+            </TextView>
+          </View>
+          <View style={styles.leftZone} />
+          <View style={styles.rightZone} />
+          <View style={styles.bottomZone}>
+            {showDebugImages && currentFaceImage && (
+              <View style={styles.imageContainer}>
+                <Image
+                  source={{
+                    uri: `data:image/jpeg;base64,${currentFaceImage}`,
+                  }}
+                  style={styles.faceImage}
+                />
+                <TextView style={styles.imageContainerText}>Face</TextView>
+              </View>
+            )}
+
+            {showDebugImages && currentSecondaryFaceImage && (
+              <View style={styles.imageContainer}>
+                <Image
+                  source={{
+                    uri: `data:image/jpeg;base64,${currentSecondaryFaceImage}`,
+                  }}
+                  style={styles.faceImage}
+                />
+                <TextView style={styles.imageContainerText}>
+                  Secondary Face
+                </TextView>
+              </View>
+            )}
+
+            {showDebugImages && _currentHologramMaskImage && (
+              <View style={styles.imageContainer}>
+                <Image
+                  source={{
+                    uri: `data:image/jpeg;base64,${_currentHologramMaskImage}`,
+                  }}
+                  style={styles.faceImage}
+                />
+                <TextView style={styles.imageContainerText}>
+                  Hologram Mask
+                </TextView>
+              </View>
+            )}
+
+            {showDebugImages && currentHologramImage && (
+              <View style={styles.imageContainer}>
+                <Image
+                  source={{
+                    uri: `data:image/jpeg;base64,${currentHologramImage}`,
+                  }}
+                  style={styles.faceImage}
+                />
+                <TextView style={styles.imageContainerText}>Hologram</TextView>
+              </View>
+            )}
+
+            {showDebugImages && (
+              <View style={styles.debugInfoContainer}>
+                <TextView style={styles.debugInfoText}>
+                  Step: {nextStep}
+                </TextView>
+                <TextView style={styles.debugInfoText}>
+                  Status: {status}
+                </TextView>
+                <TextView style={styles.debugInfoText}>
+                  {`Face: ${currentFaceImage ? '✓' : '✗'} ${
+                    !faceDetectionEnabled ? '(DISABLED)' : ''
+                  }`}
+                </TextView>
+                <TextView style={styles.debugInfoText}>
+                  {`Hologram: ${currentHologramImage ? '✓' : '✗'} (${
+                    hologramDetectionCurrentRetryCount.value
+                  }/${HOLOGRAM_DETECTION_RETRY_COUNT})`}
+                </TextView>
+                <TextView style={styles.debugInfoText}>
+                  {`2nd Face: ${currentSecondaryFaceImage ? '✓' : '✗'} (${
+                    secondaryFaceDetectionCurrentRetryCount.value
+                  }/${SECOND_FACE_DETECTION_RETRY_COUNT})`}
+                </TextView>
+              </View>
+            )}
+          </View>
+          <View
+            style={[
+              styles.scanArea,
+              {
+                borderColor:
+                  status === 'SCANNED' || nextStep === 'COMPLETED'
+                    ? 'green'
+                    : status === 'INCORRECT'
+                      ? 'red'
+                      : 'white',
+              },
+            ]}
+          >
+            {nextStep === 'SCAN_HOLOGRAM' && isTorchOn && !isBrightnessLow && (
+              <LottieView
+                source={require('../../Shared/Animations/hologram-scan.json')}
+                style={styles.animation}
+                loop={true}
+                autoPlay
+              />
+            )}
+            {nextStep !== 'COMPLETED' && isBrightnessLow && (
+              <LottieView
+                source={require('../../Shared/Animations/light.json')}
+                style={styles.animation}
+                loop={true}
+                autoPlay
+              />
+            )}
+            {nextStep === 'COMPLETED' && (
+              <LottieView
+                source={require('../../Shared/Animations/success.json')}
+                style={styles.animation}
+                loop={false}
+                autoPlay
+              />
+            )}
+          </View>
+          {/* <View
+            style={{
+              borderColor: 'red',
+              borderWidth: 1,
+              position: 'absolute',
+              top: boundingBox.y,
+              left: boundingBox.x,
+              width: boundingBox.width,
+              height: boundingBox.height,
+              zIndex: 3,
+            }}
+          /> */}
+          <TouchableOpacity onPress={handleFocus} style={styles.focusArea} />
+        </>
+      )}
+    </View>
+  );
+};
+
+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;