astra-sdk-web 1.1.7 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astra-sdk-web",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "Official Astra SDK for JavaScript/TypeScript",
   "type": "module",
   "main": "./dist/astra-sdk.cjs.js",

package/src/features/faceScan/hooks/useFaceScan.ts

@@ -49,6 +49,9 @@ export function useFaceScan(
     lastResultsAt: 0,
     stage: 'CENTER' as LivenessStage,
     livenessReady: false,
+    currentYaw: null as number | null,
+    currentAbsYaw: null as number | null,
+    livenessCompleted: false,
   });
 
   // Sync refs with state
@@ -74,6 +77,27 @@ export function useFaceScan(
 
   const handleFaceCapture = useCallback(async () => {
     if (!videoRef.current) return;
+    
+    // Check if face is straight before capturing
+    const centerThreshold = 0.05;
+    const currentAbsYaw = livenessStateRef.current.currentAbsYaw;
+    
+    if (currentAbsYaw === null || currentAbsYaw === undefined) {
+      setState(prev => ({
+        ...prev,
+        livenessInstruction: "Please position your face in front of the camera",
+      }));
+      return;
+    }
+    
+    if (currentAbsYaw >= centerThreshold) {
+      setState(prev => ({
+        ...prev,
+        livenessInstruction: "Please look straight at the camera before capturing",
+      }));
+      return;
+    }
+    
     setState(prev => ({ ...prev, loading: true }));
     try {
       const video = videoRef.current;

package/src/pages/FaceScanModal.tsx

@@ -28,7 +28,6 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
       try {
         await apiService.uploadFaceScan(blob);
       } catch (error: any) {
-        // Check if it's a "Face already registered" error
         const errorMessage = error?.message || '';
         const errorData = (error as any)?.errorData || {};
         
@@ -39,13 +38,11 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
           (error as any)?.statusCode === 500 && errorMessage.includes('Face')
         ) {
           setToast({
-            message: 'Face has already been registered for this session. Proceeding to document upload.',
+            message: 'Face already registered',
             type: 'warning',
           });
-          // Don't throw error - allow flow to continue to document upload
           return;
         }
-        // Re-throw other errors
         throw error;
       }
     },
@@ -56,7 +53,6 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
     },
   });
   
