react-native-biometric-verifier 0.0.33 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-biometric-verifier",
-  "version": "0.0.33",
+  "version": "0.0.38",
   "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

@@ -24,7 +24,7 @@ const CaptureImageWithoutEdit = React.memo(
     showCodeScanner = false,
     isLoading = false,
     frameProcessorFps = 1,
-    livenessLevel = 0, // 0 = anti-spoof only, 1 = anti-spoof + blinking
+    livenessLevel = 0,
   }) => {
     const cameraRef = useRef(null);
     const [cameraDevice, setCameraDevice] = useState(null);
@@ -42,6 +42,7 @@ const CaptureImageWithoutEdit = React.memo(
     const [antiSpoofConfidence, setAntiSpoofConfidence] = useState(0);
     const [isFaceCentered, setIsFaceCentered] = useState(false);
     const [hasSingleFace, setHasSingleFace] = useState(false);
+    const [recognitionImageBase64, setRecognitionImageBase64] = useState(null);
 
     const captured = useRef(false);
     const isMounted = useRef(true);
@@ -60,6 +61,7 @@ const CaptureImageWithoutEdit = React.memo(
       setAntiSpoofConfidence(0);
       setIsFaceCentered(false);
       setHasSingleFace(false);
+      setRecognitionImageBase64(null);
     }, []);
 
     const codeScanner = useCodeScanner({
@@ -76,38 +78,13 @@ const CaptureImageWithoutEdit = React.memo(
     });
 
     const onStableFaceDetected = useCallback(
-      async (faceRect) => {
+      async (faceRect, Result) => {
         if (!isMounted.current) return;
         if (captured.current) return;
-
         captured.current = true;
         setFaces([faceRect]);
-
         try {
-          if (!cameraRef.current) {
-            throw new Error('Camera ref not available');
-          }
-
-          const photo = await cameraRef.current.takePhoto({
-            flash: 'off',
-            qualityPrioritization: 'quality',
-            enableShutterSound: false,
-            skipMetadata: true,
-          });
-
-          if (!photo || !photo.path) {
-            throw new Error('Failed to capture photo - no path returned');
-          }
-
-          const photopath = `file://${photo.path}`;
-          const fileName = photopath.substr(photopath.lastIndexOf('/') + 1);
-          const photoData = {
-            uri: photopath,
-            filename: fileName,
-            filetype: 'image/jpeg',
-          };
-
-          onCapture(photoData, faceRect);
+          onCapture(Result?.recognitionImageBase64);
         } catch (e) {
           console.error('Capture error:', e);
           captured.current = false;
@@ -130,6 +107,7 @@ const CaptureImageWithoutEdit = React.memo(
           setAntiSpoofConfidence(antiSpoofState.confidence || 0);
           setIsFaceCentered(antiSpoofState.isFaceCentered || false);
           setHasSingleFace(antiSpoofState.hasSingleFace || false);
+          setRecognitionImageBase64(antiSpoofState.recognitionImageBase64 || null);
         }
 
         if (count === 1) {
@@ -163,6 +141,11 @@ const CaptureImageWithoutEdit = React.memo(
     const onAntiSpoofUpdate = useCallback((result) => {
       if (!isMounted.current) return;
       try {
+        // Update recognition image when available
+        if (result?.recognitionImageBase64) {
+          setRecognitionImageBase64(result.recognitionImageBase64);
+        }
+
         // Animate live indicator when face becomes live
         if (result?.isLive && !isFaceLive) {
           Animated.spring(liveIndicatorAnim, {

package/src/hooks/useFaceDetectionFrameProcessor.js

@@ -109,6 +109,7 @@ export const useFaceDetectionFrameProcessor = ({
           lastResult: null,
           isLive: false,
           confidence: 0,
+          recognitionImageBase64: null, // Added to store base64 image
         },
         
         // Face centering
@@ -147,6 +148,7 @@ export const useFaceDetectionFrameProcessor = ({
       state.antiSpoof.lastResult = null;
       state.antiSpoof.isLive = false;
       state.antiSpoof.confidence = 0;
+      state.antiSpoof.recognitionImageBase64 = null; // Reset base64 image
       state.flags.hasSingleFace = false;
       state.centering.centeredFrames = 0;
       state.flags.isFaceCentered = false;
@@ -300,6 +302,7 @@ export const useFaceDetectionFrameProcessor = ({
             consecutiveLiveFrames: 0,
             isFaceCentered: false,
             hasSingleFace: false,
+            recognitionImageBase64: null,
           });
           return;
         }
@@ -314,6 +317,7 @@ export const useFaceDetectionFrameProcessor = ({
               consecutiveLiveFrames: 0,
               isFaceCentered: false,
               hasSingleFace: false,
+              recognitionImageBase64: null,
             });
             return;
           }
@@ -360,19 +364,28 @@ export const useFaceDetectionFrameProcessor = ({
           if (state.flags.isFaceCentered) {
             try {
               antiSpoofResult = faceAntiSpoofFrameProcessor?.(frame);
+              
               if (antiSpoofResult != null) {
                 state.antiSpoof.lastResult = antiSpoofResult;
 
                 const isLive = antiSpoofResult.isLive === true;
                 const confidence = antiSpoofResult.combinedScore || antiSpoofResult.neuralNetworkScore || 0;
+                const recognitionImageBase64 = antiSpoofResult.recognitionImageBase64 || null;
 
+                // Store the base64 image when face is live
                 if (isLive && confidence > ANTI_SPOOF_CONFIDENCE_THRESHOLD) {
                   state.antiSpoof.consecutiveLiveFrames = Math.min(
                     REQUIRED_CONSECUTIVE_LIVE_FRAMES,
                     state.antiSpoof.consecutiveLiveFrames + 1
                   );
+                  // Store the base64 image when we have a live face
+                  if (recognitionImageBase64) {
+                    state.antiSpoof.recognitionImageBase64 = recognitionImageBase64;
+                  }
                 } else {
                   state.antiSpoof.consecutiveLiveFrames = Math.max(0, state.antiSpoof.consecutiveLiveFrames - 1);
+                  // Clear base64 image if face is not live
+                  state.antiSpoof.recognitionImageBase64 = null;
                 }
                 state.antiSpoof.isLive = state.antiSpoof.consecutiveLiveFrames >= REQUIRED_CONSECUTIVE_LIVE_FRAMES;
                 state.antiSpoof.confidence = confidence;
@@ -385,16 +398,19 @@ export const useFaceDetectionFrameProcessor = ({
                     rawResult: antiSpoofResult,
                     consecutiveLiveFrames: state.antiSpoof.consecutiveLiveFrames,
                     isFaceCentered: state.flags.isFaceCentered,
+                    recognitionImageBase64: state.antiSpoof.recognitionImageBase64,
                   });
                 }
               }
             } catch (antiSpoofError) {
               // Silent error handling
+              console.log('Anti-spoof error:', antiSpoofError);
             }
           } else {
             // Reset anti-spoof if face not centered
             state.antiSpoof.consecutiveLiveFrames = 0;
             state.antiSpoof.isLive = false;
+            state.antiSpoof.recognitionImageBase64 = null;
           }
 
           // Liveness logic - optimized
@@ -461,6 +477,7 @@ export const useFaceDetectionFrameProcessor = ({
               consecutiveLiveFrames: state.antiSpoof.consecutiveLiveFrames,
               isFaceCentered: state.flags.isFaceCentered,
               hasSingleFace: true,
+              recognitionImageBase64: state.antiSpoof.recognitionImageBase64,
             });
           }
 
@@ -479,9 +496,13 @@ export const useFaceDetectionFrameProcessor = ({
 
           if (shouldCapture) {
             state.flags.captured = true;
+            // Include the base64 image in the stable face detection callback
             runOnStable(
               { x, y, width, height },
-              state.antiSpoof.lastResult
+              {
+                ...state.antiSpoof.lastResult,
+                recognitionImageBase64: state.antiSpoof.recognitionImageBase64
+              }
             );
           }
         } else {
@@ -492,6 +513,7 @@ export const useFaceDetectionFrameProcessor = ({
           state.flags.hasSingleFace = false;
           state.centering.centeredFrames = 0;
           state.flags.isFaceCentered = false;
+          state.antiSpoof.recognitionImageBase64 = null;
           
           runOnFaces(detected.length, 0, state.liveness.step, false, {
             isLive: false,
@@ -499,10 +521,12 @@ export const useFaceDetectionFrameProcessor = ({
             consecutiveLiveFrames: 0,
             isFaceCentered: false,
             hasSingleFace: false,
+            recognitionImageBase64: null,
           });
         }
       } catch (err) {
         // Error boundary - ensure frame is released
+        console.log('Frame processor error:', err);
       } finally {
         frame.release?.();
       }
@@ -527,6 +551,7 @@ export const useFaceDetectionFrameProcessor = ({
     state.antiSpoof.lastResult = null;
     state.antiSpoof.isLive = false;
     state.antiSpoof.confidence = 0;
+    state.antiSpoof.recognitionImageBase64 = null; // Reset base64 image
     state.flags.hasSingleFace = false;
     state.centering.centeredFrames = 0;
     state.flags.isFaceCentered = false;
@@ -561,6 +586,7 @@ export const useFaceDetectionFrameProcessor = ({
         lastResult: null,
         isLive: false,
         confidence: 0,
+        recognitionImageBase64: null, // Reset base64 image
       },
       centering: {
         centeredFrames: 0,
@@ -612,6 +638,7 @@ export const useFaceDetectionFrameProcessor = ({
       lastResult: sharedState.value.antiSpoof.lastResult,
       hasSingleFace: sharedState.value.flags.hasSingleFace,
       isFaceCentered: sharedState.value.flags.isFaceCentered,
+      recognitionImageBase64: sharedState.value.antiSpoof.recognitionImageBase64,
     },
   };
 };

package/src/index.js

@@ -216,7 +216,7 @@ const BiometricModal = React.memo(
 
     // Face scan upload
     const uploadFaceScan = useCallback(
-      async (selfie) => {
+      async (base64) => {
         if (!validateApiUrl()) return;
         const currentData = dataRef.current;
 
@@ -231,81 +231,66 @@ const BiometricModal = React.memo(
           animationState: Global.AnimationStates.processing,
         });
 
-        InteractionManager.runAfterInteractions(async () => {
-          let base64;
-
-          try {
-            updateState({
-              loadingType: Global.LoadingTypes.imageProcessing,
-            });
-
-            base64 = await convertImageToBase64(selfie?.uri);
-          } catch (err) {
-            console.error("Image conversion failed:", err);
-            handleProcessError("Image conversion failed.", err);
-            return;
-          }
+        if (!base64) {
+          handleProcessError("Failed to process image.");
+          return;
+        }
 
-          if (!base64) {
-            handleProcessError("Failed to process image.");
-            return;
-          }
+        try {
+          const body = { image: base64 };
+          const header = { faceid: currentData };
+          const buttonapi = `${apiurl}python/recognize`;
 
-          try {
-            const body = { image: base64 };
-            const header = { faceid: currentData };
-            const buttonapi = `${apiurl}python/recognize`;
+          updateState({
+            loadingType: Global.LoadingTypes.networkRequest,
+          });
+          console.log("API URL:", buttonapi);
+          console.log("Sending request to API...", JSON.stringify(body));
+          const response = await networkServiceCall(
+            "POST",
+            buttonapi,
+            header,
+            body
+          );
+          console.log("API Response:", JSON.stringify(response));
+          if (response?.httpstatus === 200 && response?.data?.data) {
+            responseRef.current = response;
 
             updateState({
-              loadingType: Global.LoadingTypes.networkRequest,
+              employeeData: response.data?.data || null,
+              animationState: Global.AnimationStates.success,
+              isLoading: false,
+              loadingType: Global.LoadingTypes.none,
             });
 
-            const response = await networkServiceCall(
-              "POST",
-              buttonapi,
-              header,
-              body
-            );
-
-            if (response?.httpstatus === 200) {
-              responseRef.current = response;
-
-              updateState({
-                employeeData: response.data?.data || null,
-                animationState: Global.AnimationStates.success,
-                isLoading: false,
-                loadingType: Global.LoadingTypes.none,
-              });
+            notifyMessage("Identity verified successfully!", "success");
 
-              notifyMessage("Identity verified successfully!", "success");
-
-              if (qrscan) {
-                setTimeout(() => startQRCodeScan(), 1200);
-              } else {
-                safeCallback(responseRef.current);
-
-                if (resetTimeoutRef.current) {
-                  clearTimeout(resetTimeoutRef.current);
-                }
+            if (qrscan) {
+              setTimeout(() => startQRCodeScan(), 1200);
+            } else {
+              safeCallback(responseRef.current);
 
-                resetTimeoutRef.current = setTimeout(() => {
-                  resetState();
-                }, 1200);
+              if (resetTimeoutRef.current) {
+                clearTimeout(resetTimeoutRef.current);
               }
-            } else {
-              handleProcessError(
-                response?.data?.message ||
-                "Face not recognized. Please try again."
-              );
+
+              resetTimeoutRef.current = setTimeout(() => {
+                resetState();
+              }, 1200);
             }
-          } catch (error) {
-            console.error("Network request failed:", error);
+          } else {
             handleProcessError(
-              "Connection error. Please check your network.",
-              error
+              response?.data?.message ||
+              "Face not recognized. Please try again."
             );
           }
-        });
+        } catch (error) {
+          console.error("Network request failed:", error);
+          handleProcessError(
+            "Connection error. Please check your network.",
+            error
+          );
+        }
       },
       [
         convertImageToBase64,