react-native-biometric-verifier 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-biometric-verifier",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "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,3 +1,4 @@
+// CaptureImageWithoutEdit.js
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 import {
     View,
@@ -6,6 +7,8 @@ import {
     StyleSheet,
     ActivityIndicator,
     Platform,
+    AppState,
+    BackHandler,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import {
@@ -21,10 +24,11 @@ import { useFaceDetector } from 'react-native-vision-camera-face-detector';
 import { COLORS } from "../utils/constants";
 
 // Constants for configuration
-const FACE_STABILITY_THRESHOLD = 5; // Number of stable frames required
-const FACE_MOVEMENT_THRESHOLD = 15; // Pixel movement threshold for stability
-const FRAME_PROCESSOR_FPS = 3; // Frames per second for face detection
-const MIN_FACE_SIZE = 0.2; // Minimum face size for detection
+const FACE_STABILITY_THRESHOLD = 4; // how many stable samples required
+const FACE_MOVEMENT_THRESHOLD = 18; // pixel threshold (adjust as needed)
+const FRAME_PROCESSOR_MIN_INTERVAL_MS = 700; // throttle; process at most every ~700ms
+const FRAME_PROCESSOR_FPS = 1;
+const MIN_FACE_SIZE = 0.2;
 
 const CaptureImageWithoutEdit = React.memo(
     ({
@@ -40,139 +44,193 @@ const CaptureImageWithoutEdit = React.memo(
         const [cameraPermission, setCameraPermission] = useState('not-determined');
         const [showCamera, setShowCamera] = useState(false);
         const [cameraInitialized, setCameraInitialized] = useState(false);
-        
-        // Face detection states
-        const [faces, setFaces] = useState([]);
+
+        // Face detection states (JS side holds minimal info only)
+        const [faces, setFaces] = useState([]); // we store minimal face rectangles here
         const [singleFaceDetected, setSingleFaceDetected] = useState(false);
         const [cameraError, setCameraError] = useState(null);
-        
-        // Stability tracking refs
-        const stableCounter = useRef(0);
-        const lastBounds = useRef(null);
+
+        // refs & lifecycle
         const captured = useRef(false);
-        const faceDetectionTimeout = useRef(null);
-        const processingFrame = useRef(false); // To prevent concurrent frame processing
+        const appState = useRef(AppState.currentState);
+        const isMounted = useRef(true);
 
+        // Face detector options
         const faceDetectionOptions = {
-            performanceMode: 'accurate',
-            landmarkMode: 'all',
-            contourMode: 'all',
-            classificationMode: 'all',
+            performanceMode: 'fast',
+            landmarkMode: 'none',
+            contourMode: 'none',
+            classificationMode: 'none',
             minFaceSize: MIN_FACE_SIZE,
         };
-
         const { detectFaces } = useFaceDetector(faceDetectionOptions);
 
+        // Code scanner (unchanged)
         const codeScanner = useCodeScanner({
-            codeTypes: ['qr', 'ean-13', 'code-128', 'code-39', 'code-93'],
+            codeTypes: ['qr', 'ean-13'],
             onCodeScanned: (codes) => {
                 if (showCodeScanner && codes && codes[0]?.value && !isLoading) {
-                    console.log('🔍 QR Code scanned:', codes[0].value);
+                    console.log('QR Code scanned:', codes[0].value);
                     onCapture(codes[0].value);
                 }
             },
         });
 
-        // Safe callback to JS for face detection results
-        const onFacesDetected = Worklets.createRunOnJS((detectedFaces) => {
-            // Only process if we have exactly one face
-            if (detectedFaces.length === 1 && !showCodeScanner && !captured.current) {
-                setFaces(detectedFaces);
-                setSingleFaceDetected(true);
-                
-                const face = detectedFaces[0];
-                const { bounds } = face;
+        //
+        // --- Worklet -> JS callbacks (small payloads only) ---
+        //
+        // Called when the worklet believes a face is stable enough to capture.
+        const onStableFaceDetected = useCallback((faceRect) => {
+            // faceRect is a tiny object: { x, y, width, height }
+            if (!isMounted.current) return;
+            if (captured.current) return;
 
-                if (lastBounds.current) {
-                    const dx = Math.abs(bounds.x - lastBounds.current.x);
-                    const dy = Math.abs(bounds.y - lastBounds.current.y);
+            // Lock capture to avoid duplicate triggers
+            captured.current = true;
+            setSingleFaceDetected(true);
+            setFaces([faceRect]); // minimal UI update
 
-                    // small movement = stable
-                    if (dx < FACE_MOVEMENT_THRESHOLD && dy < FACE_MOVEMENT_THRESHOLD) {
-                        stableCounter.current += 1;
-                    } else {
-                        stableCounter.current = 0;
+            // Kick off actual photo capture on JS thread
+            (async () => {
+                try {
+                    if (!cameraRef.current) {
+                        throw new Error('Camera ref not available');
                     }
-                }
 
-                lastBounds.current = bounds;
-
-                // if face stable for required frames → capture
-                if (stableCounter.current >= FACE_STABILITY_THRESHOLD && cameraRef.current) {
-                    captured.current = true; // lock to avoid multiple shots
-                    setSingleFaceDetected(false); // Reset UI state
-                    
-                    (async () => {
-                        try {
-                            const photo = await cameraRef.current.takePhoto({
-                                flash: 'off',
-                                qualityPrioritization: 'balanced',
-                                enableShutterSound: false,
-                            });
-                            
-                            console.log('Photo captured:', photo.path);
-                            const photopath = `file://${photo.path}`;                            
-                            const fileName = photopath.substr(photopath.lastIndexOf('/') + 1);
-                            const photoData = {
-                                uri: photopath,
-                                filename: fileName,
-                                filetype: 'image/jpeg',
-                            };
-                            
-                            onCapture(photoData);
-                            
-                        } catch (e) {
-                            console.error('Capture error:', e);
-                            captured.current = false; // Reset capture lock on error
-                            setCameraError('Failed to capture image. Please try again.');
-                        }
-                    })();
+                    const photo = await cameraRef.current.takePhoto({
+                        flash: 'off',
+                        qualityPrioritization: 'balanced',
+                        enableShutterSound: false,
+                        skipMetadata: true,
+                    });
+
+                    const photopath = `file://${photo.path}`;
+                    const fileName = photopath.substr(photopath.lastIndexOf('/') + 1);
+                    const photoData = {
+                        uri: photopath,
+                        filename: fileName,
+                        filetype: 'image/jpeg',
+                    };
+
+                    // send captured photo upstream
+                    onCapture(photoData);
+                } catch (e) {
+                    console.error('Capture error:', e);
+                    captured.current = false; // allow retries
+                    setCameraError('Failed to capture image. Please try again.');
                 }
+            })();
+        }, [onCapture]);
+
+        // Called to update face count / progress minimally for UI
+        const onFacesUpdate = useCallback((payload) => {
+            // payload: { count, progress? }
+            if (!isMounted.current) return;
+            const { count, progress } = payload;
+            if (count === 1) {
+                setSingleFaceDetected(true);
+                setFaces(prev => {
+                    // keep existing rectangle if present; otherwise set a placeholder
+                    if (prev.length === 1) return prev;
+                    return [{ x: 0, y: 0, width: 0, height: 0 }];
+                });
             } else {
-                // Reset if no face or multiple faces detected
-                setFaces(detectedFaces);
-                setSingleFaceDetected(detectedFaces.length === 1);
-                stableCounter.current = 0;
-                lastBounds.current = null;
-                
-                // Clear any pending timeout
-                if (faceDetectionTimeout.current) {
-                    clearTimeout(faceDetectionTimeout.current);
-                }
+                setSingleFaceDetected(false);
+                setFaces([]);
             }
-            
-            processingFrame.current = false;
-        });
+            // progress not necessary to store but could be used to show UI progress if desired
+        }, []);
+
+        // Create runOnJS wrappers (these are the functions that we'll call from the worklet)
+        // Note: Worklets.createRunOnJS returns a callable function which is available inside the worklet.
+        const runOnStable = Worklets.createRunOnJS(onStableFaceDetected);
+        const runOnFaces = Worklets.createRunOnJS(onFacesUpdate);
 
-        // Frame processor runs on UI thread
+        //
+        // --- Frame processor (worklet) ---
+        //
+        // The heavy detection is done here, with stability tracking inside the worklet.
+        // The worklet calls runOnStable(faceRect) only when it's time to capture.
         const frameProcessor = useFrameProcessor((frame) => {
             'worklet';
-            if (showCodeScanner || captured.current || processingFrame.current) return;
-            
-            processingFrame.current = true;
+            // prevent processing when scanning QR or when we already captured
+            if (global.__showCodeScanner || global.__captured) return;
+
+            // throttle processing to avoid overloading UI thread / CPU
+            const now = performance.now();
+            const last = global.__lastProcessedTime || 0;
+            if (now - last < FRAME_PROCESSOR_MIN_INTERVAL_MS) return;
+            global.__lastProcessedTime = now;
+
             try {
-                const detected = detectFaces(frame); // run detection
-                
-                // Only proceed if exactly one face is detected
-                if (detected.length === 1) {
-                    onFacesDetected(detected); // send results back to JS
+                // run face detection (this returns native objects)
+                const detected = detectFaces(frame); // array
+
+                const len = detected.length;
+
+                if (len === 1 && !global.__captured) {
+                    // single face logic and stability tracking inside the worklet
+                    const f = detected[0];
+                    const bounds = f.bounds; // { x, y, width, height }
+
+                    // initialize worklet-side state if necessary
+                    if (!global.__lastBounds) {
+                        global.__lastBounds = bounds;
+                        global.__stableCount = 1;
+                    } else {
+                        const dx = Math.abs(bounds.x - global.__lastBounds.x);
+                        const dy = Math.abs(bounds.y - global.__lastBounds.y);
+
+                        if (dx < FACE_MOVEMENT_THRESHOLD && dy < FACE_MOVEMENT_THRESHOLD) {
+                            global.__stableCount = (global.__stableCount || 0) + 1;
+                        } else {
+                            global.__stableCount = 0;
+                        }
+                        global.__lastBounds = bounds;
+                    }
+
+                    // If stable long enough -> trigger JS capture (only send very small payload)
+                    if ((global.__stableCount || 0) >= FACE_STABILITY_THRESHOLD) {
+                        // mark captured on worklet side to stop further processing immediately
+                        global.__captured = true;
+
+                        // send only minimal rectangle data to JS to avoid expensive bridging
+                        const faceRect = {
+                            x: Math.round(global.__lastBounds.x),
+                            y: Math.round(global.__lastBounds.y),
+                            width: Math.round(global.__lastBounds.width),
+                            height: Math.round(global.__lastBounds.height),
+                        };
+
+                        // runOnStable is the JS callback created above
+                        runOnStable(faceRect);
+                    } else {
+                        // optionally send lightweight updates for UI (count & progress)
+                        runOnFaces({ count: 1, progress: global.__stableCount || 0 });
+                    }
                 } else {
-                    onFacesDetected(detected); // send results (could be empty or multiple)
+                    // no face or multiple faces -> reset worklet-side stability trackers
+                    global.__lastBounds = null;
+                    global.__stableCount = 0;
+                    // notify JS about the number of faces (minimal payload)
+                    runOnFaces({ count: len });
                 }
-            } catch (error) {
-                console.error('Frame processor error:', error);
-                processingFrame.current = false;
+            } catch (e) {
+                // Avoid console.log heavy operations in worklet; just swallow or set a simple global flag
+                // If you need debugging, temporarily put a runOnFaces({ debug: String(e) }) but avoid in production.
             }
         }, [detectFaces, showCodeScanner]);
 
-        // Initialize camera
+        //
+        // --- Effect: app lifecycle & camera initialization ---
+        //
         useEffect(() => {
-            let isMounted = true;
-            
+            isMounted.current = true;
+
             const initializeCamera = async () => {
                 try {
-                    if (!isMounted) return;
-                    
+                    if (!isMounted.current) return;
+
                     const permission = await Camera.requestCameraPermission();
                     setCameraPermission(permission);
 
@@ -182,17 +240,18 @@ const CaptureImageWithoutEdit = React.memo(
 
                         if (device) {
                             setCameraDevice(device);
-                            setShowCamera(true);
+                            // short delay so camera UI transitions cleanly
+                            setTimeout(() => setShowCamera(true), 100);
                         } else {
-                            console.error('❌ No camera device found for type:', cameraType);
+                            console.error('No camera device found for type:', cameraType);
                             setCameraError('Camera not available on this device');
                         }
                     } else {
                         setCameraError('Camera permission denied');
                     }
                 } catch (error) {
-                    console.error('❌ Camera initialization failed:', error);
-                    if (isMounted) {
+                    console.error('Camera init failed:', error);
+                    if (isMounted.current) {
                         setCameraError('Failed to initialize camera');
                     }
                 }
@@ -201,85 +260,145 @@ const CaptureImageWithoutEdit = React.memo(
             initializeCamera();
 
             return () => {
-                isMounted = false;
+                isMounted.current = false;
                 setShowCamera(false);
-                // Clean up timeout on unmount
-                if (faceDetectionTimeout.current) {
-                    clearTimeout(faceDetectionTimeout.current);
-                }
             };
         }, [cameraType]);
-        
-        const format = useCameraFormat(cameraDevice, [
-            { photoResolution: { width: 640, height: 640 } },
-        ]);
 
+        // app state change
+        useEffect(() => {
+            const subscription = AppState.addEventListener('change', nextAppState => {
+                if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
+                    // App came to the foreground
+                    if (cameraPermission === 'granted') {
+                        setShowCamera(true);
+                    }
+                } else if (nextAppState.match(/inactive|background/)) {
+                    setShowCamera(false);
+                }
+                appState.current = nextAppState;
+            });
+
+            return () => subscription.remove();
+        }, [cameraPermission]);
+
+        // android back handler (same as before)
+        useEffect(() => {
+            const backHandler = BackHandler.addEventListener('hardwareBackPress', () => false);
+            return () => backHandler.remove();
+        }, []);
+
+        // handle camera errors
         const handleCameraError = useCallback((error) => {
             console.error('Camera error:', error);
             let errorMessage = 'Camera error occurred';
-            
+
             if (error instanceof CameraRuntimeError) {
                 switch (error.code) {
                     case 'session/configuration-failed':
-                        errorMessage = 'Camera configuration failed';
+                        errorMessage = 'Camera configuration failed. Please try again.';
                         break;
                     case 'device/not-available':
                         errorMessage = 'Camera not available';
                         break;
                     case 'permission/microphone-not-granted':
-                        errorMessage = 'Microphone permission required';
+                        errorMessage = 'Camera permission required';
                         break;
                     default:
                         errorMessage = `Camera error: ${error.message}`;
                 }
             }
-            
+
             setCameraError(errorMessage);
+            setShowCamera(false);
         }, []);
 
         const handleCameraInitialized = useCallback(() => {
-            console.log('Camera initialized successfully');
             setCameraInitialized(true);
             setCameraError(null);
         }, []);
 
+        // format selection (unchanged)
+        const format = useCameraFormat(cameraDevice, [
+            { videoResolution: { width: 640, height: 640 } },
+            { fps: 30 },
+        ]);
+
+        // camera placeholder / UI (kept the same)
         const renderCameraPlaceholder = () => (
             <View style={styles.cameraContainer}>
                 {cameraError ? (
                     <View style={styles.errorContainer}>
                         <Icon name="error-outline" size={40} color={COLORS.error} />
                         <Text style={styles.errorText}>{cameraError}</Text>
-                        <TouchableOpacity 
+                        <TouchableOpacity
                             style={styles.retryButton}
                             onPress={() => {
                                 setCameraError(null);
                                 setShowCamera(false);
-                                setTimeout(() => setShowCamera(true), 100);
+                                setTimeout(() => {
+                                    if (isMounted.current) {
+                                        setShowCamera(true);
+                                    }
+                                }, 500);
                             }}
                         >
                             <Text style={styles.retryButtonText}>Retry</Text>
                         </TouchableOpacity>
                     </View>
                 ) : cameraPermission === 'denied' ? (
-                    <Text style={styles.placeholderText}>
-                        Camera permission required. Please enable in settings.
-                    </Text>
+                    <View style={styles.placeholderContainer}>
+                        <Icon name="camera-off" size={40} color={COLORS.light} />
+                        <Text style={styles.placeholderText}>
+                            Camera permission required. Please enable in settings.
+                        </Text>
+                    </View>
                 ) : cameraPermission === 'not-determined' ? (
-                    <Text style={styles.placeholderText}>
-                        Requesting camera access...
-                    </Text>
+                    <View style={styles.placeholderContainer}>
+                        <ActivityIndicator size="large" color={COLORS.primary} />
+                        <Text style={styles.placeholderText}>
+                            Requesting camera access...
+                        </Text>
+                    </View>
                 ) : !cameraDevice ? (
-                    <Text style={styles.placeholderText}>Camera not available</Text>
+                    <View style={styles.placeholderContainer}>
+                        <Icon name="camera-alt" size={40} color={COLORS.light} />
+                        <Text style={styles.placeholderText}>Camera not available</Text>
+                    </View>
                 ) : (
-                    <ActivityIndicator size="large" color={COLORS.primary} />
+                    <View style={styles.placeholderContainer}>
+                        <ActivityIndicator size="large" color={COLORS.primary} />
+                        <Text style={styles.placeholderText}>Initializing camera...</Text>
+                    </View>
                 )}
             </View>
         );
 
-        const shouldRenderCamera = showCamera && 
-                                 cameraPermission === 'granted' && 
-                                 cameraDevice && 
-                                 !cameraError;
+        const shouldRenderCamera = showCamera &&
+            cameraPermission === 'granted' &&
+            cameraDevice &&
+            !cameraError;
+
+        // keep a global-ish small flag for the worklet to know about codeScanner state
+        useEffect(() => {
+            // make accessible inside the worklet
+            global.__showCodeScanner = !!showCodeScanner;
+            return () => {
+                global.__showCodeScanner = false;
+            };
+        }, [showCodeScanner]);
+
+        // When component unmounts, clear any worklet globals to avoid stale state
+        useEffect(() => {
+            return () => {
+                // Clear worklet globals
+                global.__lastProcessedTime = 0;
+                global.__lastBounds = null;
+                global.__stableCount = 0;
+                global.__captured = false;
+                global.__showCodeScanner = false;
+            };
+        }, []);
 
         return (
             <View style={styles.cameraContainer}>
@@ -288,18 +407,20 @@ const CaptureImageWithoutEdit = React.memo(
                         ref={cameraRef}
                         style={styles.camera}
                         device={cameraDevice}
-                        isActive={showCamera && !isLoading}
+                        isActive={showCamera && !isLoading && appState.current === 'active'}
                         photo={true}
                         format={format}
                         codeScanner={showCodeScanner ? codeScanner : undefined}
+                        // only attach frameProcessor when not scanning codes and camera is initialized
                         frameProcessor={!showCodeScanner && cameraInitialized ? frameProcessor : undefined}
                         frameProcessorFps={FRAME_PROCESSOR_FPS}
                         onInitialized={handleCameraInitialized}
                         onError={handleCameraError}
-                        enableZoomGesture={true}
-                        exposure={!showCodeScanner ? 0.5 : 0}
+                        enableZoomGesture={false}
+                        exposure={0}
                         pixelFormat="yuv"
-                        preset="high"
+                        preset="medium"
+                        orientation="portrait"
                     />
                 ) : (
                     renderCameraPlaceholder()
@@ -346,13 +467,12 @@ const CaptureImageWithoutEdit = React.memo(
                             <Icon name="flip-camera-ios" size={28} color={COLORS.light} />
                         </TouchableOpacity>
                     )}
-                </View>                
+                </View>
             </View>
         );
     }
 );
 
-// Add display name for better debugging
 CaptureImageWithoutEdit.displayName = 'CaptureImageWithoutEdit';
 
 const styles = StyleSheet.create({
@@ -368,6 +488,12 @@ const styles = StyleSheet.create({
         flex: 1,
         width: '100%',
     },
+    placeholderContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
     errorContainer: {
         flex: 1,
         justifyContent: 'center',
@@ -394,8 +520,7 @@ const styles = StyleSheet.create({
         color: COLORS.light,
         fontSize: 16,
         textAlign: 'center',
-        opacity: 0.8,
-        padding: 20,
+        marginTop: 16,
     },
     cameraControls: {
         position: 'absolute',
@@ -454,4 +579,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default CaptureImageWithoutEdit;
+export default CaptureImageWithoutEdit;