-  // Check session status on mount
   useEffect(() => {
     const checkSession = async () => {
       if (!apiService) return;
@@ -67,7 +63,6 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
       } catch (error: any) {
         const message = error.message || 'Session expired or inactive';
         setSessionError(message);
-        // Redirect to QR page after showing error
         setTimeout(() => {
           navigate('/qr', { replace: true });
         }, 2000);
@@ -77,15 +72,12 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
     checkSession();
   }, [apiService, navigate]);
 
-  // Sync camera ready state
   useEffect(() => {
     setState(prev => ({ ...prev, cameraReady }));
   }, [cameraReady, setState]);
 
-  // Log session info and call status API when camera opens
   useEffect(() => {
     if (cameraReady && apiService) {
-      // Get config from apiService to log session info
       const config = apiService.getConfig();
       if (config) {
         console.log('=== Camera Opened ===');
@@ -94,7 +86,6 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
         console.log('API Base URL:', config.apiBaseUrl);
         console.log('Device Type:', config.deviceType || 'auto-detected');
         
-        // Call status API
         apiService.getSessionStatus()
           .then((statusResponse) => {
             console.log('=== Session Status API Response ===');
@@ -152,8 +143,7 @@ function FaceScanModal({ onComplete }: FaceScanModalProps) {
       />
     );
   }
-
-  // Show session error if present
+  
   if (sessionError) {
     return (
       <div className="fixed inset-0 bg-black p-5 z-[1000] flex items-center justify-center font-sans overflow-y-auto custom__scrollbar">

package/src/services/faceMeshService.ts

@@ -19,6 +19,9 @@ export interface LivenessState {
   lastResultsAt: number;
   stage: LivenessStage;
   livenessReady: boolean;
+  currentYaw: number | null;
+  currentAbsYaw: number | null;
+  livenessCompleted: boolean;
 }
 
 export class FaceMeshService {
@@ -111,6 +114,10 @@ export class FaceMeshService {
 
       this.processLiveness(faceOnCanvas, w, h);
     } else {
+      // Reset face orientation when no face is detected
+      this.livenessStateRef.current.currentYaw = null;
+      this.livenessStateRef.current.currentAbsYaw = null;
+      
       const vid = this.videoRef.current as HTMLVideoElement | null;
       if (vid) {
         const vidW = Math.max(1, vid?.videoWidth || displayW);
@@ -160,6 +167,10 @@ export class FaceMeshService {
       const yaw = (nT.x - midX) / Math.max(1e-6, faceWidth);
       const absYaw = Math.abs(yaw);
       
+      // Store current face orientation for capture validation
+      this.livenessStateRef.current.currentYaw = yaw;
+      this.livenessStateRef.current.currentAbsYaw = absYaw;
+      
       const xs = faceOnCanvas.map(p => p.x), ys = faceOnCanvas.map(p => p.y);
       const minX = Math.min(...xs) * w, maxX = Math.max(...xs) * w;
       const minY = Math.min(...ys) * h, maxY = Math.max(...ys) * h;
@@ -192,11 +203,14 @@ export class FaceMeshService {
         } else if (absYaw < centerThreshold) {
           state.centerHold += 1;
           if (state.centerHold >= holdFramesCenter) {
-            const newStage: LivenessStage = "LEFT";
-            state.stage = newStage;
-            state.centerHold = 0;
-            if (this.callbacks.onLivenessUpdate) {
-              this.callbacks.onLivenessUpdate(newStage, "Turn your face LEFT");
+            // Only transition to LEFT if liveness check hasn't been completed yet
+            if (!state.livenessCompleted) {
+              const newStage: LivenessStage = "LEFT";
+              state.stage = newStage;
+              state.centerHold = 0;
+              if (this.callbacks.onLivenessUpdate) {
+                this.callbacks.onLivenessUpdate(newStage, "Turn your face LEFT");
+              }
             }
           }
         } else {
@@ -235,16 +249,13 @@ export class FaceMeshService {
           state.rightHold += 1;
           if (state.rightHold >= holdFramesTurn) {
             state.rightHold = 0;
-            if (!state.snapTriggered) {
-              state.snapTriggered = true;
-              const newStage: LivenessStage = "DONE";
-              state.stage = newStage;
-              if (this.callbacks.onLivenessUpdate) {
-                this.callbacks.onLivenessUpdate(newStage, "Capturing...");
-              }
-              if (this.callbacks.onCaptureTrigger) {
-                this.callbacks.onCaptureTrigger();
-              }
+            // Mark liveness as completed and transition to DONE stage
+            state.livenessCompleted = true;
+            const newStage: LivenessStage = "DONE";
+            state.stage = newStage;
+            state.centerHold = 0;
+            if (this.callbacks.onLivenessUpdate) {
+              this.callbacks.onLivenessUpdate(newStage, "Great! Now look straight at the camera");
             }
           }
         } else {
@@ -253,6 +264,29 @@ export class FaceMeshService {
             this.callbacks.onLivenessUpdate(state.stage, yaw < -leftThreshold ? "You're facing left. Turn RIGHT" : "Turn a bit more RIGHT");
           }
         }
+      } else if (state.stage === "DONE") {
+        // In DONE stage, wait for face to be straight before capturing
+        if (absYaw < centerThreshold && insideGuide) {
+          state.centerHold += 1;
+          if (state.centerHold >= holdFramesCenter && !state.snapTriggered) {
+            state.snapTriggered = true;
+            if (this.callbacks.onLivenessUpdate) {
+              this.callbacks.onLivenessUpdate(state.stage, "Capturing...");
+            }
+            if (this.callbacks.onCaptureTrigger) {
+              this.callbacks.onCaptureTrigger();
+            }
+          }
+        } else {
+          state.centerHold = 0;
+          if (this.callbacks.onLivenessUpdate) {
+            if (!insideGuide) {
+              this.callbacks.onLivenessUpdate(state.stage, "Center your face inside the circle");
+            } else {
+              this.callbacks.onLivenessUpdate(state.stage, "Please look straight at the camera");
+            }
+          }
+        }
       }
     }
   }