omnipay-reactnative-sdk 1.2.1 → 1.2.2-beta.0

package/src/components/FaceVerification.tsx

@@ -0,0 +1,884 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Animated,
+  Image,
+  Linking,
+  Platform,
+} from 'react-native';
+import {
+  useCameraDevice,
+  useCameraPermission,
+  Frame,
+  useCameraFormat,
+} from 'react-native-vision-camera';
+import {
+  Face,
+  Camera,
+  FaceDetectionOptions,
+} from 'react-native-vision-camera-face-detector';
+import Svg, { Circle } from 'react-native-svg';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+type VerificationStep =
+  | 'position_face'
+  | 'blink'
+  | 'smile'
+  | 'final_position'
+  | 'complete';
+
+interface FaceVerificationProps {
+  onSuccess?: (capturedImageBase64: string) => void;
+  onFailure?: () => void;
+  onCancel?: () => void;
+  onImageCaptured?: (livenessImage: string) => void;
+}
+
+const FaceVerification: React.FC<FaceVerificationProps> = ({
+  onSuccess,
+  onFailure,
+  onCancel,
+  onImageCaptured,
+}) => {
+  const device = useCameraDevice('front');
+  const faceDetectionOptions = useRef<FaceDetectionOptions>({
+    landmarkMode: 'all',
+    classificationMode: 'all',
+  }).current;
+
+  const photoFormat = useCameraFormat(device, [
+    { photoResolution: { width: 1280, height: 720 } },
+  ]);
+
+  const { hasPermission, requestPermission } = useCameraPermission();
+
+  const spinValue = useRef(new Animated.Value(0)).current;
+  const progressValue = useRef(new Animated.Value(955)).current; // 955 = circle circumference for r=152
+
+  const [isCameraActive, setIsCameraActive] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [permissionDenied, setPermissionDenied] = useState(false);
+  const [isInitializingCamera, setIsInitializingCamera] = useState(true);
+
+  const [currentStep, setCurrentStep] =
+    useState<VerificationStep>('position_face');
+  const [isCapturing, setIsCapturing] = useState(false);
+  const [capturedImage, setCapturedImage] = useState<string | null>(null);
+
+  const frameCountRef = useRef(0);
+  const finalPositionFrameCountRef = useRef(0);
+  const faceHistoryRef = useRef<Face[]>([]);
+  const cameraRef = useRef<any>(null);
+
+  // RAF optimization: buffer latest face data and process on animation frames
+  const latestFaceDataRef = useRef<{ faces: Face[]; frame: Frame } | null>(
+    null
+  );
+  const rafIdRef = useRef<number | null>(null);
+  const isProcessingRef = useRef(false);
+
+  // Handle camera device initialization and auto-start
+  useEffect(() => {
+    if (device !== undefined) {
+      setIsInitializingCamera(false);
+
+      // If permissions are already granted, start camera immediately
+      if (
+        hasPermission &&
+        !isCameraActive &&
+        !permissionDenied &&
+        !capturedImage
+      ) {
+        setIsCameraActive(true);
+        progressValue.setValue(955);
+      }
+    }
+  }, [
+    device,
+    hasPermission,
+    isCameraActive,
+    permissionDenied,
+    capturedImage,
+    progressValue,
+  ]);
+
+  // Start loading animation during camera initialization
+  useEffect(() => {
+    if (isInitializingCamera) {
+      setIsLoading(true);
+    } else {
+      setIsLoading(false);
+    }
+  }, [isInitializingCamera]);
+
+  useEffect(() => {
+    const spin = Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 1,
+        duration: 1000,
+        useNativeDriver: true,
+      })
+    );
+
+    if (isLoading) {
+      spin.start();
+    } else {
+      spin.stop();
+      spinValue.setValue(0);
+    }
+
+    return () => spin.stop();
+  }, [isLoading, spinValue]);
+
+  useEffect(() => {
+    const progressPercentage = calculateProgress();
+    const strokeDasharray = 955;
+    const targetOffset =
+      strokeDasharray - (progressPercentage / 100) * strokeDasharray;
+
+    if (isCameraActive && progressPercentage >= 0) {
+      Animated.timing(progressValue, {
+        toValue: targetOffset,
+        duration: 800,
+        useNativeDriver: false,
+      }).start();
+    }
+  }, [currentStep, progressValue, isCameraActive]);
+
+  // RAF-based face processing to throttle heavy computations
+  const processFaceData = () => {
+    if (!latestFaceDataRef.current || isProcessingRef.current) {
+      rafIdRef.current = null;
+      return;
+    }
+
+    isProcessingRef.current = true;
+    const { faces } = latestFaceDataRef.current;
+
+    // Clear the buffer since we're processing this data
+    latestFaceDataRef.current = null;
+
+    try {
+      handleFaceDetectionLogic(faces);
+    } finally {
+      isProcessingRef.current = false;
+      rafIdRef.current = null;
+    }
+  };
+
+  // Cleanup RAF on unmount
+  useEffect(() => {
+    return () => {
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+    };
+  }, []);
+
+  const getInstructionText = () => {
+    switch (currentStep) {
+      case 'position_face':
+        return 'Position your face in the frame';
+      case 'blink':
+        return 'Please blink your eyes';
+      case 'smile':
+        return 'Now smile';
+      case 'final_position':
+        return 'Look straight at the camera and hold still';
+      case 'complete':
+        return '';
+      default:
+        return 'Position your face in the frame';
+    }
+  };
+
+  const calculateProgress = () => {
+    switch (currentStep) {
+      case 'position_face':
+        return 10;
+      case 'blink':
+        return 30;
+      case 'smile':
+        return 60;
+      case 'final_position':
+        return 80;
+      case 'complete':
+        return 100;
+      default:
+        return 0;
+    }
+  };
+
+  const detectBlink = (): boolean => {
+    if (frameCountRef.current < 20 || faceHistoryRef.current.length < 4)
+      return false;
+
+    const threshold = {
+      eyeOpen: 0.5,
+      eyeClosed: 0.3,
+    };
+
+    const recentFrames = faceHistoryRef.current.slice(-4);
+
+    for (let i = 0; i < recentFrames.length - 1; i++) {
+      const frame1 = recentFrames[i];
+      const frame2 = recentFrames[i + 1];
+
+      if (!frame1 || !frame2) continue;
+
+      const eyesWereOpen =
+        frame1.leftEyeOpenProbability > threshold.eyeOpen &&
+        frame1.rightEyeOpenProbability > threshold.eyeOpen;
+
+      const eyesAreClosed =
+        frame2.leftEyeOpenProbability < threshold.eyeClosed &&
+        frame2.rightEyeOpenProbability < threshold.eyeClosed;
+
+      if (eyesWereOpen && eyesAreClosed) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  const detectSmile = (face: Face): boolean => {
+    if (frameCountRef.current < 20 || faceHistoryRef.current.length < 3)
+      return false;
+
+    const threshold = 0.7;
+    const currentSmiling = face.smilingProbability > threshold;
+
+    const recentFrames = faceHistoryRef.current.slice(-3);
+    const hadNotSmilingFrames = recentFrames.some(
+      (frame: Face) => frame.smilingProbability < 0.4
+    );
+
+    return currentSmiling && hadNotSmilingFrames;
+  };
+
+  const isInFinalPosition = (face: Face): boolean => {
+    const isLookingStraight = Math.abs(face.yawAngle) < 15;
+    const eyesOpen =
+      face.leftEyeOpenProbability > 0.5 && face.rightEyeOpenProbability > 0.5;
+    const isNotSmiling = face.smilingProbability < 0.1;
+
+    return isLookingStraight && eyesOpen && isNotSmiling;
+  };
+
+  // Fast callback that just buffers data - called by camera at high frequency
+  function handleFacesDetection(faces: Face[], frame: Frame) {
+    // Store the latest face data
+    latestFaceDataRef.current = { faces, frame };
+
+    // Schedule processing on next animation frame if not already scheduled
+    if (!rafIdRef.current) {
+      rafIdRef.current = requestAnimationFrame(processFaceData);
+    }
+  }
+
+  // Heavy processing logic - called at animation frame rate (60fps max)
+  function handleFaceDetectionLogic(faces: Face[]) {
+    if (faces.length === 0) {
+      if (currentStep !== 'position_face' && currentStep !== 'complete') {
+        setCurrentStep('position_face');
+        frameCountRef.current = 0;
+        faceHistoryRef.current = [];
+        finalPositionFrameCountRef.current = 0;
+      }
+      return;
+    }
+
+    const face = faces[0];
+    if (!face) return;
+
+    frameCountRef.current++;
+
+    faceHistoryRef.current = [...faceHistoryRef.current.slice(-7), face];
+
+    switch (currentStep) {
+      case 'position_face':
+        if (frameCountRef.current > 10) {
+          setCurrentStep('blink');
+        }
+        break;
+
+      case 'blink':
+        if (detectBlink()) {
+          setCurrentStep('smile');
+        }
+        break;
+
+      case 'smile':
+        if (detectSmile(face)) {
+          setCurrentStep('final_position');
+        }
+        break;
+
+      case 'final_position':
+        if (isInFinalPosition(face)) {
+          finalPositionFrameCountRef.current++;
+          // Require 5 consecutive frames for stability before capturing
+          if (finalPositionFrameCountRef.current >= 5) {
+            setCurrentStep('complete');
+            captureCurrentFrame();
+          }
+        } else {
+          finalPositionFrameCountRef.current = 0;
+        }
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  const captureCurrentFrame = async () => {
+    if (isCapturing || !cameraRef.current) return;
+
+    try {
+      setIsCapturing(true);
+
+      const photo = await cameraRef.current.takePhoto({
+        enableShutterSound: false,
+      });
+
+      const response = await fetch(`file://${photo.path}`);
+      const blob = await response.blob();
+
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const base64String = reader.result as string;
+        setCapturedImage(base64String);
+        setIsCameraActive(false);
+      };
+      reader.readAsDataURL(blob);
+    } catch (error) {
+      onFailure?.();
+    } finally {
+      setIsCapturing(false);
+    }
+  };
+
+  const handleContinue = () => {
+    if (capturedImage) {
+      const base64String = capturedImage.replace(
+        /^data:image\/[a-z]+;base64,/,
+        ''
+      );
+
+      // Call onImageCaptured immediately for UI feedback
+      onImageCaptured?.(base64String);
+
+      // Still call onSuccess for backward compatibility
+      onSuccess?.(base64String);
+    }
+  };
+
+  const handleRetake = () => {
+    setCurrentStep('position_face');
+    faceHistoryRef.current = [];
+    frameCountRef.current = 0;
+    setCapturedImage(null);
+    finalPositionFrameCountRef.current = 0;
+    progressValue.setValue(955);
+
+    setIsCameraActive(true);
+    setIsLoading(true);
+
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 1000);
+  };
+
+  const startCamera = async () => {
+    setIsLoading(true);
+    setPermissionDenied(false);
+
+    try {
+      const permission = await requestPermission();
+
+      if (permission === true) {
+        setIsCameraActive(true);
+        progressValue.setValue(955);
+
+        setTimeout(() => {
+          setIsLoading(false);
+        }, 1000);
+      } else {
+        setPermissionDenied(true);
+        setIsLoading(false);
+      }
+    } catch (error) {
+      setPermissionDenied(true);
+      setIsLoading(false);
+    }
+  };
+
+  const openSettings = () => {
+    if (Platform.OS === 'ios') {
+      Linking.openURL('app-settings:');
+    } else {
+      Linking.openSettings();
+    }
+  };
+
+  if (permissionDenied) {
+    return (
+      <View style={[styles.container]}>
+        <View style={styles.centeredContainer}>
+          <View style={styles.permissionDeniedContainer}>
+            <Text style={styles.permissionDeniedTitle}>
+              Camera Access Required
+            </Text>
+            <Text style={styles.permissionDeniedText}>
+              This app needs camera access to verify your identity. Please allow
+              camera permission in your device settings.
+            </Text>
+
+            <View style={styles.permissionActions}>
+              <TouchableOpacity
+                style={styles.settingsButton}
+                onPress={openSettings}
+              >
+                <Text style={styles.settingsButtonText}>Open Settings</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={styles.retryButton}
+                onPress={() => setPermissionDenied(false)}
+              >
+                <Text style={styles.retryButtonText}>Try Again</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  if (isInitializingCamera || device === undefined) {
+    const spin = spinValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '360deg'],
+    });
+
+    return (
+      <View style={[styles.container]}>
+        <View style={styles.centeredContainer}>
+          <View style={styles.loadingContainer}>
+            <Animated.View
+              style={[styles.loadingSpinner, { transform: [{ rotate: spin }] }]}
+            />
+            <Text style={styles.loadingText}>
+              {isInitializingCamera
+                ? 'Initializing camera...'
+                : 'No camera device available'}
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  const strokeDasharray = 955;
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <View style={[styles.container]}>
+      <View style={styles.centeredContainer}>
+        {isLoading ? (
+          <View style={styles.loadingContainer}>
+            <Animated.View
+              style={[styles.loadingSpinner, { transform: [{ rotate: spin }] }]}
+            />
+          </View>
+        ) : (
+          <View style={styles.contentContainer}>
+            {capturedImage ? (
+              <View style={styles.capturedImageContainer}>
+                <View style={styles.capturedImageWrapper}>
+                  <Image
+                    source={{ uri: capturedImage }}
+                    style={styles.capturedImage}
+                    resizeMode="cover"
+                  />
+                </View>
+
+                <View style={styles.capturedImageActions}>
+                  <TouchableOpacity
+                    style={styles.continueButton}
+                    onPress={handleContinue}
+                  >
+                    <Text style={styles.continueButtonText}>Continue</Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity
+                    style={styles.retakeButton}
+                    onPress={handleRetake}
+                  >
+                    <Text style={styles.retakeButtonText}>Retake</Text>
+                  </TouchableOpacity>
+                </View>
+              </View>
+            ) : (
+              <>
+                <View style={styles.captureSection}>
+                  <View style={styles.captureBackground}>
+                    {isCameraActive ? (
+                      <Camera
+                        ref={cameraRef}
+                        device={device}
+                        isActive={true}
+                        style={styles.camera}
+                        faceDetectionCallback={handleFacesDetection}
+                        faceDetectionOptions={faceDetectionOptions}
+                        photo={true}
+                        format={photoFormat}
+                      />
+                    ) : (
+                      <View style={styles.avatarPlaceholder}>
+                        <Text style={styles.avatarText}>👤</Text>
+                      </View>
+                    )}
+                  </View>
+
+                  {isCameraActive && (
+                    <View style={styles.progressRingContainer}>
+                      <Svg
+                        width={320}
+                        height={320}
+                        viewBox="0 0 320 320"
+                        style={styles.progressRing}
+                      >
+                        <Circle
+                          cx={160}
+                          cy={160}
+                          r={150}
+                          stroke="#E5E7EB"
+                          strokeWidth="0"
+                          fill="none"
+                        />
+                        <AnimatedCircle
+                          cx={160}
+                          cy={160}
+                          r={152}
+                          stroke="#214287"
+                          strokeWidth={6}
+                          fill="none"
+                          strokeDasharray={strokeDasharray}
+                          strokeDashoffset={progressValue}
+                          strokeLinecap="round"
+                        />
+                      </Svg>
+                    </View>
+                  )}
+
+                  {!isCameraActive && (
+                    <View style={styles.cameraIconSection}>
+                      <View style={styles.cameraIconContainer}>
+                        <Text style={styles.cameraIcon}>📷</Text>
+                      </View>
+                    </View>
+                  )}
+                </View>
+
+                {isCameraActive && (
+                  <View style={styles.instructionContainer}>
+                    <Text style={styles.instructionText}>
+                      {getInstructionText()}
+                    </Text>
+                  </View>
+                )}
+
+                {!isCameraActive && !hasPermission && (
+                  <View style={styles.startContainer}>
+                    <TouchableOpacity
+                      style={styles.startButton}
+                      onPress={startCamera}
+                    >
+                      <Text style={styles.startButtonText}>Proceed</Text>
+                    </TouchableOpacity>
+                  </View>
+                )}
+              </>
+            )}
+          </View>
+        )}
+      </View>
+
+      {/* Close button */}
+      <TouchableOpacity style={styles.closeButton} onPress={onCancel}>
+        <Text style={styles.closeButtonText}>✕</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginHorizontal: 'auto',
+    width: '100%',
+  },
+  centeredContainer: {
+    flex: 1,
+    alignSelf: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    paddingHorizontal: 0,
+    paddingBottom: 40,
+    paddingTop: 20,
+  },
+  contentContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: 16,
+  },
+  captureSection: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    position: 'relative',
+    width: 320,
+  },
+  captureBackground: {
+    width: 300,
+    height: 300,
+    backgroundColor: '#F1F5F9',
+    overflow: 'hidden',
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 150,
+  },
+  camera: {
+    width: '100%',
+    height: '100%',
+    transform: [{ scaleX: -1 }],
+  },
+  avatarFrame: {
+    width: 140,
+    height: 140,
+  },
+  avatarPlaceholder: {
+    width: 140,
+    height: 140,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  avatarText: {
+    fontSize: 80,
+  },
+  progressRingContainer: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: [{ translateX: -160 }, { translateY: -160 }],
+    width: 320,
+    height: 320,
+  },
+  progressRing: {
+    width: '100%',
+    height: '100%',
+  },
+  cameraIconSection: {
+    position: 'absolute',
+    top: 240,
+    right: 40,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    backgroundColor: '#ffffff',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cameraIconContainer: {
+    width: 38,
+    height: 38,
+    borderRadius: 19,
+    backgroundColor: '#214287',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cameraIcon: {
+    fontSize: 16,
+    color: '#ffffff',
+  },
+  instructionContainer: {
+    marginBottom: 16,
+    paddingHorizontal: 20,
+    alignItems: 'center',
+  },
+  instructionText: {
+    fontSize: 16,
+    color: '#667085',
+    textAlign: 'center',
+    lineHeight: 24,
+  },
+  startContainer: {
+    alignItems: 'center',
+    marginTop: 24,
+  },
+  startButton: {
+    backgroundColor: '#214287',
+    borderRadius: 10,
+    padding: 15,
+    alignItems: 'center',
+    minWidth: 250,
+  },
+  startButtonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 50,
+  },
+  loadingSpinner: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    borderWidth: 4,
+    borderColor: '#e5e7eb',
+    borderTopColor: '#214287',
+    marginBottom: 16,
+  },
+  loadingText: {
+    fontSize: 16,
+    color: '#667085',
+    textAlign: 'center',
+  },
+  capturedImageContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 24,
+    width: '100%',
+  },
+  capturedImageWrapper: {
+    width: '100%',
+    height: 300,
+    borderRadius: 12,
+    overflow: 'hidden',
+    backgroundColor: '#F1F5F9',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  capturedImage: {
+    width: '100%',
+    height: '100%',
+  },
+  capturedImageActions: {
+    width: '100%',
+    gap: 12,
+  },
+  continueButton: {
+    backgroundColor: '#214287',
+    borderRadius: 10,
+    padding: 15,
+    alignItems: 'center',
+    width: '100%',
+  },
+  continueButtonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  retakeButton: {
+    borderWidth: 1,
+    borderColor: '#214287',
+    borderRadius: 10,
+    padding: 15,
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    width: '100%',
+  },
+  retakeButtonText: {
+    color: '#214287',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  permissionDeniedContainer: {
+    alignItems: 'center',
+  },
+  permissionDeniedTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333333',
+    textAlign: 'center',
+    marginBottom: 15,
+  },
+  permissionDeniedText: {
+    fontSize: 16,
+    color: '#666666',
+    textAlign: 'center',
+    lineHeight: 24,
+    marginBottom: 30,
+  },
+  permissionActions: {
+    width: '100%',
+    gap: 12,
+  },
+  settingsButton: {
+    backgroundColor: '#214287',
+    borderRadius: 10,
+    padding: 15,
+    alignItems: 'center',
+    width: '100%',
+  },
+  settingsButtonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  retryButton: {
+    borderWidth: 1,
+    borderColor: '#214287',
+    borderRadius: 10,
+    padding: 15,
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    width: '100%',
+  },
+  retryButtonText: {
+    color: '#214287',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 50,
+    right: 20,
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  closeButtonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+export default FaceVerification;