react-native-biometric-verifier 0.0.16 → 0.0.18

package/package.json

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

package/src/components/CaptureImageWithoutEdit.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import {
   View,
   TouchableOpacity,
@@ -8,6 +8,7 @@ import {
   Platform,
   AppState,
   BackHandler,
+  Animated,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import {
@@ -39,6 +40,7 @@ const CaptureImageWithoutEdit = React.memo(
     const [faces, setFaces] = useState([]);
     const [singleFaceDetected, setSingleFaceDetected] = useState(false);
     const [cameraError, setCameraError] = useState(null);
+    const [livenessStep, setLivenessStep] = useState(0);
 
     const captured = useRef(false);
     const appState = useRef(AppState.currentState);
@@ -46,11 +48,15 @@ const CaptureImageWithoutEdit = React.memo(
     const initializationAttempts = useRef(0);
     const maxInitializationAttempts = 3;
 
+    // Animation values
+    const instructionAnim = useRef(new Animated.Value(1)).current;
+
     // Reset capture state
     const resetCaptureState = useCallback(() => {
       captured.current = false;
       setSingleFaceDetected(false);
       setFaces([]);
+      setLivenessStep(0);
     }, []);
 
     // Code scanner
@@ -132,19 +138,46 @@ const CaptureImageWithoutEdit = React.memo(
       }
     }, []);
 
+    const onLivenessUpdate = useCallback((step) => {
+      setLivenessStep(step);
+      
+      // Animate instruction change
+      instructionAnim.setValue(0);
+      Animated.timing(instructionAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }, [instructionAnim]);
+
     // Use the face detection frame processor hook
     const {
       frameProcessor,
       resetCaptureState: resetFrameProcessor,
+      forceResetCaptureState,
       updateShowCodeScanner,
+      updateIsActive,
       capturedSV,
     } = useFaceDetectionFrameProcessor({
       onStableFaceDetected,
       onFacesUpdate,
+      onLivenessUpdate,
       showCodeScanner,
       isLoading,
+      isActive: showCamera && cameraInitialized, // Pass active state
     });
 
+    // Sync captured state with the shared value
+    useEffect(() => {
+      if (capturedSV?.value && !captured.current) {
+        captured.current = true;
+        setSingleFaceDetected(true);
+      } else if (!capturedSV?.value && captured.current) {
+        captured.current = false;
+        setSingleFaceDetected(false);
+      }
+    }, [capturedSV?.value]);
+
     // Initialize camera
     const initializeCamera = useCallback(async () => {
       try {
@@ -203,8 +236,15 @@ const CaptureImageWithoutEdit = React.memo(
       return () => {
         isMounted.current = false;
         setShowCamera(false);
+        // Reset frame processor state on unmount
+        forceResetCaptureState();
       };
-    }, [initializeCamera]);
+    }, [initializeCamera, forceResetCaptureState]);
+
+    // Update frame processor active state when camera state changes
+    useEffect(() => {
+      updateIsActive(showCamera && cameraInitialized);
+    }, [showCamera, cameraInitialized, updateIsActive]);
 
     // app state change
     useEffect(() => {
@@ -213,6 +253,11 @@ const CaptureImageWithoutEdit = React.memo(
           if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
             if (cameraPermission === 'granted') {
               setShowCamera(true);
+              // Reset capture state when app comes back to foreground
+              if (captured.current) {
+                forceResetCaptureState();
+                resetCaptureState();
+              }
             }
           } else if (nextAppState.match(/inactive|background/)) {
             setShowCamera(false);
@@ -230,7 +275,7 @@ const CaptureImageWithoutEdit = React.memo(
           console.error('Error removing app state listener:', error);
         }
       };
-    }, [cameraPermission]);
+    }, [cameraPermission, forceResetCaptureState, resetCaptureState]);
 
     // android back handler
     useEffect(() => {
@@ -271,12 +316,17 @@ const CaptureImageWithoutEdit = React.memo(
 
       setCameraError(errorMessage);
       setShowCamera(false);
-    }, []);
+      // Reset capture state on error
+      forceResetCaptureState();
+      resetCaptureState();
+    }, [forceResetCaptureState, resetCaptureState]);
 
     const handleCameraInitialized = useCallback(() => {
       setCameraInitialized(true);
       setCameraError(null);
-    }, []);
+      // Ensure frame processor is active after initialization
+      updateIsActive(true);
+    }, [updateIsActive]);
 
     // format selection
     const format = useCameraFormat(cameraDevice, [
@@ -288,22 +338,51 @@ const CaptureImageWithoutEdit = React.memo(
     useEffect(() => {
       try {
         updateShowCodeScanner(!!showCodeScanner);
+        // Reset capture state when switching modes
+        if (showCodeScanner && captured.current) {
+          forceResetCaptureState();
+          resetCaptureState();
+        }
       } catch (error) {
         console.error('Error updating code scanner:', error);
       }
-    }, [showCodeScanner, updateShowCodeScanner]);
+    }, [showCodeScanner, updateShowCodeScanner, forceResetCaptureState, resetCaptureState]);
 
     // Retry camera initialization
     const handleRetry = useCallback(() => {
       setCameraError(null);
       setShowCamera(false);
+      // Reset both local and frame processor state
+      forceResetCaptureState();
       resetCaptureState();
       setTimeout(() => {
         if (isMounted.current) {
           initializeCamera();
         }
       }, 500);
-    }, [initializeCamera, resetCaptureState]);
+    }, [initializeCamera, resetCaptureState, forceResetCaptureState]);
+
+    // Render liveness instructions
+    const renderLivenessInstruction = () => {
+      if (faces.length === 0) return 'Position your face in the frame';
+      
+      switch (livenessStep) {
+        case 0:
+          return 'Look straight into the camera';
+        case 1:
+          return 'Turn your face to the right';
+        case 2:
+          return 'Now turn your face to the left';
+        case 3:
+          if (captured.current) {
+            return 'Capturing...';
+          } else {
+            return 'Perfect! Hold still for capture...';
+          }
+        default:
+          return 'Position your face in the frame';
+      }
+    };
 
     // camera placeholder / UI
     const renderCameraPlaceholder = () => (
@@ -392,32 +471,65 @@ const CaptureImageWithoutEdit = React.memo(
           renderCameraPlaceholder()
         )}
 
