react-native-biometric-verifier 0.0.66 → 0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-biometric-verifier",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "description": "A React Native module for biometric verification with face recognition and QR code scanning",
   "main": "src/index.js",
   "types": "src/index.d.ts",

package/src/components/CaptureImageWithoutEdit.js

@@ -7,15 +7,18 @@ import {
   ActivityIndicator,
   Animated,
   Dimensions,
+  Platform,
 } from 'react-native';
 import {
   Camera,
-  getCameraDevice,
-  useCodeScanner,
-  useCameraFormat,
+  useCameraDevices,
+  useCameraPermission,
+  usePhotoOutput,
 } from 'react-native-vision-camera';
+import { useBarcodeScannerOutput } from 'react-native-vision-camera-barcode-scanner';
 import { Global } from '../utils/Global';
 import { useFaceDetectionFrameProcessor } from '../hooks/useFaceDetectionFrameProcessor';
+import DeviceBrightness from '@adrianso/react-native-device-brightness';
 
 const CaptureImageWithoutEdit = React.memo(
   ({
@@ -33,6 +36,7 @@ const CaptureImageWithoutEdit = React.memo(
     const [cameraInitialized, setCameraInitialized] = useState(false);
     const [currentCameraType, setCurrentCameraType] = useState(cameraType);
     const [isInitializing, setIsInitializing] = useState(true);
+    const [layout, setLayout] = useState({ width: 0, height: 0 });
 
     const [faces, setFaces] = useState([]);
     const [livenessStep, setLivenessStep] = useState(0);
@@ -50,6 +54,43 @@ const CaptureImageWithoutEdit = React.memo(
     const instructionAnim = useRef(new Animated.Value(1)).current;
     const liveIndicatorAnim = useRef(new Animated.Value(0)).current;
 
+    const originalBrightnessRef = useRef(null);
+
+    // Camera hooks - NEW API
+    const devices = useCameraDevices();
+    const { hasPermission, requestPermission } = useCameraPermission();
+    const photoOutput = usePhotoOutput();
+
+    useEffect(() => {
+      const adjustBrightness = async () => {
+        try {
+          const currentBr = await DeviceBrightness.getBrightnessLevel();
+          originalBrightnessRef.current = currentBr;
+        } catch (e) {
+          console.log('Error getting brightness:', e);
+          originalBrightnessRef.current = 0.6;
+        }
+
+        try {
+          await DeviceBrightness.setBrightnessLevel(1.0);
+        } catch (e) {
+          console.log('Error setting brightness:', e);
+        }
+      };
+
+      adjustBrightness();
+
+      return () => {
+        if (originalBrightnessRef.current !== null) {
+          try {
+            DeviceBrightness.setBrightnessLevel(originalBrightnessRef.current);
+          } catch (e) {
+            console.log('Error restoring brightness in cleanup:', e);
+          }
+        }
+      };
+    }, []);
+
     const resetCaptureState = useCallback(() => {
       captured.current = false;
       setFaces([]);
@@ -63,18 +104,20 @@ const CaptureImageWithoutEdit = React.memo(
       setHasSingleFace(false);
     }, []);
 
-    const codeScanner = useCodeScanner({
-      codeTypes: ['qr', 'ean-13'],
-      onCodeScanned: (codes) => {
-        try {
-          if (showCodeScanner && codes && codes[0]?.value && !isLoading) {
-            onCapture(codes[0].value);
-          }
-        } catch (error) {
-          console.error('Error processing scanned code:', error);
+    // CodeScanner component - NEW API
+    const handleBarcodeScanned = useCallback((barcodes) => {
+      try {
+        if (showCodeScanner && barcodes && barcodes[0]?.rawValue && !isLoading) {
+          onCapture(barcodes[0].rawValue);
         }
-      },
-    });
+      } catch (error) {
+        console.error('Error processing scanned code:', error);
+      }
+    }, [showCodeScanner, isLoading, onCapture]);
+
+    const handleScannerError = useCallback((error) => {
+      console.error('Barcode scanner error:', error);
+    }, []);
 
     const onStableFaceDetected = useCallback(
       async (faceRect) => {
@@ -89,18 +132,20 @@ const CaptureImageWithoutEdit = React.memo(
             throw new Error('Camera ref not available');
           }
 
-          const photo = await cameraRef.current.takePhoto({
-            flash: 'off',
-            qualityPrioritization: 'quality',
-            enableShutterSound: false,
-            skipMetadata: true,
-          });
+          // Use photoOutput.capturePhotoToFile - NEW API
+          const photo = await photoOutput.capturePhotoToFile(
+            {
+              flashMode: 'off',
+              qualityPrioritization: 'quality',
+            },
+            {}
+          );
 
-          if (!photo || !photo.path) {
+          if (!photo || !photo.filePath) {
             throw new Error('Failed to capture photo - no path returned');
           }
 
-          const photopath = `file://${photo.path}`;
+          const photopath = `file://${photo.filePath}`;
           const fileName = photopath.substr(photopath.lastIndexOf('/') + 1);
           const photoData = {
             uri: photopath,
@@ -115,7 +160,7 @@ const CaptureImageWithoutEdit = React.memo(
           resetCaptureState();
         }
       },
-      [onCapture, resetCaptureState]
+      [onCapture, resetCaptureState, photoOutput]
     );
 
     const onFacesUpdate = useCallback((payload) => {
@@ -125,7 +170,6 @@ const CaptureImageWithoutEdit = React.memo(
         setFaceCount(count);
         setProgress(progress);
 
-        // Update anti-spoof related states
         if (antiSpoofState) {
           setIsFaceLive(antiSpoofState.isLive || false);
           setAntiSpoofConfidence(antiSpoofState.confidence || 0);
@@ -164,7 +208,6 @@ const CaptureImageWithoutEdit = React.memo(
     const onAntiSpoofUpdate = useCallback((result) => {
       if (!isMounted.current) return;
       try {
-        // Animate live indicator when face becomes live
         if (result?.isLive && !isFaceLive) {
           Animated.spring(liveIndicatorAnim, {
             toValue: 1,
@@ -189,7 +232,7 @@ const CaptureImageWithoutEdit = React.memo(
     }, [isFaceLive, liveIndicatorAnim]);
 
     const {
-      frameProcessor,
+      outputs: faceOutputs,
       forceResetCaptureState,
       updateShowCodeScanner,
       updateIsActive,
@@ -204,6 +247,9 @@ const CaptureImageWithoutEdit = React.memo(
       isActive: showCamera && cameraInitialized,
       livenessLevel: livenessLevel,
       antispooflevel,
+      cameraFacing: currentCameraType,
+      windowWidth: layout.width,
+      windowHeight: layout.height,
     });
 
     useEffect(() => {
@@ -214,68 +260,55 @@ const CaptureImageWithoutEdit = React.memo(
       }
     }, [capturedSV?.value]);
 
-    const getPermission = useCallback(async () => {
+    // Camera permission and device selection - NEW API
+    const initializeCamera = useCallback(async () => {
       try {
         if (!isMounted.current) return;
 
         setIsInitializing(true);
         setShowCamera(false);
 
-        const newCameraPermission = await Camera?.requestCameraPermission();
-        if (newCameraPermission === 'granted') {
-          let devices = await Camera?.getAvailableCameraDevices();
+        const permission = await requestPermission();
+        console.log('Camera permission:', permission);
 
-          // Retry once after short delay if no devices found
-          if (!devices || devices.length === 0) {
-            await new Promise((resolve) => setTimeout(resolve, 300));
-            devices = await Camera?.getAvailableCameraDevices();
-          }
+        if (permission === true || permission === 'granted') {
+          // Find device by position
+          const device = devices.find((d) => d.position === currentCameraType) || devices[0];
 
-          if (!devices || devices.length === 0) {
-            throw new Error('No camera devices available');
+          if (!device) {
+            throw new Error(`No ${currentCameraType} camera available`);
           }
 
-          const device = getCameraDevice(devices, currentCameraType);
-          if (!device) throw new Error(`No ${currentCameraType} camera available`);
-
+          console.log('Selected device:', device);
           setCameraDevice(device);
           setShowCamera(true);
         } else {
           console.warn('Camera permission not granted');
+          setShowCamera(false);
         }
       } catch (error) {
-        console.error('Camera permission error:', error);
+        console.error('Camera initialization error:', error);
         setShowCamera(false);
       } finally {
         if (isMounted.current) {
           setIsInitializing(false);
         }
       }
-    }, [currentCameraType]);
-
-    const initializeCamera = useCallback(async () => {
-      await getPermission();
-    }, [getPermission]);
+    }, [currentCameraType, devices, requestPermission]);
 
     useEffect(() => {
       isMounted.current = true;
 
-      const initOnMount = async () => {
-        try {
-          await initializeCamera();
-        } catch (error) {
-          console.error('Failed to initialize camera on mount:', error);
-        }
-      };
-
-      initOnMount();
+      if (devices && devices.length > 0) {
+        initializeCamera();
+      }
 
       return () => {
         isMounted.current = false;
         setShowCamera(false);
         forceResetCaptureState();
       };
-    }, [initializeCamera, forceResetCaptureState]);
+    }, [devices, initializeCamera, forceResetCaptureState]);
 
     useEffect(() => {
       updateIsActive(showCamera && cameraInitialized);
@@ -284,13 +317,11 @@ const CaptureImageWithoutEdit = React.memo(
     useEffect(() => {
       if (cameraType !== currentCameraType) {
         setCurrentCameraType(cameraType);
-        initializeCamera();
+        if (devices && devices.length > 0) {
+          initializeCamera();
+        }
       }
-    }, [cameraType, currentCameraType, initializeCamera]);
-
-    const format = useCameraFormat(cameraDevice, [
-      { fps: 30 },
-    ]);
+    }, [cameraType, currentCameraType, initializeCamera, devices]);
 
     useEffect(() => {
       try {
@@ -315,11 +346,13 @@ const CaptureImageWithoutEdit = React.memo(
         setCameraInitialized(false);
         forceResetCaptureState();
         resetCaptureState();
-        await initializeCamera();
+        if (devices && devices.length > 0) {
+          await initializeCamera();
+        }
       } catch (error) {
         console.error('Retry failed:', error);
       }
-    }, [initializeCamera, resetCaptureState, forceResetCaptureState]);
+    }, [initializeCamera, resetCaptureState, forceResetCaptureState, devices]);
 
     const getInstruction = useCallback(() => {
       if (faceCount > 1) {
@@ -424,35 +457,95 @@ const CaptureImageWithoutEdit = React.memo(
 
     const stepConfig = getStepConfig();
 
+    const getOverlayHeights = () => {
+      const containerHeight = layout.height || 400;
+      const overlayHeight = containerHeight * 0.15;
+      return { overlayHeight };
+    };
+
+    const { overlayHeight } = getOverlayHeights();
+    const confidencePercent = Math.round(
+      Math.max(0, Math.min(1, Number(antiSpoofConfidence) || 0)) * 100
+    );
+    const confidenceColor = confidencePercent >= 70
+      ? Global.AppTheme.success
+      : confidencePercent >= 40
+        ? Global.AppTheme.warning
+        : Global.AppTheme.error;
+
+    const scannerOutput = useBarcodeScannerOutput({
+      barcodeFormats: [
+        'qr-code',
+        'ean-13',
+        'code-128',
+        'code-39',
+        'code-93',
+      ],
+      onBarcodeScanned: handleBarcodeScanned,
+      onError: handleScannerError,
+    });
+
+    const cameraOutputs = showCodeScanner
+      ? [photoOutput, scannerOutput]
+      : [photoOutput, ...faceOutputs];
+
     return (
       <View style={styles.container}>
-        <View style={styles.cameraContainer}>
+        <View
+          style={styles.cameraContainer}
+          onLayout={(event) => {
+            const { width, height } = event.nativeEvent.layout;
+            setLayout({ width, height });
+          }}
+        >
           {!isInitializing && showCamera && cameraDevice ? (
-            <Camera
-              ref={cameraRef}
-              style={styles.camera}
-              device={cameraDevice}
-              isActive={cameraInitialized && showCamera && !isLoading}
-              photo={true}
-              format={cameraDevice ? format : undefined}
-              codeScanner={showCodeScanner && cameraInitialized ? codeScanner : undefined}
-              enableZoomGesture={false}
-              lowLightBoost={cameraDevice?.supportsLowLightBoost}
-              frameProcessor={
-                !showCodeScanner && cameraInitialized ? frameProcessor : undefined
-              }
-              frameProcessorFps={frameProcessorFps}
-              onInitialized={() => {
-                setCameraInitialized(true);
-              }}
-              onError={(error) => {
-                console.error('Camera error:', error);
-              }}
-              exposure={0}
-              pixelFormat="yuv"
-              preset="photo"
-              orientation="portrait"
-            />
+            <View style={StyleSheet.absoluteFill}>
+              <Camera
+                ref={cameraRef}
+                style={styles.camera}
+                device={cameraDevice}
+                isActive={showCamera && !isLoading}
+                outputs={cameraOutputs}
+                enableNativeZoomGesture={false}
+                onStarted={() => {
+                  setCameraInitialized(true);
+                }}
+                onStopped={() => {
+                  setCameraInitialized(false);
+                }}
+                onError={(error) => {
+                  console.error('Camera error:', error);
+                }}
+                exposure={1.2}
+              />
+              {currentCameraType === 'front' && (
+                <View style={StyleSheet.absoluteFillObject} pointerEvents="none">
+                  {/* Top Translucent White Overlay (Header) */}
+                  <View style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: overlayHeight,
+                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                    borderBottomWidth: 1,
+                    borderBottomColor: 'rgba(255, 255, 255, 0.8)',
+                  }} />
+
+                  {/* Bottom Translucent White Overlay (Footer) */}
+                  <View style={{
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    height: overlayHeight,
+                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                    borderTopWidth: 1,
+                    borderTopColor: 'rgba(255, 255, 255, 0.8)',
+                  }} />
+                </View>
+              )}
+            </View>
           ) : (
             <View style={styles.placeholderContainer}>
               {isInitializing && (
@@ -545,19 +638,15 @@ const CaptureImageWithoutEdit = React.memo(
               {isFaceCentered && (
                 <View style={styles.confidenceContainer}>
                   <Text style={styles.confidenceText}>
-                    Confidence: {Math.round(antiSpoofConfidence * 100)}%
+                    Confidence: {confidencePercent}%
                   </Text>
                   <View style={styles.confidenceBar}>
                     <View
                       style={[
                         styles.confidenceProgress,
                         {
-                          width: `${antiSpoofConfidence * 100}%`,
-                          backgroundColor: antiSpoofConfidence * 100 > 40
-                            ? Global.AppTheme.success
-                            : antiSpoofConfidence * 100 > 20
-                              ? Global.AppTheme.warning
-                              : Global.AppTheme.error
+                          width: `${confidencePercent}%`,
+                          backgroundColor: confidenceColor,
                         }
                       ]}
                     />
@@ -670,7 +759,6 @@ const styles = StyleSheet.create({
     color: 'white',
     fontWeight: 'bold',
   },
-  // Live Indicator
   liveIndicator: {
     position: 'absolute',
     top: 20,
@@ -704,7 +792,6 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: 'bold',
   },
-  // Status Overview
   statusOverview: {
     position: 'absolute',
     bottom: 20,
@@ -758,7 +845,6 @@ const styles = StyleSheet.create({
     height: '100%',
     borderRadius: 2,
   },
-  // Existing styles
   blinkProgressContainer: {
     flexDirection: 'row',
     marginVertical: 8,

package/src/hooks/useFaceDetectionFrameProcessor.js

@@ -1,620 +1,207 @@
-import { useCallback, useMemo, useEffect, useRef } from 'react';
-import { Worklets } from 'react-native-worklets-core';
-import { useFrameProcessor } from 'react-native-vision-camera';
-import { useFaceDetector } from 'react-native-vision-camera-face-detector';
-import {
-  faceAntiSpoofFrameProcessor,
-  initializeFaceAntiSpoof,
-  isFaceAntiSpoofAvailable,
-} from 'react-native-vision-camera-spoof-detector';
-
-// Optimized constants - tuned for performance
-const FACE_STABILITY_THRESHOLD = 3;
-const FACE_MOVEMENT_THRESHOLD = 15;
-const FRAME_PROCESSOR_MIN_INTERVAL_MS = 500;
-const MIN_FACE_SIZE = 0.2;
-
-// Blink detection
-const BLINK_THRESHOLD = 0.3;
-const REQUIRED_BLINKS = 3;
-
-// Anti-spoofing
-const REQUIRED_CONSECUTIVE_LIVE_FRAMES = 3;
-
-// Face centering
-const FACE_CENTER_THRESHOLD_X = 0.2;
-const FACE_CENTER_THRESHOLD_Y = 0.15;
-const MIN_FACE_CENTERED_FRAMES = 2;
-
-// Performance optimization constants
-const MAX_FRAME_PROCESSING_TIME_MS = 500;
-const BATCH_UPDATE_THRESHOLD = 3;
-const REAL_LAPLACIAN_THRESHOLD = 3500;
-
-export const useFaceDetectionFrameProcessor = ({
-  onStableFaceDetected = () => { },
-  onFacesUpdate = () => { },
-  onLivenessUpdate = () => { },
-  onAntiSpoofUpdate = () => { },
-  showCodeScanner = false,
-  isLoading = false,
-  isActive = true,
-  livenessLevel,
-  antispooflevel = 0.35,
-}) => {
-  const { detectFaces } = useFaceDetector({
-    performanceMode: 'fast',
-    landmarkMode: 'none',
-    contourMode: 'none',
-    classificationMode: livenessLevel === 1 ? 'all' : 'none',
-    minFaceSize: MIN_FACE_SIZE,
-  });
-
-  const isMounted = useRef(true);
-  const antiSpoofInitialized = useRef(false);
-  const frameProcessingStartTime = useRef(0);
-
-  // Initialize anti-spoofing with memoization
-  const initializeAntiSpoof = useCallback(async () => {
-    if (antiSpoofInitialized.current) return true;
-
-    try {
-      const available = isFaceAntiSpoofAvailable?.();
-      if (!available) return false;
-
-      const res = await initializeFaceAntiSpoof();
-      antiSpoofInitialized.current = true;
-      return true;
-    } catch (err) {
-      console.error('[useFaceDetection] Error initializing anti-spoof:', err);
-      return false;
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!antiSpoofInitialized.current) {
-      initializeAntiSpoof();
-    }
-  }, [initializeAntiSpoof]);
-
-  // Pre-computed shared state with optimized structure
-  const sharedState = useMemo(
-    () =>
-      Worklets.createSharedValue({
-        // Core timing
-        lastProcessedTime: 0,
-
-        // Face tracking - packed for memory efficiency
-        faceTracking: { lastX: 0, lastY: 0, lastW: 0, lastH: 0, stableCount: 0 },
-
-        // State flags - packed together
-        flags: {
-          captured: false,
-          showCodeScanner: showCodeScanner,
-          isActive: isActive,
-          hasSingleFace: false,
-          isFaceCentered: false,
-          eyeClosed: false,
-        },
-
-        // Liveness state
-        liveness: {
-          level: livenessLevel,
-          step: 0,
-          blinkCount: 0,
-        },
-
-        // Anti-spoof state
-        antiSpoof: {
-          consecutiveLiveFrames: 0,
-          lastResult: null,
-          isLive: false,
-          confidence: 0,
-        },
-
-        // Face centering
-        centering: {
-          centeredFrames: 0,
-          frameWidth: 0,
-          frameHeight: 0,
-        },
-
-        // Performance tracking
-        performance: {
-          batchCounter: 0,
-          lastBatchUpdate: 0,
-        }
-      }),
-    []
-  );
-
-  // Batched state updates
-  useEffect(() => {
-    if (!isMounted.current) return;
-
-    const state = sharedState.value;
-    state.flags.showCodeScanner = !!showCodeScanner;
-    state.flags.isActive = !!isActive;
-    state.liveness.level = livenessLevel;
-
-    if (isActive && state.flags.captured) {
-      // Batch reset all states
-      state.faceTracking.stableCount = 0;
-      state.liveness.step = 0;
-      state.liveness.blinkCount = 0;
-      state.flags.eyeClosed = false;
-      state.flags.captured = false;
-      state.antiSpoof.consecutiveLiveFrames = 0;
-      state.antiSpoof.lastResult = null;
-      state.antiSpoof.isLive = false;
-      state.antiSpoof.confidence = 0;
-      state.flags.hasSingleFace = false;
-      state.centering.centeredFrames = 0;
-      state.flags.isFaceCentered = false;
-    }
-  }, [showCodeScanner, isActive, livenessLevel, sharedState]);
-
-  // Optimized JS callbacks with batching
-  const callbacksRef = useRef({
-    lastFacesEventTime: 0,
-    lastLivenessEventTime: 0,
-    lastAntiSpoofEventTime: 0,
-    pendingFacesUpdate: null,
-    pendingLivenessUpdate: null,
-    pendingAntiSpoofUpdate: null,
-  });
-
-  const FACES_EVENT_INTERVAL_MS = 800;
-  const LIVENESS_EVENT_INTERVAL_MS = 700;
-  const ANTI_SPOOF_EVENT_INTERVAL_MS = 500;
-
-  // Memoized callbacks with batching
-  const runOnStable = useMemo(
-    () =>
-      Worklets.createRunOnJS((faceRect, antiSpoofResult) => {
-        onStableFaceDetected?.(faceRect, antiSpoofResult);
-      }),
-    [onStableFaceDetected]
-  );
-
-  const runOnFaces = useMemo(
-    () =>
-      Worklets.createRunOnJS((count, progress, step, isCentered, antiSpoofState) => {
-        const now = Date.now();
-        const callbacks = callbacksRef.current;
-
-        if (now - callbacks.lastFacesEventTime > FACES_EVENT_INTERVAL_MS) {
-          callbacks.lastFacesEventTime = now;
-          onFacesUpdate?.({ count, progress, step, isCentered, antiSpoofState });
-        }
-      }),
-    [onFacesUpdate]
-  );
-
-  const runOnLiveness = useMemo(
-    () =>
-      Worklets.createRunOnJS((step, extra) => {
-        const now = Date.now();
-        const callbacks = callbacksRef.current;
-
-        if (now - callbacks.lastLivenessEventTime > LIVENESS_EVENT_INTERVAL_MS) {
-          callbacks.lastLivenessEventTime = now;
-          onLivenessUpdate?.(step, extra);
-        }
-      }),
-    [onLivenessUpdate]
-  );
-
-  const runOnAntiSpoof = useMemo(
-    () =>
-      Worklets.createRunOnJS((result) => {
-        const now = Date.now();
-        const callbacks = callbacksRef.current;
-
-        if (now - callbacks.lastAntiSpoofEventTime > ANTI_SPOOF_EVENT_INTERVAL_MS) {
-          callbacks.lastAntiSpoofEventTime = now;
-          onAntiSpoofUpdate?.(result);
-        }
-      }),
-    [onAntiSpoofUpdate]
-  );
-
-  // Optimized face centering check - inlined for performance
-  const isFaceCenteredInFrame = Worklets.createRunOnJS((faceBounds, frameWidth, frameHeight) => {
-    'worklet';
-
-    if (!faceBounds || frameWidth === 0 || frameHeight === 0) return false;
-
-    const faceCenterX = faceBounds.x + faceBounds.width / 2;
-    const faceCenterY = faceBounds.y + faceBounds.height / 2;
-    const frameCenterX = frameWidth / 2;
-    const frameCenterY = frameHeight / 2;
-
-    return (
-      Math.abs(faceCenterX - frameCenterX) <= frameWidth * FACE_CENTER_THRESHOLD_X &&
-      Math.abs(faceCenterY - frameCenterY) <= frameHeight * FACE_CENTER_THRESHOLD_Y
-    );
-  });
-
-  // Fast early exit conditions check
-  const shouldProcessFrame = Worklets.createRunOnJS((state, now, isLoading) => {
-    'worklet';
-    return !(
-      state.flags.showCodeScanner ||
-      state.flags.captured ||
-      isLoading ||
-      !state.flags.isActive ||
-      (now - state.lastProcessedTime < FRAME_PROCESSOR_MIN_INTERVAL_MS)
-    );
-  });
-
-
-  // Optimized frame processor
-  const frameProcessor = useFrameProcessor(
-    (frame) => {
-      'worklet';
-
-      // Performance monitoring
-      const processingStart = Date.now();
-
-      const state = sharedState.value;
-      const now = frame?.timestamp ? frame.timestamp / 1e6 : Date.now();
-
-      // Fast early exit
-      if (!shouldProcessFrame(state, now, isLoading)) {
-        frame.release?.();
-        return;
-      }
-
-      // Performance guard - don't process if taking too long
-      if (processingStart - frameProcessingStartTime.current < MAX_FRAME_PROCESSING_TIME_MS) {
-        frame.release?.();
-        return;
-      }
-
-      frameProcessingStartTime.current = processingStart;
-
-      let detected = null;
-      let antiSpoofResult = null;
-
-      try {
-        // Initialize frame dimensions once
-        if (state.centering.frameWidth === 0) {
-          state.centering.frameWidth = frame.width;
-          state.centering.frameHeight = frame.height;
-        }
-
-        // Detect faces
-        detected = detectFaces?.(frame);
-
-        // Fast path for no faces
-        if (!detected || detected.length === 0) {
-          state.faceTracking.stableCount = 0;
-          state.antiSpoof.consecutiveLiveFrames = 0;
-          state.flags.hasSingleFace = false;
-          state.centering.centeredFrames = 0;
-          state.flags.isFaceCentered = false;
-          state.lastProcessedTime = now;
-
-          runOnFaces(0, 0, state.liveness.step, false, {
-            isLive: false,
-            confidence: 0,
-            consecutiveLiveFrames: 0,
-            isFaceCentered: false,
-            hasSingleFace: false,
-          });
-          return;
-        }
-
-        // Process single face scenario
-        if (detected.length === 1 && !state.flags.captured) {
-          const face = detected[0];
-          if (!face?.bounds) {
-            runOnFaces(0, 0, state.liveness.step, false, {
-              isLive: false,
-              confidence: 0,
-              consecutiveLiveFrames: 0,
-              isFaceCentered: false,
-              hasSingleFace: false,
-            });
-            return;
-          }
-
-          const bounds = face.bounds;
-          const x = Math.max(0, bounds.x);
-          const y = Math.max(0, bounds.y);
-          const width = Math.max(0, bounds.width);
-          const height = Math.max(0, bounds.height);
-
-          // Local state snapshot for performance
-          const localState = {
-            livenessLevel: state.liveness.level,
-            isLive: state.antiSpoof.isLive,
-            consecutiveLiveFrames: state.antiSpoof.consecutiveLiveFrames,
-            isFaceCentered: state.flags.isFaceCentered,
-            antiSpoofConfidence: state.antiSpoof.confidence,
-            livenessStep: state.liveness.step,
-            blinkCount: state.liveness.blinkCount,
-            eyeClosed: state.flags.eyeClosed,
-          };
-
-          // Update single face state
-          state.flags.hasSingleFace = true;
-
-          // Face centering check
-          const centered = isFaceCenteredInFrame(
-            bounds,
-            state.centering.frameWidth,
-            state.centering.frameHeight
-          );
-
-          if (centered) {
-            state.centering.centeredFrames = Math.min(
-              MIN_FACE_CENTERED_FRAMES,
-              state.centering.centeredFrames + 1
-            );
-          } else {
-            state.centering.centeredFrames = 0;
-          }
-          state.flags.isFaceCentered = state.centering.centeredFrames >= MIN_FACE_CENTERED_FRAMES;
-
-          // Anti-spoof detection only when face is centered and single
-          if (state.flags.isFaceCentered) {
-            try {
-              antiSpoofResult = faceAntiSpoofFrameProcessor?.(frame);
-              if (antiSpoofResult != null) {
-                state.antiSpoof.lastResult = antiSpoofResult;
-
-                const { laplacianScore = 0, confidence = 0, combinedScore = 0 } = antiSpoofResult;
-
-                if (laplacianScore > REAL_LAPLACIAN_THRESHOLD &&
-                  confidence > antispooflevel &&
-                  combinedScore > antispooflevel) {
-                  state.antiSpoof.consecutiveLiveFrames = Math.min(
-                    REQUIRED_CONSECUTIVE_LIVE_FRAMES,
-                    state.antiSpoof.consecutiveLiveFrames + 1
-                  );
-                } else {
-                  state.antiSpoof.consecutiveLiveFrames = Math.max(0, state.antiSpoof.consecutiveLiveFrames - 1);
-                }
-                state.antiSpoof.isLive = state.antiSpoof.consecutiveLiveFrames >= REQUIRED_CONSECUTIVE_LIVE_FRAMES;
-                state.antiSpoof.confidence = confidence;
-
-                // Batch anti-spoof updates
-                if (state.performance.batchCounter % BATCH_UPDATE_THRESHOLD === 0) {
-                  runOnAntiSpoof({
-                    isLive: state.antiSpoof.isLive,
-                    confidence: state.antiSpoof.confidence,
-                    rawResult: antiSpoofResult,
-                    consecutiveLiveFrames: state.antiSpoof.consecutiveLiveFrames,
-                    isFaceCentered: state.flags.isFaceCentered,
-                  });
-                }
-              }
-            } catch (antiSpoofError) {
-              // Silent error handling
-            }
-          } else {
-            // Reset anti-spoof if face not centered
-            state.antiSpoof.consecutiveLiveFrames = 0;
-            state.antiSpoof.isLive = false;
-          }
-
-          // Liveness logic - optimized
-          let newLivenessStep = localState.livenessStep;
-          let newBlinkCount = localState.blinkCount;
-          let newEyeClosed = localState.eyeClosed;
-
-          if (localState.livenessLevel === 1) {
-            if (newLivenessStep === 0) {
-              newLivenessStep = 1;
-              runOnLiveness(newLivenessStep);
-            }
-            else if (newLivenessStep === 1) {
-              const leftEye = face.leftEyeOpenProbability ?? 1;
-              const rightEye = face.rightEyeOpenProbability ?? 1;
-              const eyesClosed = leftEye < BLINK_THRESHOLD && rightEye < BLINK_THRESHOLD;
-
-              if (eyesClosed && !newEyeClosed) {
-                newBlinkCount++;
-                newEyeClosed = true;
-                runOnLiveness(newLivenessStep, { blinkCount: newBlinkCount });
-              } else if (!eyesClosed && newEyeClosed) {
-                newEyeClosed = false;
-              }
-
-              if (newBlinkCount >= REQUIRED_BLINKS) {
-                newLivenessStep = 2;
-                runOnLiveness(newLivenessStep);
-              }
-            }
-          }
-
-          // Face stability check - optimized
-          let newStableCount = state.faceTracking.stableCount;
-          if (state.faceTracking.lastX === 0 && state.faceTracking.lastY === 0) {
-            newStableCount = 1;
-          } else {
-            const dx = Math.abs(x - state.faceTracking.lastX);
-            const dy = Math.abs(y - state.faceTracking.lastY);
-            newStableCount = (dx < FACE_MOVEMENT_THRESHOLD && dy < FACE_MOVEMENT_THRESHOLD)
-              ? state.faceTracking.stableCount + 1
-              : 1;
-          }
-
-          // Batch state updates
-          state.lastProcessedTime = now;
-          state.faceTracking.lastX = x;
-          state.faceTracking.lastY = y;
-          state.faceTracking.lastW = width;
-          state.faceTracking.lastH = height;
-          state.faceTracking.stableCount = newStableCount;
-          state.liveness.step = newLivenessStep;
-          state.liveness.blinkCount = newBlinkCount;
-          state.flags.eyeClosed = newEyeClosed;
-          state.performance.batchCounter++;
-
-          const progress = Math.min(100, (newStableCount / FACE_STABILITY_THRESHOLD) * 100);
-
-          // Batch face updates
-          if (state.performance.batchCounter % BATCH_UPDATE_THRESHOLD === 0) {
-            runOnFaces(1, progress, newLivenessStep, state.flags.isFaceCentered, {
-              isLive: state.antiSpoof.isLive,
-              confidence: state.antiSpoof.confidence,
-              consecutiveLiveFrames: state.antiSpoof.consecutiveLiveFrames,
-              isFaceCentered: state.flags.isFaceCentered,
-              hasSingleFace: true,
-            });
-          }
-
-          // Capture condition - optimized
-          const shouldCapture = !state.flags.captured && (
-            newStableCount >= FACE_STABILITY_THRESHOLD &&
-            state.antiSpoof.isLive &&
-            state.antiSpoof.consecutiveLiveFrames >= REQUIRED_CONSECUTIVE_LIVE_FRAMES &&
-            state.flags.isFaceCentered &&
-            (localState.livenessLevel === 0 || (
-              localState.livenessLevel === 1 &&
-              newLivenessStep === 2 &&
-              newBlinkCount >= REQUIRED_BLINKS
-            ))
-          );
-
-          if (shouldCapture) {
-            state.flags.captured = true;
-            runOnStable(
-              { x, y, width, height },
-              state.antiSpoof.lastResult
-            );
-          }
-        } else {
-          // Multiple faces - reset states
-          state.faceTracking.stableCount = 0;
-          state.lastProcessedTime = now;
-          state.antiSpoof.consecutiveLiveFrames = 0;
-          state.flags.hasSingleFace = false;
-          state.centering.centeredFrames = 0;
-          state.flags.isFaceCentered = false;
-
-          runOnFaces(detected.length, 0, state.liveness.step, false, {
-            isLive: false,
-            confidence: 0,
-            consecutiveLiveFrames: 0,
-            isFaceCentered: false,
-            hasSingleFace: false,
-          });
-        }
-      } catch (err) {
-        // Error boundary - ensure frame is released
-      } finally {
-        frame.release?.();
-      }
-    },
-    [detectFaces, isLoading]
-  );
-
-  // Optimized reset functions
-  const resetCaptureState = useCallback(() => {
-    const state = sharedState.value;
-    state.lastProcessedTime = 0;
-    state.faceTracking.lastX = 0;
-    state.faceTracking.lastY = 0;
-    state.faceTracking.lastW = 0;
-    state.faceTracking.lastH = 0;
-    state.faceTracking.stableCount = 0;
-    state.flags.captured = false;
-    state.liveness.step = 0;
-    state.liveness.blinkCount = 0;
-    state.flags.eyeClosed = false;
-    state.antiSpoof.consecutiveLiveFrames = 0;
-    state.antiSpoof.lastResult = null;
-    state.antiSpoof.isLive = false;
-    state.antiSpoof.confidence = 0;
-    state.flags.hasSingleFace = false;
-    state.centering.centeredFrames = 0;
-    state.flags.isFaceCentered = false;
-    state.centering.frameWidth = 0;
-    state.centering.frameHeight = 0;
-    state.performance.batchCounter = 0;
-  }, [sharedState]);
-
-  const forceResetCaptureState = useCallback(() => {
-    const current = sharedState.value;
-
-    sharedState.value = {
-      lastProcessedTime: 0,
-      faceTracking: {
-        lastX: 0, lastY: 0, lastW: 0, lastH: 0, stableCount: 0
-      },
-      flags: {
-        captured: false,
-        showCodeScanner: current.flags.showCodeScanner,
-        isActive: current.flags.isActive,
-        hasSingleFace: false,
-        isFaceCentered: false,
-        eyeClosed: false,
-      },
-      liveness: {
-        level: current.liveness.level,
-        step: 0,
-        blinkCount: 0,
-      },
-      antiSpoof: {
-        consecutiveLiveFrames: 0,
-        lastResult: null,
-        isLive: false,
-        confidence: 0,
-      },
-      centering: {
-        centeredFrames: 0,
-        frameWidth: 0,
-        frameHeight: 0,
-      },
-      performance: {
-        batchCounter: 0,
-        lastBatchUpdate: 0,
-      }
-    };
-  }, [sharedState]);
-
-  const updateShowCodeScanner = useCallback(
-    (value) => {
-      sharedState.value.flags.showCodeScanner = !!value;
-    },
-    [sharedState]
-  );
-
-  const updateIsActive = useCallback(
-    (active) => {
-      sharedState.value.flags.isActive = !!active;
-      if (!active) sharedState.value.flags.captured = false;
-    },
-    [sharedState]
-  );
-
-  useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-      forceResetCaptureState();
-    };
-  }, [forceResetCaptureState]);
-
-  return {
-    frameProcessor,
-    resetCaptureState,
-    forceResetCaptureState,
-    updateShowCodeScanner,
-    updateIsActive,
-    initializeAntiSpoof,
-    capturedSV: { value: sharedState.value.flags.captured },
-    antiSpoofState: {
-      isLive: sharedState.value.antiSpoof.isLive,
-      confidence: sharedState.value.antiSpoof.confidence,
-      consecutiveLiveFrames: sharedState.value.antiSpoof.consecutiveLiveFrames,
-      lastResult: sharedState.value.antiSpoof.lastResult,
-      hasSingleFace: sharedState.value.flags.hasSingleFace,
-      isFaceCentered: sharedState.value.flags.isFaceCentered,
-    },
-  };
-};
+import { useCallback, useEffect, useRef } from 'react';
+import { useFaceDetectorOutput } from 'react-native-vision-camera-face-detector';
+import { useFaceAntiSpoofFrameOutput } from 'react-native-vision-camera-spoof-detector';
+
+const STABLE_FRAMES = 3;
+const CENTER_FRAMES = 2;
+const REQUIRED_BLINKS = 3;
+const REQUIRED_LIVE_FRAMES = 3;
+const BLINK_THRESHOLD = 0.3;
+const MOVEMENT_THRESHOLD = 15;
+const LAPLACIAN_THRESHOLD = 2500;
+const CENTER_X = 0.2;
+const CENTER_Y = 0.15;
+
+export const useFaceDetectionFrameProcessor = ({
+    onStableFaceDetected = () => { },
+    onFacesUpdate = () => { },
+    onLivenessUpdate = () => { },
+    onAntiSpoofUpdate = () => { },
+    showCodeScanner = false,
+    isLoading = false,
+    isActive = true,
+    livenessLevel = 0,
+    antispooflevel = 0.35,
+    cameraFacing = 'front',
+    windowWidth = 0,
+    windowHeight = 0,
+}) => {
+    const stateRef = useRef({});
+    const callbacksRef = useRef({
+        onStableFaceDetected,
+        onFacesUpdate,
+        onLivenessUpdate,
+        onAntiSpoofUpdate,
+    });
+
+    const resetState = useCallback(() => {
+        stateRef.current = {
+            captured: false,
+            hasSingleFace: false,
+            isFaceCentered: false,
+            stableCount: 0,
+            centeredFrames: 0,
+            lastX: 0,
+            lastY: 0,
+            isLive: false,
+            confidence: 0,
+            consecutiveLiveFrames: 0,
+            lastResult: null,
+            livenessStep: 0,
+            blinkCount: 0,
+            eyeClosed: false,
+        };
+    }, []);
+
+    if (!stateRef.current.captured && !stateRef.current.hasSingleFace) {
+        resetState();
+    }
+
+    useEffect(() => {
+        callbacksRef.current = {
+            onStableFaceDetected,
+            onFacesUpdate,
+            onLivenessUpdate,
+            onAntiSpoofUpdate,
+        };
+    }, [onStableFaceDetected, onFacesUpdate, onLivenessUpdate, onAntiSpoofUpdate]);
+
+    const emitFaces = useCallback((count, progress, state) => {
+        callbacksRef.current.onFacesUpdate({
+            count,
+            progress,
+            step: state.livenessStep,
+            isCentered: state.isFaceCentered,
+            antiSpoofState: {
+                isLive: state.isLive,
+                confidence: state.confidence,
+                consecutiveLiveFrames: state.consecutiveLiveFrames,
+                isFaceCentered: state.isFaceCentered,
+                hasSingleFace: state.hasSingleFace,
+            },
+        });
+    }, []);
+
+    const faceDetectorOutput = useFaceDetectorOutput({
+        cameraFacing,
+        autoMode: true,
+        windowWidth,
+        windowHeight,
+        performanceMode: 'fast',
+        trackingEnabled: true,
+        landmarkMode: 'none',
+        contourMode: 'none',
+        classificationMode: livenessLevel === 1 ? 'all' : 'none',
+        minFaceSize: 0.2,
+        onFacesDetected: (faces) => {
+            const state = stateRef.current;
+            if (showCodeScanner || isLoading || !isActive || state.captured) return;
+
+            if (!faces || faces.length !== 1 || !faces[0]?.bounds) {
+                state.hasSingleFace = false;
+                state.isFaceCentered = false;
+                state.centeredFrames = 0;
+                state.stableCount = 0;
+                state.consecutiveLiveFrames = 0;
+                state.isLive = false;
+                emitFaces(faces?.length || 0, 0, state);
+                return;
+            }
+
+            const { bounds } = faces[0];
+            const x = Math.max(0, bounds.x);
+            const y = Math.max(0, bounds.y);
+            const width = Math.max(0, bounds.width);
+            const height = Math.max(0, bounds.height);
+            const centered =
+                Math.abs(x + width / 2 - windowWidth / 2) <= windowWidth * CENTER_X &&
+                Math.abs(y + height / 2 - windowHeight / 2) <= windowHeight * CENTER_Y;
+
+            state.hasSingleFace = true;
+            state.centeredFrames = centered ? Math.min(CENTER_FRAMES, state.centeredFrames + 1) : 0;
+            state.isFaceCentered = state.centeredFrames >= CENTER_FRAMES;
+            state.stableCount =
+                Math.abs(x - state.lastX) < MOVEMENT_THRESHOLD &&
+                    Math.abs(y - state.lastY) < MOVEMENT_THRESHOLD
+                    ? state.stableCount + 1
+                    : 1;
+            state.lastX = x;
+            state.lastY = y;
+
+            if (livenessLevel === 1) {
+                const eyesClosed =
+                    (faces[0].leftEyeOpenProbability ?? 1) < BLINK_THRESHOLD &&
+                    (faces[0].rightEyeOpenProbability ?? 1) < BLINK_THRESHOLD;
+                if (state.livenessStep === 0) {
+                    state.livenessStep = 1;
+                    callbacksRef.current.onLivenessUpdate(1);
+                } else if (eyesClosed && !state.eyeClosed) {
+                    state.blinkCount += 1;
+                    callbacksRef.current.onLivenessUpdate(1, { blinkCount: state.blinkCount });
+                }
+                state.eyeClosed = eyesClosed;
+                if (state.blinkCount >= REQUIRED_BLINKS) state.livenessStep = 2;
+            }
+
+            emitFaces(1, Math.min(100, (state.stableCount / STABLE_FRAMES) * 100), state);
+
+            if (
+                state.stableCount >= STABLE_FRAMES &&
+                state.isLive &&
+                state.consecutiveLiveFrames >= REQUIRED_LIVE_FRAMES &&
+                state.isFaceCentered &&
+                (livenessLevel === 0 || state.livenessStep === 2)
+            ) {
+                state.captured = true;
+                callbacksRef.current.onStableFaceDetected({ x, y, width, height }, state.lastResult);
+            }
+        },
+        onError: (error) => console.warn('[useFaceDetection] face detector error:', error?.message),
+    });
+
+    const antiSpoofOutput = useFaceAntiSpoofFrameOutput({
+        onResult: (result) => {
+            const state = stateRef.current;
+            if (showCodeScanner || isLoading || !isActive || !state.isFaceCentered || !result) return;
+            console.log('Kkkkkkkkkkkkkk', JSON.stringify(result))
+
+            const { laplacianScore = 0, confidence = 0, combinedScore = 0 } = result;
+            const isLiveFrame =
+                laplacianScore > LAPLACIAN_THRESHOLD &&
+                confidence > antispooflevel &&
+                combinedScore > antispooflevel;
+            state.consecutiveLiveFrames = isLiveFrame
+                ? Math.min(REQUIRED_LIVE_FRAMES, state.consecutiveLiveFrames + 1)
+                : Math.max(0, state.consecutiveLiveFrames - 1);
+            state.isLive = state.consecutiveLiveFrames >= REQUIRED_LIVE_FRAMES;
+            state.confidence = confidence;
+            state.lastResult = result;
+            callbacksRef.current.onAntiSpoofUpdate({
+                isLive: state.isLive,
+                confidence,
+                rawResult: result,
+                consecutiveLiveFrames: state.consecutiveLiveFrames,
+                isFaceCentered: state.isFaceCentered,
+            });
+        },
+    });
+
+    useEffect(() => () => resetState(), [resetState]);
+
+    return {
+        outputs: showCodeScanner ? [] : [faceDetectorOutput, antiSpoofOutput].filter(Boolean),
+        resetCaptureState: resetState,
+        forceResetCaptureState: resetState,
+        updateShowCodeScanner: () => { },
+        updateIsActive: () => { },
+        capturedSV: { value: stateRef.current.captured },
+        antiSpoofState: {
+            isLive: stateRef.current.isLive,
+            confidence: stateRef.current.confidence,
+            consecutiveLiveFrames: stateRef.current.consecutiveLiveFrames,
+            lastResult: stateRef.current.lastResult,
+            hasSingleFace: stateRef.current.hasSingleFace,
+            isFaceCentered: stateRef.current.isFaceCentered,
+        },
+    };
+};