@hexar/biometric-identity-sdk-react-native 1.0.5 → 1.0.7

package/dist/components/BiometricIdentityFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BiometricIdentityFlow.d.ts","sourceRoot":"","sources":["../../src/components/BiometricIdentityFlow.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAOL,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,cAAc,EAId,iBAAiB,EAClB,MAAM,oCAAoC,CAAC;AAU5C,MAAM,WAAW,0BAA0B;IACzC,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,OAAO,CAAC,EAAE,SAAS,CAAC;KACrB,CAAC;CACH;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAwStE,CAAC;AAiOF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"BiometricIdentityFlow.d.ts","sourceRoot":"","sources":["../../src/components/BiometricIdentityFlow.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAOL,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,cAAc,EAId,iBAAiB,EAClB,MAAM,oCAAoC,CAAC;AAU5C,MAAM,WAAW,0BAA0B;IACzC,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,OAAO,CAAC,EAAE,SAAS,CAAC;KACrB,CAAC;CACH;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA6StE,CAAC;AAiOF,eAAe,qBAAqB,CAAC"}

package/dist/components/BiometricIdentityFlow.js

@@ -56,11 +56,16 @@ const BiometricIdentityFlow = ({ onValidationComplete, onError, theme, language,
     const [currentChallenges, setCurrentChallenges] = (0, react_1.useState)([]);
     const [isLoadingChallenges, setIsLoadingChallenges] = (0, react_1.useState)(false);
     // Set language early, before any components render
+    // Priority: language prop > SDK config language > default 'en'
     // Run on mount and whenever language prop changes
     (0, react_1.useEffect)(() => {
         if (language) {
+            // If language prop is provided, override the config
             (0, biometric_identity_sdk_core_1.setLanguage)(language);
         }
+        // If no language prop, the language should already be set by BiometricIdentitySDK.configure()
+        // The global language state is set when configure() is called, so getStrings() will
+        // automatically return strings for the configured language (or 'en' as default)
     }, [language]);
     const strings = (0, biometric_identity_sdk_core_1.getStrings)();
     const styles = createStyles(theme);

package/dist/components/VideoRecorder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoRecorder.d.ts","sourceRoot":"","sources":["../../src/components/VideoRecorder.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAaxE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAGtF,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;IAC/B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wCAAwC;IACxC,UAAU,EAAE,CAAC,SAAS,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtD,iCAAiC;IACjC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgDD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2kBtD,CAAC;AA4OF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"VideoRecorder.d.ts","sourceRoot":"","sources":["../../src/components/VideoRecorder.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAaxE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAGtF,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;IAC/B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wCAAwC;IACxC,UAAU,EAAE,CAAC,SAAS,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtD,iCAAiC;IACjC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgDD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmpBtD,CAAC;AA4OF,eAAe,aAAa,CAAC"}

package/dist/components/VideoRecorder.js

@@ -107,12 +107,13 @@ const VideoRecorder = ({ theme, duration, instructions, challenges: propChalleng
     const pulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     const arrowAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const progressAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    // Refs
     const recordingStartTime = (0, react_1.useRef)(0);
     const frameInterval = (0, react_1.useRef)(null);
     const frameCaptureInterval = (0, react_1.useRef)(null);
-    // Calculate total duration from challenges
-    const totalDuration = duration || challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000;
+    const videoRecordingRef = (0, react_1.useRef)(null);
+    const isRecordingRef = (0, react_1.useRef)(false);
+    const minDurationMs = 8000;
+    const totalDuration = duration || Math.max(minDurationMs, challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000);
     // Check camera permissions
     (0, react_1.useEffect)(() => {
         const checkPermissions = async () => {
@@ -254,124 +255,180 @@ const VideoRecorder = ({ theme, duration, instructions, challenges: propChalleng
             }),
         ])).start();
     }, [arrowAnim]);
-    // Start recording
-    const startRecording = (0, react_1.useCallback)(async () => {
-        setPhase('recording');
-        recordingStartTime.current = Date.now();
-        // Start capturing frames from camera
+    const resetAndRetry = (0, react_1.useCallback)(() => {
+        setFrames([]);
+        setCompletedChallenges([]);
+        setCurrentChallengeIndex(0);
+        setChallengeProgress(0);
+        setOverallProgress(0);
+        recordingStartTime.current = 0;
+        setPhase('countdown');
+        setCountdown(3);
+    }, []);
+    const handleRecordingError = (0, react_1.useCallback)((error) => {
+        setPhase('loading');
+        react_native_1.Alert.alert('Recording Error', 'Failed to record video. Please try again.', [{ text: 'OK', onPress: onCancel }]);
+    }, [onCancel]);
+    const handleVideoComplete = (0, react_1.useCallback)(async (video) => {
+        const actualDuration = Date.now() - recordingStartTime.current;
+        if (actualDuration < minDurationMs) {
+            react_native_1.Alert.alert('Recording Too Short', `Video must be at least ${minDurationMs / 1000} seconds. Please try again.`, [{ text: 'OK', onPress: resetAndRetry }]);
+            return;
+        }
+        try {
+            const RNFS = require('react-native-fs');
+            const videoBase64 = await RNFS.readFile(video.path, 'base64');
+            const result = {
+                frames: frames.length > 0 ? frames : [videoBase64],
+                duration: actualDuration,
+                instructionsFollowed: completedChallenges.length === challenges.length,
+                qualityScore: frames.length > 0 ? Math.min(100, (frames.length / 30) * 100) : 85,
+                challengesCompleted: completedChallenges,
+                sessionId,
+            };
+            onComplete(result);
+        }
+        catch (error) {
+            console.error('Error processing video:', error);
+            handleRecordingError(error);
+        }
+    }, [frames, completedChallenges, challenges, sessionId, onComplete, resetAndRetry, handleRecordingError]);
+    const startFrameCapture = (0, react_1.useCallback)(() => {
         if (cameraRef.current && device) {
-            // Capture frames periodically (every 100ms = ~10 FPS)
             frameCaptureInterval.current = setInterval(async () => {
                 try {
-                    // Take a photo frame (react-native-vision-camera doesn't have direct frame access in v4)
-                    // We'll use takeSnapshot or capture frames via photo
                     const photo = await cameraRef.current?.takePhoto({
                         flash: 'off',
                     });
                     if (photo) {
-                        // Convert to base64 if possible, otherwise use file path
                         try {
                             const RNFS = require('react-native-fs');
                             const base64 = await RNFS.readFile(photo.path, 'base64');
-                            setFrames(prev => [...prev, base64]);
+                            setFrames(prev => {
+                                if (prev.length < 100) {
+                                    return [...prev, base64];
+                                }
+                                return prev;
+                            });
                         }
                         catch (fsError) {
-                            // Fallback: use file path
-                            setFrames(prev => [...prev, photo.path]);
+                            setFrames(prev => {
+                                if (prev.length < 100) {
+                                    return [...prev, photo.path];
+                                }
+                                return prev;
+                            });
                         }
                     }
                 }
                 catch (error) {
                     console.warn('Frame capture error:', error);
-                    // Continue even if one frame fails
                 }
             }, 100);
         }
-        else {
-            // Fallback: simulate frames if camera not available
-            frameInterval.current = setInterval(() => {
-                setFrames(prev => [...prev, `frame_${Date.now()}`]);
-            }, 100);
-        }
-        // Start first challenge
-        runChallenge(0);
     }, [device]);
-    // Run a specific challenge
+    const stopRecording = (0, react_1.useCallback)(async () => {
+        if (videoRecordingRef.current) {
+            try {
+                await videoRecordingRef.current.stop();
+            }
+            catch (error) {
+                console.error('Error stopping video recording:', error);
+            }
+            videoRecordingRef.current = null;
+        }
+        if (frameCaptureInterval.current) {
+            clearInterval(frameCaptureInterval.current);
+            frameCaptureInterval.current = null;
+        }
+        isRecordingRef.current = false;
+    }, []);
     const runChallenge = (0, react_1.useCallback)((index) => {
         if (index >= challenges.length) {
-            completeRecording();
+            if (isRecordingRef.current) {
+                const elapsed = Date.now() - recordingStartTime.current;
+                if (elapsed < minDurationMs) {
+                    setTimeout(() => {
+                        if (isRecordingRef.current) {
+                            stopRecording();
+                        }
+                    }, minDurationMs - elapsed);
+                    return;
+                }
+                stopRecording();
+            }
             return;
         }
         const challenge = challenges[index];
         setCurrentChallengeIndex(index);
         setChallengeProgress(0);
-        // Fade in instruction
         react_native_1.Animated.timing(fadeAnim, {
             toValue: 1,
             duration: 300,
             useNativeDriver: true,
         }).start();
-        // Animate arrow for directional challenges
         if (challenge.action.includes('left') || challenge.action.includes('right')) {
             animateArrow(challenge.action);
         }
-        // Progress animation for this challenge
         react_native_1.Animated.timing(progressAnim, {
             toValue: 100,
             duration: challenge.duration_ms,
             useNativeDriver: false,
         }).start();
-        // Update progress in real-time
         const progressInterval = setInterval(() => {
             setChallengeProgress(prev => {
                 const newProgress = prev + (100 / (challenge.duration_ms / 100));
                 return Math.min(100, newProgress);
             });
-            // Update overall progress
             const elapsed = Date.now() - recordingStartTime.current;
-            const totalTime = challenges.reduce((sum, c) => sum + c.duration_ms, 0);
+            const totalTime = Math.max(totalDuration, challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000);
             setOverallProgress(Math.min(100, (elapsed / totalTime) * 100));
         }, 100);
-        // Move to next challenge after duration
         setTimeout(() => {
             clearInterval(progressInterval);
-            // Mark challenge as completed
             setCompletedChallenges(prev => [...prev, challenge.action]);
-            // Fade out current instruction
             react_native_1.Animated.timing(fadeAnim, {
                 toValue: 0,
                 duration: 200,
                 useNativeDriver: true,
             }).start(() => {
-                // Reset and start next challenge
                 progressAnim.setValue(0);
                 runChallenge(index + 1);
             });
         }, challenge.duration_ms);
-    }, [challenges, fadeAnim, progressAnim, animateArrow]);
-    // Complete recording
-    const completeRecording = (0, react_1.useCallback)(() => {
-        if (frameInterval.current) {
-            clearInterval(frameInterval.current);
+    }, [challenges, fadeAnim, progressAnim, animateArrow, totalDuration, minDurationMs, stopRecording]);
+    const startRecording = (0, react_1.useCallback)(async () => {
+        setPhase('recording');
+        recordingStartTime.current = Date.now();
+        isRecordingRef.current = true;
+        if (cameraRef.current && device) {
+            try {
+                videoRecordingRef.current = await cameraRef.current.startRecording({
+                    flash: 'off',
+                    onRecordingFinished: (video) => {
+                        handleVideoComplete(video);
+                    },
+                    onRecordingError: (error) => {
+                        console.error('Recording error:', error);
+                        handleRecordingError(error);
+                    },
+                });
+            }
+            catch (error) {
+                console.warn('Video recording not available, falling back to frame capture:', error);
+                startFrameCapture();
+            }
         }
-        if (frameCaptureInterval.current) {
-            clearInterval(frameCaptureInterval.current);
+        else {
+            startFrameCapture();
         }
-        setPhase('processing');
-        setOverallProgress(100);
-        // Process and return result
+        runChallenge(0);
         setTimeout(() => {
-            const result = {
-                frames,
-                duration: Date.now() - recordingStartTime.current,
-                instructionsFollowed: completedChallenges.length === challenges.length,
-                qualityScore: frames.length > 0 ? 85 + Math.random() * 10 : 0, // Quality based on frames captured
-                challengesCompleted: completedChallenges,
-                sessionId,
-            };
-            onComplete(result);
-        }, 500);
-    }, [frames, completedChallenges, challenges, sessionId, onComplete]);
+            if (isRecordingRef.current) {
+                stopRecording();
+            }
+        }, totalDuration);
+    }, [device, totalDuration, handleVideoComplete, handleRecordingError, runChallenge, stopRecording, startFrameCapture]);
     // Current challenge
     const currentChallenge = challenges[currentChallengeIndex];
     // Get direction arrow for the current challenge
@@ -421,7 +478,7 @@ const VideoRecorder = ({ theme, duration, instructions, challenges: propChalleng
     }
     return (react_1.default.createElement(react_native_1.View, { style: styles.container },
         react_1.default.createElement(react_native_1.View, { style: styles.cameraContainer },
-            react_1.default.createElement(react_native_vision_camera_1.Camera, { ref: cameraRef, style: react_native_1.StyleSheet.absoluteFill, device: device, isActive: phase === 'recording' || phase === 'countdown', video: false, photo: true }),
+            react_1.default.createElement(react_native_vision_camera_1.Camera, { ref: cameraRef, style: react_native_1.StyleSheet.absoluteFill, device: device, isActive: phase === 'recording' || phase === 'countdown', video: true, audio: false }),
             react_1.default.createElement(react_native_1.View, { style: styles.overlay },
                 react_1.default.createElement(react_native_1.View, { style: [
                         styles.faceOval,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexar/biometric-identity-sdk-react-native",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "React Native wrapper for Biometric Identity SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,14 +11,13 @@
     "clean": "rm -rf dist"
   },
   "peerDependencies": {
+    "@hexar/biometric-identity-sdk-core": ">=1.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.70.0",
     "react-native-permissions": ">=4.0.0",
     "react-native-vision-camera": ">=4.0.0"
   },
-  "dependencies": {
-    "@hexar/biometric-identity-sdk-core": "file:../core"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@types/react": "^19.0.0",
     "@types/react-native": "^0.73.0",

package/src/components/BiometricIdentityFlow.tsx

@@ -74,11 +74,16 @@ export const BiometricIdentityFlow: React.FC<BiometricIdentityFlowProps> = ({
   const [isLoadingChallenges, setIsLoadingChallenges] = useState(false);
 
   // Set language early, before any components render
+  // Priority: language prop > SDK config language > default 'en'
   // Run on mount and whenever language prop changes
   useEffect(() => {
     if (language) {
+      // If language prop is provided, override the config
       setLanguage(language);
     }
+    // If no language prop, the language should already be set by BiometricIdentitySDK.configure()
+    // The global language state is set when configure() is called, so getStrings() will
+    // automatically return strings for the configured language (or 'en' as default)
   }, [language]);
 
   const strings = getStrings();

package/src/components/VideoRecorder.tsx

@@ -14,7 +14,7 @@ import {
   Platform,
   Alert,
 } from 'react-native';
-import { Camera, useCameraDevice, useCameraPermission, useFrameProcessor } from 'react-native-vision-camera';
+import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
 import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';
 import { ThemeConfig, LivenessInstruction } from '@hexar/biometric-identity-sdk-core';
 
@@ -136,13 +136,16 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
   const arrowAnim = useRef(new Animated.Value(0)).current;
   const progressAnim = useRef(new Animated.Value(0)).current;
   
-  // Refs
   const recordingStartTime = useRef<number>(0);
   const frameInterval = useRef<NodeJS.Timeout | null>(null);
   const frameCaptureInterval = useRef<NodeJS.Timeout | null>(null);
-
-  // Calculate total duration from challenges
-  const totalDuration = duration || challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000;
+  const videoRecordingRef = useRef<any>(null);
+  const isRecordingRef = useRef<boolean>(false);
+  const minDurationMs = 8000;
+  const totalDuration = duration || Math.max(
+    minDurationMs,
+    challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000
+  );
 
   // Check camera permissions
   useEffect(() => {
@@ -298,53 +301,124 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
     ).start();
   }, [arrowAnim]);
 
-  // Start recording
-  const startRecording = useCallback(async () => {
-    setPhase('recording');
-    recordingStartTime.current = Date.now();
+  const resetAndRetry = useCallback(() => {
+    setFrames([]);
+    setCompletedChallenges([]);
+    setCurrentChallengeIndex(0);
+    setChallengeProgress(0);
+    setOverallProgress(0);
+    recordingStartTime.current = 0;
+    setPhase('countdown');
+    setCountdown(3);
+  }, []);
+
+  const handleRecordingError = useCallback((error: any) => {
+    setPhase('loading');
+    Alert.alert(
+      'Recording Error',
+      'Failed to record video. Please try again.',
+      [{ text: 'OK', onPress: onCancel }]
+    );
+  }, [onCancel]);
+
+  const handleVideoComplete = useCallback(async (video: any) => {
+    const actualDuration = Date.now() - recordingStartTime.current;
     
-    // Start capturing frames from camera
+    if (actualDuration < minDurationMs) {
+      Alert.alert(
+        'Recording Too Short',
+        `Video must be at least ${minDurationMs / 1000} seconds. Please try again.`,
+        [{ text: 'OK', onPress: resetAndRetry }]
+      );
+      return;
+    }
+
+    try {
+      const RNFS = require('react-native-fs');
+      const videoBase64 = await RNFS.readFile(video.path, 'base64');
+      
+      const result: VideoRecordingResult = {
+        frames: frames.length > 0 ? frames : [videoBase64],
+        duration: actualDuration,
+        instructionsFollowed: completedChallenges.length === challenges.length,
+        qualityScore: frames.length > 0 ? Math.min(100, (frames.length / 30) * 100) : 85,
+        challengesCompleted: completedChallenges,
+        sessionId,
+      };
+
+      onComplete(result);
+    } catch (error) {
+      console.error('Error processing video:', error);
+      handleRecordingError(error);
+    }
+  }, [frames, completedChallenges, challenges, sessionId, onComplete, resetAndRetry, handleRecordingError]);
+
+  const startFrameCapture = useCallback(() => {
     if (cameraRef.current && device) {
-      // Capture frames periodically (every 100ms = ~10 FPS)
       frameCaptureInterval.current = setInterval(async () => {
         try {
-          // Take a photo frame (react-native-vision-camera doesn't have direct frame access in v4)
-          // We'll use takeSnapshot or capture frames via photo
           const photo = await cameraRef.current?.takePhoto({
             flash: 'off',
           });
           
           if (photo) {
-            // Convert to base64 if possible, otherwise use file path
             try {
               const RNFS = require('react-native-fs');
               const base64 = await RNFS.readFile(photo.path, 'base64');
-              setFrames(prev => [...prev, base64]);
+              setFrames(prev => {
+                if (prev.length < 100) {
+                  return [...prev, base64];
+                }
+                return prev;
+              });
             } catch (fsError) {
-              // Fallback: use file path
-              setFrames(prev => [...prev, photo.path]);
+              setFrames(prev => {
+                if (prev.length < 100) {
+                  return [...prev, photo.path];
+                }
+                return prev;
+              });
             }
           }
         } catch (error) {
           console.warn('Frame capture error:', error);
-          // Continue even if one frame fails
         }
       }, 100);
-    } else {
-      // Fallback: simulate frames if camera not available
-      frameInterval.current = setInterval(() => {
-        setFrames(prev => [...prev, `frame_${Date.now()}`]);
-      }, 100);
     }
-
-    // Start first challenge
-    runChallenge(0);
   }, [device]);
 
-  // Run a specific challenge
+  const stopRecording = useCallback(async () => {
+    if (videoRecordingRef.current) {
+      try {
+        await videoRecordingRef.current.stop();
+      } catch (error) {
+        console.error('Error stopping video recording:', error);
+      }
+      videoRecordingRef.current = null;
+    }
+    
+    if (frameCaptureInterval.current) {
+      clearInterval(frameCaptureInterval.current);
+      frameCaptureInterval.current = null;
+    }
+    
+    isRecordingRef.current = false;
+  }, []);
+
   const runChallenge = useCallback((index: number) => {
     if (index >= challenges.length) {
-      completeRecording();
+      if (isRecordingRef.current) {
+        const elapsed = Date.now() - recordingStartTime.current;
+        if (elapsed < minDurationMs) {
+          setTimeout(() => {
+            if (isRecordingRef.current) {
+              stopRecording();
+            }
+          }, minDurationMs - elapsed);
+          return;
+        }
+        stopRecording();
+      }
       return;
     }
 
@@ -352,84 +426,82 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
     setCurrentChallengeIndex(index);
     setChallengeProgress(0);
 
-    // Fade in instruction
     Animated.timing(fadeAnim, {
       toValue: 1,
       duration: 300,
       useNativeDriver: true,
     }).start();
 
-    // Animate arrow for directional challenges
     if (challenge.action.includes('left') || challenge.action.includes('right')) {
       animateArrow(challenge.action);
     }
 
-    // Progress animation for this challenge
     Animated.timing(progressAnim, {
       toValue: 100,
       duration: challenge.duration_ms,
       useNativeDriver: false,
     }).start();
 
-    // Update progress in real-time
     const progressInterval = setInterval(() => {
       setChallengeProgress(prev => {
         const newProgress = prev + (100 / (challenge.duration_ms / 100));
         return Math.min(100, newProgress);
       });
 
-      // Update overall progress
       const elapsed = Date.now() - recordingStartTime.current;
-      const totalTime = challenges.reduce((sum, c) => sum + c.duration_ms, 0);
+      const totalTime = Math.max(totalDuration, challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000);
       setOverallProgress(Math.min(100, (elapsed / totalTime) * 100));
     }, 100);
 
-    // Move to next challenge after duration
     setTimeout(() => {
       clearInterval(progressInterval);
       
-      // Mark challenge as completed
       setCompletedChallenges(prev => [...prev, challenge.action]);
       
-      // Fade out current instruction
       Animated.timing(fadeAnim, {
         toValue: 0,
         duration: 200,
         useNativeDriver: true,
       }).start(() => {
-        // Reset and start next challenge
         progressAnim.setValue(0);
         runChallenge(index + 1);
       });
     }, challenge.duration_ms);
-  }, [challenges, fadeAnim, progressAnim, animateArrow]);
+  }, [challenges, fadeAnim, progressAnim, animateArrow, totalDuration, minDurationMs, stopRecording]);
 
-  // Complete recording
-  const completeRecording = useCallback(() => {
-    if (frameInterval.current) {
-      clearInterval(frameInterval.current);
-    }
-    if (frameCaptureInterval.current) {
-      clearInterval(frameCaptureInterval.current);
+  const startRecording = useCallback(async () => {
+    setPhase('recording');
+    recordingStartTime.current = Date.now();
+    isRecordingRef.current = true;
+    
+    if (cameraRef.current && device) {
+      try {
+        videoRecordingRef.current = await cameraRef.current.startRecording({
+          flash: 'off',
+          onRecordingFinished: (video: any) => {
+            handleVideoComplete(video);
+          },
+          onRecordingError: (error: any) => {
+            console.error('Recording error:', error);
+            handleRecordingError(error);
+          },
+        });
+      } catch (error) {
+        console.warn('Video recording not available, falling back to frame capture:', error);
+        startFrameCapture();
+      }
+    } else {
+      startFrameCapture();
     }
 
-    setPhase('processing');
-    setOverallProgress(100);
-
-    // Process and return result
+    runChallenge(0);
+    
     setTimeout(() => {
-      const result: VideoRecordingResult = {
-        frames,
-        duration: Date.now() - recordingStartTime.current,
-        instructionsFollowed: completedChallenges.length === challenges.length,
-        qualityScore: frames.length > 0 ? 85 + Math.random() * 10 : 0, // Quality based on frames captured
-        challengesCompleted: completedChallenges,
-        sessionId,
-      };
-
-      onComplete(result);
-    }, 500);
-  }, [frames, completedChallenges, challenges, sessionId, onComplete]);
+      if (isRecordingRef.current) {
+        stopRecording();
+      }
+    }, totalDuration);
+  }, [device, totalDuration, handleVideoComplete, handleRecordingError, runChallenge, stopRecording, startFrameCapture]);
 
   // Current challenge
   const currentChallenge = challenges[currentChallengeIndex];
@@ -532,8 +604,8 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
           style={StyleSheet.absoluteFill}
           device={device}
           isActive={phase === 'recording' || phase === 'countdown'}
-          video={false}
-          photo={true}
+          video={true}
+          audio={false}
         />
 
         {/* Face Oval Overlay */}