-        {/* Face detection status text */}
+        {/* Liveness Detection UI */}
         {!showCodeScanner && shouldRenderCamera && (
+          <View style={styles.livenessContainer}>
+            {/* Instructions with animation */}
+            <Animated.View 
+              style={[
+                styles.instructionContainer,
+                {
+                  opacity: instructionAnim,
+                  transform: [
+                    {
+                      translateY: instructionAnim.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [10, 0],
+                      }),
+                    },
+                  ],
+                },
+              ]}
+            >
+              <Text style={styles.instructionText}>{renderLivenessInstruction()}</Text>
+            </Animated.View>
+
+            {/* Step Indicators */}
+            <View style={styles.stepsContainer}>
+              {[0, 1, 2].map((step) => (
+                <React.Fragment key={step}>
+                  <View style={[
+                    styles.stepIndicator,
+                    livenessStep > step ? styles.stepCompleted : 
+                    livenessStep === step ? styles.stepCurrent : styles.stepPending
+                  ]}>
+                    <Text style={styles.stepText}>{step + 1}</Text>
+                  </View>
+                  {step < 2 && (
+                    <View style={[
+                      styles.stepConnector,
+                      livenessStep > step ? styles.connectorCompleted : {}
+                    ]} />
+                  )}
+                </React.Fragment>
+              ))}
+            </View>
+
+            {/* Step Labels */}
+            <View style={styles.stepLabelsContainer}>
+              <Text style={styles.stepLabel}>Center</Text>
+              <Text style={styles.stepLabel}>Right</Text>
+              <Text style={styles.stepLabel}>Left</Text>
+            </View>
+          </View>
+        )}
+
+        {/* Face detection status */}
+        {!showCodeScanner && shouldRenderCamera && faces.length > 1 && (
           <View style={styles.faceDetectionStatus}>
-            {faces.length === 0 && (
-              <Text style={styles.faceDetectionText}>
-                Position your face in the frame
-              </Text>
-            )}
-            {faces.length > 1 && (
-              <Text style={[styles.faceDetectionText, styles.multipleFacesText]}>
-                Multiple faces detected. Please ensure only one person is in the frame.
-              </Text>
-            )}
-            {singleFaceDetected && !captured.current && (
-              <Text style={[styles.faceDetectionText, styles.singleFaceText]}>
-                Face detected. Hold still...
-              </Text>
-            )}
-            {captured.current && (
-              <View style={styles.capturingContainer}>
-                <ActivityIndicator size="small" color={COLORS.light} />
-                <Text style={[styles.faceDetectionText, styles.capturingText]}>
-                  Capturing...
-                </Text>
-              </View>
-            )}
+            <Text style={[styles.faceDetectionText, styles.multipleFacesText]}>
+              Multiple faces detected. Please ensure only one person is in the frame.
+            </Text>
           </View>
         )}
 
