@hexar/biometric-identity-sdk-react-native 1.0.0

package/src/components/VideoRecorder.tsx

@@ -0,0 +1,794 @@
+/**
+ * Smart Video Recorder Component for Liveness Detection
+ * Features challenge-response flow with guided head movements
+ */
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Animated,
+  Easing,
+} from 'react-native';
+import { ThemeConfig, LivenessInstruction } from '@hexar/biometric-identity-sdk-core';
+
+// Challenge action configuration (matches backend response)
+export interface ChallengeAction {
+  action: string;
+  instruction: string;
+  duration_ms: number;
+  order: number;
+  icon?: string;
+}
+
+export interface VideoRecorderProps {
+  theme?: ThemeConfig;
+  /** Total recording duration in ms (default: 8000ms for smart mode) */
+  duration?: number;
+  /** Instructions for user to follow */
+  instructions?: LivenessInstruction[];
+  /** Pre-fetched challenges from backend */
+  challenges?: ChallengeAction[];
+  /** Session ID from backend challenge */
+  sessionId?: string;
+  /** Enable smart challenge mode (default: true) */
+  smartMode?: boolean;
+  /** Callback when recording completes */
+  onComplete: (videoData: VideoRecordingResult) => void;
+  /** Callback when user cancels */
+  onCancel: () => void;
+  /** Callback to fetch challenges from backend */
+  onFetchChallenges?: () => Promise<ChallengeAction[]>;
+}
+
+export interface VideoRecordingResult {
+  frames: string[];
+  duration: number;
+  instructionsFollowed: boolean;
+  qualityScore: number;
+  challengesCompleted: string[];
+  sessionId?: string;
+}
+
+// Default challenge set (used if backend not available)
+const DEFAULT_CHALLENGES: ChallengeAction[] = [
+  {
+    action: 'look_left',
+    instruction: 'Slowly turn your head to the LEFT',
+    duration_ms: 2500,
+    order: 1,
+    icon: '←',
+  },
+  {
+    action: 'look_right',
+    instruction: 'Slowly turn your head to the RIGHT',
+    duration_ms: 2500,
+    order: 2,
+    icon: '→',
+  },
+  {
+    action: 'blink',
+    instruction: 'Blink your eyes naturally',
+    duration_ms: 2000,
+    order: 3,
+    icon: '👁',
+  },
+  {
+    action: 'smile',
+    instruction: 'Smile 😊',
+    duration_ms: 2000,
+    order: 4,
+    icon: '😊',
+  },
+];
+
+// Instruction text mapping
+const INSTRUCTION_MAP: Record<string, { text: string; icon: string }> = {
+  look_left: { text: 'Slowly turn your head LEFT', icon: '←' },
+  look_right: { text: 'Slowly turn your head RIGHT', icon: '→' },
+  look_up: { text: 'Look UP', icon: '↑' },
+  look_down: { text: 'Look DOWN', icon: '↓' },
+  turn_head_left: { text: 'Turn your head LEFT', icon: '←' },
+  turn_head_right: { text: 'Turn your head RIGHT', icon: '→' },
+  smile: { text: 'Smile 😊', icon: '😊' },
+  blink: { text: 'Blink your eyes naturally', icon: '👁' },
+  open_mouth: { text: 'Open your mouth slightly', icon: '😮' },
+  stay_still: { text: 'Look at the camera and stay still', icon: '📷' },
+};
+
+export const VideoRecorder: React.FC<VideoRecorderProps> = ({
+  theme,
+  duration,
+  instructions,
+  challenges: propChallenges,
+  sessionId,
+  smartMode = true,
+  onComplete,
+  onCancel,
+  onFetchChallenges,
+}) => {
+  // State
+  const [phase, setPhase] = useState<'loading' | 'countdown' | 'recording' | 'processing'>('loading');
+  const [countdown, setCountdown] = useState(3);
+  const [challenges, setChallenges] = useState<ChallengeAction[]>([]);
+  const [currentChallengeIndex, setCurrentChallengeIndex] = useState(0);
+  const [challengeProgress, setChallengeProgress] = useState(0);
+  const [overallProgress, setOverallProgress] = useState(0);
+  const [completedChallenges, setCompletedChallenges] = useState<string[]>([]);
+  const [frames, setFrames] = useState<string[]>([]);
+  
+  // Animations
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+  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);
+
+  // Calculate total duration from challenges
+  const totalDuration = duration || challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000;
+
+  // Initialize challenges
+  useEffect(() => {
+    const initChallenges = async () => {
+      try {
+        let challengeList: ChallengeAction[];
+        
+        if (propChallenges && propChallenges.length > 0) {
+          // Use provided challenges
+          challengeList = propChallenges;
+        } else if (onFetchChallenges) {
+          // Fetch from backend
+          challengeList = await onFetchChallenges();
+        } else if (instructions && instructions.length > 0) {
+          // Convert instructions to challenges
+          challengeList = instructions.map((inst, idx) => ({
+            action: inst,
+            instruction: INSTRUCTION_MAP[inst]?.text || inst,
+            duration_ms: 2000,
+            order: idx + 1,
+            icon: INSTRUCTION_MAP[inst]?.icon,
+          }));
+        } else {
+          // Use default challenges
+          challengeList = smartMode ? DEFAULT_CHALLENGES : [
+            {
+              action: 'stay_still',
+              instruction: 'Look at the camera and stay still',
+              duration_ms: duration || 5000,
+              order: 1,
+              icon: '📷',
+            },
+          ];
+        }
+        
+        setChallenges(challengeList);
+        setPhase('countdown');
+      } catch (error) {
+        console.error('Failed to fetch challenges:', error);
+        // Fallback to default
+        setChallenges(DEFAULT_CHALLENGES);
+        setPhase('countdown');
+      }
+    };
+
+    initChallenges();
+  }, [propChallenges, instructions, onFetchChallenges, smartMode, duration]);
+
+  // Countdown phase
+  useEffect(() => {
+    if (phase !== 'countdown') return;
+
+    if (countdown > 0) {
+      // Animate countdown number
+      Animated.sequence([
+        Animated.timing(scaleAnim, {
+          toValue: 1.3,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]).start();
+
+      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
+      return () => clearTimeout(timer);
+    } else {
+      startRecording();
+    }
+  }, [countdown, phase]);
+
+  // Start pulse animation for recording indicator
+  useEffect(() => {
+    if (phase === 'recording') {
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulseAnim, {
+            toValue: 1.2,
+            duration: 500,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+          }),
+          Animated.timing(pulseAnim, {
+            toValue: 1,
+            duration: 500,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+          }),
+        ])
+      ).start();
+    }
+  }, [phase]);
+
+  // Animate arrow for directional challenges
+  const animateArrow = useCallback((direction: string) => {
+    const toValue = direction.includes('left') ? -20 : direction.includes('right') ? 20 : 0;
+    
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(arrowAnim, {
+          toValue,
+          duration: 500,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(arrowAnim, {
+          toValue: 0,
+          duration: 500,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, [arrowAnim]);
+
+  // Start recording
+  const startRecording = useCallback(() => {
+    setPhase('recording');
+    recordingStartTime.current = Date.now();
+    
+    // Simulate frame capture (in real implementation, this would capture actual camera frames)
+    frameInterval.current = setInterval(() => {
+      setFrames(prev => [...prev, `frame_${Date.now()}`]);
+    }, 100); // Capture ~10 FPS
+
+    // Start first challenge
+    runChallenge(0);
+  }, []);
+
+  // Run a specific challenge
+  const runChallenge = useCallback((index: number) => {
+    if (index >= challenges.length) {
+      completeRecording();
+      return;
+    }
+
+    const challenge = challenges[index];
+    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);
+      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]);
+
+  // Complete recording
+  const completeRecording = useCallback(() => {
+    if (frameInterval.current) {
+      clearInterval(frameInterval.current);
+    }
+
+    setPhase('processing');
+    setOverallProgress(100);
+
+    // Simulate processing delay
+    setTimeout(() => {
+      const result: VideoRecordingResult = {
+        frames,
+        duration: Date.now() - recordingStartTime.current,
+        instructionsFollowed: completedChallenges.length === challenges.length,
+        qualityScore: 85 + Math.random() * 10, // Simulated quality score
+        challengesCompleted: completedChallenges,
+        sessionId,
+      };
+
+      onComplete(result);
+    }, 500);
+  }, [frames, completedChallenges, challenges, sessionId, onComplete]);
+
+  // Current challenge
+  const currentChallenge = challenges[currentChallengeIndex];
+
+  // Get direction arrow for the current challenge
+  const getDirectionIndicator = () => {
+    if (!currentChallenge) return null;
+    
+    const action = currentChallenge.action;
+    
+    if (action.includes('left')) {
+      return (
+        <Animated.View 
+          style={[
+            styles.directionArrow,
+            styles.leftArrow,
+            { transform: [{ translateX: arrowAnim }] }
+          ]}
+        >
+          <Text style={styles.arrowText}>◀</Text>
+        </Animated.View>
+      );
+    }
+    
+    if (action.includes('right')) {
+      return (
+        <Animated.View 
+          style={[
+            styles.directionArrow,
+            styles.rightArrow,
+            { transform: [{ translateX: arrowAnim }] }
+          ]}
+        >
+          <Text style={styles.arrowText}>▶</Text>
+        </Animated.View>
+      );
+    }
+    
+    if (action === 'look_up') {
+      return (
+        <View style={[styles.directionArrow, styles.topArrow]}>
+          <Text style={styles.arrowText}>▲</Text>
+        </View>
+      );
+    }
+    
+    if (action === 'look_down') {
+      return (
+        <View style={[styles.directionArrow, styles.bottomArrow]}>
+          <Text style={styles.arrowText}>▼</Text>
+        </View>
+      );
+    }
+    
+    return null;
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Camera View */}
+      <View style={styles.cameraContainer}>
+        <View style={styles.mockCamera}>
+          <Text style={styles.mockCameraText}>Front Camera</Text>
+        </View>
+
+        {/* Face Oval Overlay */}
+        <View style={styles.overlay}>
+          <View 
+            style={[
+              styles.faceOval,
+              phase === 'recording' && { 
+                borderColor: theme?.successColor || '#10B981',
+                borderStyle: 'solid',
+              }
+            ]}
+          />
+          
+          {/* Direction indicators */}
+          {phase === 'recording' && getDirectionIndicator()}
+        </View>
+
+        {/* Loading Phase */}
+        {phase === 'loading' && (
+          <View style={styles.centeredOverlay}>
+            <Text style={styles.loadingText}>Preparing challenges...</Text>
+          </View>
+        )}
+
+        {/* Countdown */}
+        {phase === 'countdown' && (
+          <View style={styles.countdownContainer}>
+            <Text style={styles.getReadyText}>Get Ready!</Text>
+            <Animated.Text 
+              style={[
+                styles.countdownText,
+                { transform: [{ scale: scaleAnim }] }
+              ]}
+            >
+              {countdown}
+            </Animated.Text>
+          </View>
+        )}
+
+        {/* Recording Indicator */}
+        {phase === 'recording' && (
+          <View style={styles.recordingIndicator}>
+            <Animated.View 
+              style={[
+                styles.recordingDot,
+                { transform: [{ scale: pulseAnim }] }
+              ]}
+            />
+            <Text style={styles.recordingText}>Recording</Text>
+          </View>
+        )}
+
+        {/* Overall Progress Bar */}
+        {(phase === 'recording' || phase === 'processing') && (
+          <View style={styles.progressContainer}>
+            <View style={styles.progressBar}>
+              <View 
+                style={[
+                  styles.progressFill,
+                  { 
+                    width: `${overallProgress}%`,
+                    backgroundColor: theme?.primaryColor || '#6366F1'
+                  }
+                ]} 
+              />
+            </View>
+            <Text style={styles.progressText}>
+              {Math.round(overallProgress)}%
+            </Text>
+          </View>
+        )}
+
+        {/* Challenge Instructions */}
+        {phase === 'recording' && currentChallenge && (
+          <Animated.View 
+            style={[
+              styles.instructionContainer,
+              { opacity: fadeAnim }
+            ]}
+          >
+            <View style={styles.instructionBox}>
+              {currentChallenge.icon && (
+                <Text style={styles.instructionIcon}>{currentChallenge.icon}</Text>
+              )}
+              <Text style={styles.instructionText}>
+                {currentChallenge.instruction}
+              </Text>
+              
+              {/* Challenge progress bar */}
+              <View style={styles.challengeProgressBar}>
+                <View 
+                  style={[
+                    styles.challengeProgressFill,
+                    { 
+                      width: `${challengeProgress}%`,
+                      backgroundColor: theme?.successColor || '#10B981'
+                    }
+                  ]} 
+                />
+              </View>
+            </View>
+          </Animated.View>
+        )}
+
+        {/* Challenge Counter */}
+        {phase === 'recording' && challenges.length > 1 && (
+          <View style={styles.challengeCounter}>
+            <Text style={styles.challengeCounterText}>
+              {currentChallengeIndex + 1} / {challenges.length}
+            </Text>
+          </View>
+        )}
+
+        {/* Processing Overlay */}
+        {phase === 'processing' && (
+          <View style={styles.processingOverlay}>
+            <Text style={styles.processingText}>Processing video...</Text>
+          </View>
+        )}
+      </View>
+
+      {/* Bottom Container */}
+      <View style={styles.bottomContainer}>
+        {phase === 'countdown' && (
+          <>
+            <Text style={styles.bottomText}>
+              You'll perform {challenges.length} action{challenges.length > 1 ? 's' : ''}.{'\n'}
+              Follow the on-screen instructions.
+            </Text>
+            <TouchableOpacity
+              style={[styles.cancelButton, { borderColor: theme?.errorColor || '#EF4444' }]}
+              onPress={onCancel}
+            >
+              <Text style={[styles.cancelButtonText, { color: theme?.errorColor || '#EF4444' }]}>
+                Cancel
+              </Text>
+            </TouchableOpacity>
+          </>
+        )}
+        
+        {phase === 'recording' && (
+          <Text style={styles.bottomText}>
+            Keep your face visible and follow the instructions
+          </Text>
+        )}
+        
+        {phase === 'processing' && (
+          <Text style={styles.bottomText}>
+            Almost done...
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000000',
+  },
+  cameraContainer: {
+    flex: 1,
+    position: 'relative',
+  },
+  mockCamera: {
+    flex: 1,
+    backgroundColor: '#1F2937',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  mockCameraText: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  faceOval: {
+    width: 250,
+    height: 320,
+    borderRadius: 125,
+    borderWidth: 4,
+    borderColor: '#FFFFFF',
+    borderStyle: 'dashed',
+  },
+  centeredOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  loadingText: {
+    color: '#FFFFFF',
+    fontSize: 18,
+  },
+  countdownContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  },
+  getReadyText: {
+    color: '#FFFFFF',
+    fontSize: 24,
+    fontWeight: '600',
+    marginBottom: 20,
+  },
+  countdownText: {
+    fontSize: 96,
+    fontWeight: 'bold',
+    color: '#FFFFFF',
+  },
+  recordingIndicator: {
+    position: 'absolute',
+    top: 50,
+    right: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+  },
+  recordingDot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: '#EF4444',
+    marginRight: 8,
+  },
+  recordingText: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  progressContainer: {
+    position: 'absolute',
+    top: 100,
+    left: 20,
+    right: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  progressBar: {
+    flex: 1,
+    height: 8,
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginRight: 10,
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 4,
+  },
+  progressText: {
+    color: '#FFFFFF',
+    fontSize: 12,
+    fontWeight: '600',
+    width: 40,
+    textAlign: 'right',
+  },
+  instructionContainer: {
+    position: 'absolute',
+    top: 140,
+    left: 20,
+    right: 20,
+    alignItems: 'center',
+  },
+  instructionBox: {
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    paddingHorizontal: 24,
+    paddingVertical: 16,
+    borderRadius: 16,
+    alignItems: 'center',
+    minWidth: 280,
+  },
+  instructionIcon: {
+    fontSize: 36,
+    marginBottom: 8,
+  },
+  instructionText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#FFFFFF',
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  challengeProgressBar: {
+    width: '100%',
+    height: 4,
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    borderRadius: 2,
+    overflow: 'hidden',
+  },
+  challengeProgressFill: {
+    height: '100%',
+    borderRadius: 2,
+  },
+  challengeCounter: {
+    position: 'absolute',
+    top: 50,
+    left: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+  },
+  challengeCounterText: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  directionArrow: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  leftArrow: {
+    left: 20,
+  },
+  rightArrow: {
+    right: 20,
+  },
+  topArrow: {
+    top: 100,
+  },
+  bottomArrow: {
+    bottom: 150,
+  },
+  arrowText: {
+    fontSize: 48,
+    color: '#FFFFFF',
+    textShadowColor: 'rgba(0, 0, 0, 0.5)',
+    textShadowOffset: { width: 2, height: 2 },
+    textShadowRadius: 4,
+  },
+  processingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  processingText: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    fontWeight: '600',
+  },
+  bottomContainer: {
+    paddingVertical: 32,
+    paddingHorizontal: 24,
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    alignItems: 'center',
+  },
+  bottomText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    textAlign: 'center',
+    marginBottom: 16,
+    lineHeight: 24,
+  },
+  cancelButton: {
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 8,
+    borderWidth: 2,
+  },
+  cancelButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+
+export default VideoRecorder;