@transfergratis/react-native-sdk 0.1.2

package/src/components/example/OrientationVideoExample.tsx

@@ -0,0 +1,384 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Alert,
+  ScrollView,
+} from 'react-native';
+import KYCService from '../../modules/api/KYCService';
+import { OrientationVideoResult } from '../../types/KYC.types';
+import OrientationVideoCaptureEnhanced from '../KYCElements/OrientationVideoCaptureEnhanced';
+
+const OrientationVideoExample: React.FC = () => {
+  const [showVideoCapture, setShowVideoCapture] = useState(false);
+  const [result, setResult] = useState<OrientationVideoResult | null>(null);
+  const [isLoading] = useState(false);
+
+  // Initialize KYC Service with your API configuration
+  const kycService = new KYCService(
+    'http://18.188.180.154:8001/', // Replace with your actual API base URL
+    '1234567890' // Replace with your actual API key
+  );
+
+  const handleComplete = (orientationResult: OrientationVideoResult) => {
+    setResult(orientationResult);
+    setShowVideoCapture(false);
+    
+    // Check if all orientations were captured
+    const allCaptured = orientationResult.center.captured && 
+                       orientationResult.left.captured && 
+                       orientationResult.right.captured;
+    
+    if (allCaptured) {
+      Alert.alert(
+        'Success!',
+        'All face orientations have been successfully captured and verified.',
+        [{ text: 'OK' }]
+      );
+    } else {
+      Alert.alert(
+        'Partial Success',
+        'Some orientations were not captured. You may need to retake the video.',
+        [{ text: 'OK' }]
+      );
+    }
+  };
+
+  const handleError = (error: string) => {
+    setShowVideoCapture(false);
+    Alert.alert('Error', error, [{ text: 'OK' }]);
+  };
+
+  const startOrientationCapture = () => {
+    setShowVideoCapture(true);
+    setResult(null);
+  };
+
+  const resetExample = () => {
+    setShowVideoCapture(false);
+    setResult(null);
+  };
+
+  const renderResult = () => {
+    if (!result) return null;
+
+    const { center, left, right } = result;
+    const allCaptured = center.captured && left.captured && right.captured;
+
+    return (
+      <View style={styles.resultContainer}>
+        <Text style={styles.resultTitle}>
+          Orientation Video Analysis Results
+        </Text>
+        
+        <View style={styles.statusContainer}>
+          <Text style={[
+            styles.statusText,
+            allCaptured ? styles.successText : styles.warningText
+          ]}>
+            {allCaptured ? '✅ All orientations captured' : '⚠️ Some orientations missing'}
+          </Text>
+        </View>
+
+        <View style={styles.orientationDetails}>
+          <View style={styles.orientationItem}>
+            <Text style={styles.orientationLabel}>Center</Text>
+            <Text style={[
+              styles.orientationStatus,
+              center.captured ? styles.capturedText : styles.notCapturedText
+            ]}>
+              {center.captured ? '✅ Captured' : '❌ Not captured'}
+            </Text>
+            {center.captured && (
+              <Text style={styles.frameText}>Frame: {center.frame}</Text>
+            )}
+          </View>
+
+          <View style={styles.orientationItem}>
+            <Text style={styles.orientationLabel}>Left</Text>
+            <Text style={[
+              styles.orientationStatus,
+              left.captured ? styles.capturedText : styles.notCapturedText
+            ]}>
+              {left.captured ? '✅ Captured' : '❌ Not captured'}
+            </Text>
+            {left.captured && (
+              <Text style={styles.frameText}>Frame: {left.frame}</Text>
+            )}
+          </View>
+
+          <View style={styles.orientationItem}>
+            <Text style={styles.orientationLabel}>Right</Text>
+            <Text style={[
+              styles.orientationStatus,
+              right.captured ? styles.capturedText : styles.notCapturedText
+            ]}>
+              {right.captured ? '✅ Captured' : '❌ Not captured'}
+            </Text>
+            {right.captured && (
+              <Text style={styles.frameText}>Frame: {right.frame}</Text>
+            )}
+          </View>
+        </View>
+
+        <View style={styles.instructionsContainer}>
+          <Text style={styles.instructionsTitle}>Instructions for Liveness Detection:</Text>
+          <Text style={styles.instructionText}>• Look straight ahead at the camera</Text>
+          <Text style={styles.instructionText}>• Turn your head to the left</Text>
+          <Text style={styles.instructionText}>• Turn your head to the right</Text>
+          <Text style={styles.instructionText}>• Keep your face within the frame</Text>
+          <Text style={styles.instructionText}>• Ensure good lighting conditions</Text>
+        </View>
+      </View>
+    );
+  };
+
+  if (showVideoCapture) {
+    return (
+      <OrientationVideoCaptureEnhanced
+        config={{
+          duration: 10,
+          orientations: ['center', 'left', 'right'],
+          instructions: {
+            center: 'Look straight ahead at the camera',
+            left: 'Turn your head to the left',
+            right: 'Turn your head to the right',
+          },
+          showPreview: true,
+          allowRetake: true,
+          maxRetakes: 3,
+          quality: 0.8,
+          aspectRatio: 16 / 9,
+        }}
+        onComplete={handleComplete}
+        onError={handleError}
+        kycService={kycService}
+      />
+    );
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Orientation Video Capture Example</Text>
+        <Text style={styles.subtitle}>
+          This example demonstrates liveness detection through face orientation analysis
+        </Text>
+      </View>
+
+      <View style={styles.content}>
+        <View style={styles.infoContainer}>
+          <Text style={styles.infoTitle}>What is Liveness Detection?</Text>
+          <Text style={styles.infoText}>
+            Liveness detection is a security feature that verifies a real person is present 
+            during the verification process, preventing spoofing attacks using photos or videos.
+          </Text>
+        </View>
+
+        <View style={styles.infoContainer}>
+          <Text style={styles.infoTitle}>How it works:</Text>
+          <Text style={styles.infoText}>
+            1. Record a short video (10 seconds){'\n'}
+            2. Follow the on-screen instructions{'\n'}
+            3. Turn your head in different directions{'\n'}
+            4. The system analyzes the video to detect face orientations{'\n'}
+            5. Results show which orientations were successfully captured
+          </Text>
+        </View>
+
+        {renderResult()}
+
+        <View style={styles.buttonContainer}>
+          <TouchableOpacity 
+            style={styles.startButton} 
+            onPress={startOrientationCapture}
+            disabled={isLoading}
+          >
+            <Text style={styles.startButtonText}>
+              {isLoading ? 'Loading...' : 'Start Orientation Capture'}
+            </Text>
+          </TouchableOpacity>
+
+          {result && (
+            <TouchableOpacity 
+              style={styles.resetButton} 
+              onPress={resetExample}
+            >
+              <Text style={styles.resetButtonText}>Reset Example</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  header: {
+    backgroundColor: '#007AFF',
+    padding: 20,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#fff',
+    textAlign: 'center',
+    marginBottom: 10,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#fff',
+    textAlign: 'center',
+    opacity: 0.9,
+  },
+  content: {
+    padding: 20,
+  },
+  infoContainer: {
+    backgroundColor: '#fff',
+    padding: 20,
+    borderRadius: 10,
+    marginBottom: 20,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  infoTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 10,
+  },
+  infoText: {
+    fontSize: 14,
+    color: '#666',
+    lineHeight: 20,
+  },
+  resultContainer: {
+    backgroundColor: '#fff',
+    padding: 20,
+    borderRadius: 10,
+    marginBottom: 20,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  resultTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#333',
+    textAlign: 'center',
+    marginBottom: 15,
+  },
+  statusContainer: {
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  statusText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  successText: {
+    color: '#34C759',
+  },
+  warningText: {
+    color: '#FF9500',
+  },
+  orientationDetails: {
+    marginBottom: 20,
+  },
+  orientationItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0',
+  },
+  orientationLabel: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    flex: 1,
+  },
+  orientationStatus: {
+    fontSize: 14,
+    fontWeight: '500',
+    flex: 1,
+    textAlign: 'center',
+  },
+  capturedText: {
+    color: '#34C759',
+  },
+  notCapturedText: {
+    color: '#FF3B30',
+  },
+  frameText: {
+    fontSize: 12,
+    color: '#666',
+    flex: 1,
+    textAlign: 'right',
+  },
+  instructionsContainer: {
+    backgroundColor: '#f8f9fa',
+    padding: 15,
+    borderRadius: 8,
+  },
+  instructionsTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 10,
+  },
+  instructionText: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 5,
+  },
+  buttonContainer: {
+    gap: 15,
+  },
+  startButton: {
+    backgroundColor: '#007AFF',
+    paddingVertical: 15,
+    paddingHorizontal: 30,
+    borderRadius: 25,
+    alignItems: 'center',
+  },
+  startButtonText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  resetButton: {
+    backgroundColor: '#FF3B30',
+    paddingVertical: 15,
+    paddingHorizontal: 30,
+    borderRadius: 25,
+    alignItems: 'center',
+  },
+  resetButtonText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+export default OrientationVideoExample;