@@ -427,10 +539,10 @@ const CaptureImageWithoutEdit = React.memo(
             <TouchableOpacity
               style={[
                 styles.flipButton,
-                (isLoading || captured.current) && styles.flipButtonDisabled,
+                (isLoading || captured.current || livenessStep > 0) && styles.flipButtonDisabled,
               ]}
               onPress={onToggleCamera}
-              disabled={isLoading || captured.current}
+              disabled={isLoading || captured.current || livenessStep > 0}
               accessibilityLabel="Flip camera"
             >
               <Icon name="flip-camera-ios" size={28} color={COLORS.light} />
@@ -541,19 +653,80 @@ const styles = StyleSheet.create({
   multipleFacesText: {
     backgroundColor: 'rgba(255,0,0,0.7)',
   },
-  singleFaceText: {
-    backgroundColor: 'rgba(0,255,0,0.7)',
+  // Liveness detection styles
+  livenessContainer: {
+    position: 'absolute',
+    top: 40,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    paddingHorizontal: 20,
   },
-  capturingText: {
-    backgroundColor: 'rgba(0,100,255,0.7)',
+  instructionContainer: {
+    backgroundColor: 'rgba(0,0,0,0.8)',
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 8,
+    marginBottom: 20,
+  },
+  instructionText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
   },
-  capturingContainer: {
+  stepsContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: 'rgba(0,100,255,0.7)',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 8,
+    marginBottom: 8,
+  },
+  stepIndicator: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 2,
+  },
+  stepCompleted: {
+    backgroundColor: COLORS.primary,
+    borderColor: COLORS.primary,
+  },
+  stepCurrent: {
+    backgroundColor: COLORS.primary,
+    borderColor: COLORS.primary,
+    opacity: 0.7,
+  },
+  stepPending: {
+    backgroundColor: 'transparent',
+    borderColor: 'rgba(255,255,255,0.5)',
+  },
+  stepText: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+  stepConnector: {
+    flex: 1,
+    height: 2,
+    backgroundColor: 'rgba(255,255,255,0.3)',
+    marginHorizontal: 4,
+  },
+  connectorCompleted: {
+    backgroundColor: COLORS.primary,
+  },
+  stepLabelsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    paddingHorizontal: 10,
+  },
+  stepLabel: {
+    color: 'white',
+    fontSize: 12,
+    opacity: 0.8,
+    textAlign: 'center',
+    flex: 1,
   },
 });
 

package/src/components/CountdownTimer.js

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { View, Text, Animated, StyleSheet, Platform } from 'react-native';
 import { COLORS } from '../utils/constants';
 
 export const CountdownTimer = ({ duration, currentTime }) => {
-  const progress = React.useRef(new Animated.Value(1)).current;
+  const progress = useRef(new Animated.Value(1)).current;
+  const pulseAnim = useRef(new Animated.Value(1)).current; // for pulsing effect
 
-  React.useEffect(() => {
+  useEffect(() => {
     Animated.timing(progress, {
       toValue: currentTime / duration,
       duration: 1000,
@@ -13,26 +14,69 @@ export const CountdownTimer = ({ duration, currentTime }) => {
     }).start();
   }, [currentTime, duration, progress]);
 
+  // Pulse animation only in last 10 seconds
+  useEffect(() => {
+    if (currentTime <= 10 && currentTime > 0) {
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulseAnim, {
+            toValue: 1.2,
+            duration: 500,
+            useNativeDriver: true,
+          }),
+          Animated.timing(pulseAnim, {
+            toValue: 1,
+            duration: 500,
+            useNativeDriver: true,
+          }),
+        ])
+      ).start();
+    } else {
+      pulseAnim.stopAnimation();
+      pulseAnim.setValue(1); // reset
+    }
+  }, [currentTime, pulseAnim]);
+
   const circumference = 2 * Math.PI * 40;
   const strokeDashoffset = progress.interpolate({
     inputRange: [0, 1],
     outputRange: [circumference, 0],
   });
 
+  // Change color when < 10 seconds
+  const isEnding = currentTime <= 10;
+  const circleColor = isEnding ? 'red' : COLORS.light;
+  const textColor = isEnding ? 'red' : COLORS.light;
+
   return (
     <View style={styles.container}>
-      <View style={styles.timerWrapper}>
+      <Animated.View
+        style={[
+          styles.timerWrapper,
+          { transform: [{ scale: pulseAnim }] },
+        ]}
+      >
         <Animated.View style={styles.animatedWrapper}>
           <Animated.View
             style={[
               styles.progressCircle,
-              { strokeDashoffset, transform: [{ rotate: '-90deg' }] },
+              {
+                strokeDashoffset,
+                transform: [{ rotate: '-90deg' }],
+                borderColor: circleColor,
+                borderLeftColor: 'transparent',
+                borderBottomColor: 'transparent',
+              },
             ]}
           />
         </Animated.View>
-        <Text style={styles.timeText}>{currentTime}s</Text>
-      </View>
-      <Text style={styles.remainingText}>Remaining</Text>
+        <Text style={[styles.timeText, { color: textColor }]}>
+          {currentTime}s
+        </Text>
+      </Animated.View>
+      <Text style={[styles.remainingText, { color: textColor }]}>
+        Remaining
+      </Text>
     </View>
   );
 };
@@ -61,19 +105,14 @@ const styles = StyleSheet.create({
     height: 76,
     borderRadius: 38,
     borderWidth: 3,
-    borderColor: COLORS.light,
-    borderLeftColor: 'transparent',
-    borderBottomColor: 'transparent',
   },
   timeText: {
     fontSize: 20,
     fontWeight: '700',
-    color: COLORS.light,
     fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif-medium',
   },
   remainingText: {
     fontSize: 14,
-    color: COLORS.light,
     marginTop: 5,
     opacity: 0.8,
     fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',

package/src/components/Loader.js

@@ -16,7 +16,7 @@ export default function Loader({
   overlayColor = 'rgba(0,0,0,0.4)',
   loaderColor = 'lightblue',
   size = 50,
-  gifSource = {uri:`http://emr.amalaims.org:9393/file/getCommonFile/image/heartpulse.gif`},
+  gifSource = {uri: `http://emr.amalaims.org:9393/file/getCommonFile/image/heartpulse.gif`},
   message = '',
   messageStyle = {},
   animationType = 'fade',
@@ -27,6 +27,19 @@ export default function Loader({
   const [rotation] = useState(new Animated.Value(0));
   const [pulse] = useState(new Animated.Value(1));
   const [fade] = useState(new Animated.Value(0));
+  const [imageSource, setImageSource] = useState(gifSource);
+
+  // Reset imageSource whenever gifSource prop changes
+  useEffect(() => {
+    setImageSource(gifSource);
+  }, [gifSource]);
+
+  const handleImageError = () => {
+    // Fallback to default heartpulse GIF when image fails to load
+    setImageSource({ 
+      uri: "http://emr.amalaims.org:9393/file/getCommonFile/image/heartpulse.gif" 
+    });
+  };
 
   // Rotation animation
   useEffect(() => {
@@ -73,7 +86,9 @@ export default function Loader({
   const loaderContent = gifSource ? (
     <FastImage
       style={[styles.icon_style, { width: normalize(size), height: normalize(size) }]}
-      source={gifSource}
+      source={imageSource}
+      resizeMode={FastImage.resizeMode.contain}
+      onError={handleImageError}
     />
   ) : (
     <Animated.View style={[
@@ -120,7 +135,6 @@ export default function Loader({
             ...(shadow && styles.shadowStyle)
           }
         ]}>
-          {console.log('loadersource--------------------',JSON.stringify(gifSource))}
           {loaderContent}
           {message ? (
             <Text style={[styles.messageText, messageStyle]}>

package/src/hooks/useFaceDetectionFrameProcessor.js

@@ -1,21 +1,27 @@
-import { useCallback, useMemo } from 'react';
+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';
 
-// Tuned constants
+// Tuned constants for liveness detection
 const FACE_STABILITY_THRESHOLD = 3;
 const FACE_MOVEMENT_THRESHOLD = 15;
-const FRAME_PROCESSOR_MIN_INTERVAL_MS = 1000;
+const FRAME_PROCESSOR_MIN_INTERVAL_MS = 800;
 const MIN_FACE_SIZE = 0.2;
 
+// Liveness detection constants
+const YAW_LEFT_THRESHOLD = -15; // face turned left (negative yaw)
+const YAW_RIGHT_THRESHOLD = 15; // face turned right (positive yaw)
+const YAW_CENTER_THRESHOLD = 5; // face centered
+
 export const useFaceDetectionFrameProcessor = ({
   onStableFaceDetected = () => {},
   onFacesUpdate = () => {},
+  onLivenessUpdate = () => {},
   showCodeScanner = false,
   isLoading = false,
+  isActive = true,
 }) => {
-  // Face detector (fast mode only)
   const { detectFaces } = useFaceDetector({
     performanceMode: 'fast',
     landmarkMode: 'none',
@@ -24,144 +30,320 @@ export const useFaceDetectionFrameProcessor = ({
     minFaceSize: MIN_FACE_SIZE,
   });
 
-  // Shared state
-  const lastProcessedTime = useMemo(() => Worklets.createSharedValue(0), []);
-  const lastX = useMemo(() => Worklets.createSharedValue(0), []);
-  const lastY = useMemo(() => Worklets.createSharedValue(0), []);
-  const lastW = useMemo(() => Worklets.createSharedValue(0), []);
-  const lastH = useMemo(() => Worklets.createSharedValue(0), []);
-  const stableCount = useMemo(() => Worklets.createSharedValue(0), []);
-  const capturedSV = useMemo(() => Worklets.createSharedValue(false), []);
-  const showCodeScannerSV = useMemo(
-    () => Worklets.createSharedValue(showCodeScanner),
-    [showCodeScanner]
+  const isMounted = useRef(true);
+
+  const sharedState = useMemo(() =>
+    Worklets.createSharedValue({
+      lastProcessedTime: 0,
+      lastX: 0,
+      lastY: 0,
+      lastW: 0,
+      lastH: 0,
+      stableCount: 0,
+      captured: false,
+      showCodeScanner: showCodeScanner,
+      isActive: isActive,
+      livenessStep: 0, // 0=look straight, 1=left done, 2=right done, 3=ready for capture
+      leftTurnVerified: false,
+      rightTurnVerified: false,
+      currentYaw: 0,
+      yawStableCount: 0,
+    }), []);
+
+  useEffect(() => {
+    if (!isMounted.current) return;
+    
+    sharedState.value = {
+      ...sharedState.value,
+      showCodeScanner: showCodeScanner,
+      isActive: isActive
+    };
+    
+    // Reset when becoming active again
+    if (isActive && sharedState.value.captured) {
+      sharedState.value = {
+        ...sharedState.value,
+        captured: false,
+        stableCount: 0,
+        livenessStep: 0,
+        leftTurnVerified: false,
+        rightTurnVerified: false,
+        yawStableCount: 0,
+      };
+    }
+  }, [showCodeScanner, isActive, sharedState]);
+
+  const runOnStable = useMemo(() =>
+    Worklets.createRunOnJS((faceRect) => {
+      try {
+        onStableFaceDetected?.(faceRect);
+      } catch (error) {
+        console.error('Error in runOnStable:', error);
+      }
+    }), [onStableFaceDetected]
   );
 
-  // Safe JS callbacks
-  const runOnStable = useMemo(
-    () =>
-      Worklets.createRunOnJS((x, y, width, height) => {
-        try {
-          onStableFaceDetected?.({
-            x: Math.max(0, Math.round(x)),
-            y: Math.max(0, Math.round(y)),
-            width: Math.max(0, Math.round(width)),
-            height: Math.max(0, Math.round(height)),
-          });
-        } catch {}
-      }),
-    [onStableFaceDetected]
+  const runOnFaces = useMemo(() =>
+    Worklets.createRunOnJS((count, progress, step) => {
+      try {
+        onFacesUpdate?.({ count, progress, step });
+      } catch (error) {
+        console.error('Error in runOnFaces:', error);
+      }
+    }), [onFacesUpdate]
   );
 
-  const runOnFaces = useMemo(
-    () =>
-      Worklets.createRunOnJS((count, progress) => {
-        try {
-          onFacesUpdate?.({ count, progress });
-        } catch {}
-      }),
-    [onFacesUpdate]
+  const runOnLiveness = useMemo(() =>
+    Worklets.createRunOnJS((step) => {
+      try {
+        onLivenessUpdate?.(step);
+      } catch (error) {
+        console.error('Error in runOnLiveness:', error);
+      }
+    }), [onLivenessUpdate]
   );
 
-  // Frame processor
   const frameProcessor = useFrameProcessor((frame) => {
     'worklet';
+    const state = sharedState.value;
 
-    // Kill switches
-    if (showCodeScannerSV.value || capturedSV.value || isLoading) return;
+    // Early return conditions
+    if (state.showCodeScanner || state.captured || isLoading || !state.isActive) {
+      frame.release?.();
+      return;
+    }
 
     const now = frame?.timestamp ? frame.timestamp / 1e6 : Date.now();
-    if (now - lastProcessedTime.value < FRAME_PROCESSOR_MIN_INTERVAL_MS) return;
-    lastProcessedTime.value = now;
+    if (now - state.lastProcessedTime < FRAME_PROCESSOR_MIN_INTERVAL_MS) {
+      frame.release?.();
+      return;
+    }
 
     let detected;
     try {
       detected = detectFaces?.(frame);
-    } catch {
-      return; // skip invalid frame
+      frame.release?.();
+    } catch (error) {
+      frame.release?.();
+      return;
     }
 
     if (!detected || detected.length === 0) {
-      // No faces → reset
-      stableCount.value = 0;
-      capturedSV.value = false;
-      runOnFaces(0, 0);
+      sharedState.value = { 
+        ...state, 
+        stableCount: 0, 
+        lastProcessedTime: now,
+        yawStableCount: 0
+      };
+      runOnFaces(0, 0, state.livenessStep);
       return;
     }
 
-    if (detected.length === 1 && !capturedSV.value) {
-      const f = detected[0];
-      if (!f?.bounds) {
-        runOnFaces(0, 0);
+    if (detected.length === 1 && !state.captured) {
+      const face = detected[0];
+      if (!face?.bounds || face.yawAngle === undefined) {
+        runOnFaces(0, 0, state.livenessStep);
         return;
       }
 
-      // Clamp invalid values
-      const x = Math.max(0, f.bounds.x ?? 0);
-      const y = Math.max(0, f.bounds.y ?? 0);
-      const width = Math.max(0, f.bounds.width ?? 0);
-      const height = Math.max(0, f.bounds.height ?? 0);
-
-      if (lastX.value === 0 && lastY.value === 0) {
-        // First detection
-        lastX.value = x;
-        lastY.value = y;
-        lastW.value = width;
-        lastH.value = height;
-        stableCount.value = 1;
-      } else {
-        const dx = Math.abs(x - lastX.value);
-        const dy = Math.abs(y - lastY.value);
+      const yaw = face.yawAngle;
+      const x = Math.max(0, face.bounds.x);
+      const y = Math.max(0, face.bounds.y);
+      const width = Math.max(0, face.bounds.width);
+      const height = Math.max(0, face.bounds.height);
 
-        if (dx < FACE_MOVEMENT_THRESHOLD && dy < FACE_MOVEMENT_THRESHOLD) {
-          stableCount.value += 1;
+      let newLivenessStep = state.livenessStep;
+      let newLeftTurnVerified = state.leftTurnVerified;
+      let newRightTurnVerified = state.rightTurnVerified;
+      let newYawStableCount = state.yawStableCount;
+
+      // Liveness detection logic
+      if (newLivenessStep === 0) {
+        // Step 0: Wait for face to be centered and stable
+        if (Math.abs(yaw) < YAW_CENTER_THRESHOLD) {
+          newYawStableCount++;
+          if (newYawStableCount >= 2) {
+            newLivenessStep = 1; // Ready for left turn
+            runOnLiveness(newLivenessStep);
+            newYawStableCount = 0;
+          }
         } else {
-          stableCount.value = 1; // restart stability
+          newYawStableCount = 0;
+        }
+      } 
+      else if (newLivenessStep === 1 && !newLeftTurnVerified) {
+        // Step 1: Detect left turn
+        if (yaw < YAW_LEFT_THRESHOLD) {
+          newYawStableCount++;
+          if (newYawStableCount >= 2) {
+            newLeftTurnVerified = true;
+            newLivenessStep = 2; // Ready for right turn
+            runOnLiveness(newLivenessStep);
+            newYawStableCount = 0;
+          }
+        } else {
+          newYawStableCount = Math.max(0, newYawStableCount - 0.5);
+        }
+      } 
+      else if (newLivenessStep === 2 && newLeftTurnVerified && !newRightTurnVerified) {
+        // Step 2: Detect right turn
+        if (yaw > YAW_RIGHT_THRESHOLD) {
+          newYawStableCount++;
+          if (newYawStableCount >= 2) {
+            newRightTurnVerified = true;
+            newLivenessStep = 3; // Ready for capture
+            runOnLiveness(newLivenessStep);
+            newYawStableCount = 0;
+          }
+        } else {
+          newYawStableCount = Math.max(0, newYawStableCount - 0.5);
+        }
+      } 
+      else if (newLivenessStep === 3 && newLeftTurnVerified && newRightTurnVerified) {
+        // Step 3: Wait for face to return to center for capture
+        if (Math.abs(yaw) < YAW_CENTER_THRESHOLD) {
+          newYawStableCount++;
+        } else {
+          newYawStableCount = 0;
         }
-
-        lastX.value = x;
-        lastY.value = y;
-        lastW.value = width;
-        lastH.value = height;
       }
 
-      if (stableCount.value >= FACE_STABILITY_THRESHOLD) {
-        capturedSV.value = true;
-        runOnStable(lastX.value, lastY.value, lastW.value, lastH.value);
+      // Calculate face stability for capture
+      let newStableCount = state.stableCount;
+      if (state.lastX === 0 && state.lastY === 0) {
+        newStableCount = 1;
       } else {
-        runOnFaces(1, stableCount.value);
+        const dx = Math.abs(x - state.lastX);
+        const dy = Math.abs(y - state.lastY);
+        if (dx < FACE_MOVEMENT_THRESHOLD && dy < FACE_MOVEMENT_THRESHOLD) {
+          newStableCount = state.stableCount + 1;
+        } else {
+          newStableCount = 1;
+        }
+      }
+
+      // Update shared state
+      sharedState.value = {
+        ...state,
+        lastProcessedTime: now,
+        lastX: x,
+        lastY: y,
+        lastW: width,
+        lastH: height,
+        stableCount: newStableCount,
+        livenessStep: newLivenessStep,
+        leftTurnVerified: newLeftTurnVerified,
+        rightTurnVerified: newRightTurnVerified,
+        currentYaw: yaw,
+        yawStableCount: newYawStableCount,
+      };
+
+      // Calculate progress for UI
+      const progress = Math.min(100, (newStableCount / FACE_STABILITY_THRESHOLD) * 100);
+      runOnFaces(1, progress, newLivenessStep);
+
+      // Capture conditions: liveness complete + face stable + face centered
+      if (newLivenessStep === 3 && 
+          newLeftTurnVerified && 
+          newRightTurnVerified && 
+          newStableCount >= FACE_STABILITY_THRESHOLD &&
+          Math.abs(yaw) < YAW_CENTER_THRESHOLD &&
+          newYawStableCount >= 2) {
+        
+        sharedState.value = {
+          ...sharedState.value,
+          captured: true
+        };
+        runOnStable({ x, y, width, height });
       }
+
     } else {
-      // Multiple faces → not allowed
-      stableCount.value = 0;
-      capturedSV.value = false;
-      runOnFaces(detected.length, 0);
+      // Multiple faces or other conditions
+      sharedState.value = { 
+        ...state, 
+        stableCount: 0, 
+        lastProcessedTime: now,
+        yawStableCount: 0
+      };
+      runOnFaces(detected.length, 0, state.livenessStep);
     }
   }, [detectFaces, isLoading]);
 
-  // Reset everything safely
   const resetCaptureState = useCallback(() => {
-    capturedSV.value = false;
-    stableCount.value = 0;
-    lastX.value = 0;
-    lastY.value = 0;
-    lastW.value = 0;
-    lastH.value = 0;
-    lastProcessedTime.value = 0;
-  }, []);
-
-  // Update QR/Scanner toggle
+    sharedState.value = {
+      ...sharedState.value,
+      lastProcessedTime: 0,
+      lastX: 0,
+      lastY: 0,
+      lastW: 0,
+      lastH: 0,
+      stableCount: 0,
+      captured: false,
+      livenessStep: 0,
+      leftTurnVerified: false,
+      rightTurnVerified: false,
+      currentYaw: 0,
+      yawStableCount: 0,
+    };
+  }, [sharedState]);
+
+  const forceResetCaptureState = useCallback(() => {
+    sharedState.value = {
+      lastProcessedTime: 0,
+      lastX: 0,
+      lastY: 0,
+      lastW: 0,
+      lastH: 0,
+      stableCount: 0,
+      captured: false,
+      showCodeScanner: sharedState.value.showCodeScanner,
+      isActive: sharedState.value.isActive,
+      livenessStep: 0,
+      leftTurnVerified: false,
+      rightTurnVerified: false,
+      currentYaw: 0,
+      yawStableCount: 0,
+    };
+  }, [sharedState]);
+
   const updateShowCodeScanner = useCallback(
     (value) => {
-      showCodeScannerSV.value = !!value;
-    },
-    [showCodeScannerSV]
+      sharedState.value = { 
+        ...sharedState.value, 
+        showCodeScanner: !!value 
+      };
+    }, 
+    [sharedState]
+  );
+
+  const updateIsActive = useCallback(
+    (active) => {
+      sharedState.value = { 
+        ...sharedState.value, 
+        isActive: active,
+        // Reset capture state when deactivating
+        captured: active ? sharedState.value.captured : false
+      };
+    }, 
+    [sharedState]
   );
 
+  // Cleanup on unmount
+  useEffect(() => {
+    isMounted.current = true;
+    
+    return () => {
+      isMounted.current = false;
+      forceResetCaptureState();
+    };
+  }, [forceResetCaptureState]);
+
   return {
     frameProcessor,
     resetCaptureState,
+    forceResetCaptureState,
     updateShowCodeScanner,
-    capturedSV,
+    updateIsActive,
+    capturedSV: { value: sharedState.value.captured },
   };
-};
+};