react-native-biometric-verifier 0.0.65 → 0.0.67

package/src/components/CaptureImageWithoutEdit.js

@@ -7,15 +7,18 @@ import {
   ActivityIndicator,
   Animated,
   Dimensions,
+  Platform,
 } from 'react-native';
 import {
   Camera,
-  getCameraDevice,
-  useCodeScanner,
-  useCameraFormat,
+  useCameraDevices,
+  useCameraPermission,
+  usePhotoOutput,
 } from 'react-native-vision-camera';
+import { useBarcodeScannerOutput } from 'react-native-vision-camera-barcode-scanner';
 import { Global } from '../utils/Global';
 import { useFaceDetectionFrameProcessor } from '../hooks/useFaceDetectionFrameProcessor';
+import DeviceBrightness from '@adrianso/react-native-device-brightness';
 
 const CaptureImageWithoutEdit = React.memo(
   ({
@@ -33,6 +36,7 @@ const CaptureImageWithoutEdit = React.memo(
     const [cameraInitialized, setCameraInitialized] = useState(false);
     const [currentCameraType, setCurrentCameraType] = useState(cameraType);
     const [isInitializing, setIsInitializing] = useState(true);
+    const [layout, setLayout] = useState({ width: 0, height: 0 });
 
     const [faces, setFaces] = useState([]);
     const [livenessStep, setLivenessStep] = useState(0);
@@ -50,6 +54,43 @@ const CaptureImageWithoutEdit = React.memo(
     const instructionAnim = useRef(new Animated.Value(1)).current;
     const liveIndicatorAnim = useRef(new Animated.Value(0)).current;
 
+    const originalBrightnessRef = useRef(null);
+
+    // Camera hooks - NEW API
+    const devices = useCameraDevices();
+    const { hasPermission, requestPermission } = useCameraPermission();
+    const photoOutput = usePhotoOutput();
+
+    useEffect(() => {
+      const adjustBrightness = async () => {
+        try {
+          const currentBr = await DeviceBrightness.getBrightnessLevel();
+          originalBrightnessRef.current = currentBr;
+        } catch (e) {
+          console.log('Error getting brightness:', e);
+          originalBrightnessRef.current = 0.6;
+        }
+
+        try {
+          await DeviceBrightness.setBrightnessLevel(1.0);
+        } catch (e) {
+          console.log('Error setting brightness:', e);
+        }
+      };
+
+      adjustBrightness();
+
+      return () => {
+        if (originalBrightnessRef.current !== null) {
+          try {
+            DeviceBrightness.setBrightnessLevel(originalBrightnessRef.current);
+          } catch (e) {
+            console.log('Error restoring brightness in cleanup:', e);
+          }
+        }
+      };
+    }, []);
+
     const resetCaptureState = useCallback(() => {
       captured.current = false;
       setFaces([]);
@@ -63,18 +104,20 @@ const CaptureImageWithoutEdit = React.memo(
       setHasSingleFace(false);
     }, []);
 
-    const codeScanner = useCodeScanner({
-      codeTypes: ['qr', 'ean-13'],
-      onCodeScanned: (codes) => {
-        try {
-          if (showCodeScanner && codes && codes[0]?.value && !isLoading) {
-            onCapture(codes[0].value);
-          }
-        } catch (error) {
-          console.error('Error processing scanned code:', error);
+    // CodeScanner component - NEW API
+    const handleBarcodeScanned = useCallback((barcodes) => {
+      try {
+        if (showCodeScanner && barcodes && barcodes[0]?.rawValue && !isLoading) {
+          onCapture(barcodes[0].rawValue);
         }
-      },
-    });
+      } catch (error) {
+        console.error('Error processing scanned code:', error);
+      }
+    }, [showCodeScanner, isLoading, onCapture]);
+
+    const handleScannerError = useCallback((error) => {
+      console.error('Barcode scanner error:', error);
+    }, []);
 
     const onStableFaceDetected = useCallback(
       async (faceRect) => {
@@ -89,18 +132,20 @@ const CaptureImageWithoutEdit = React.memo(
             throw new Error('Camera ref not available');
           }
 
-          const photo = await cameraRef.current.takePhoto({
-            flash: 'off',
-            qualityPrioritization: 'quality',
-            enableShutterSound: false,
-            skipMetadata: true,
-          });
+          // Use photoOutput.capturePhotoToFile - NEW API
+          const photo = await photoOutput.capturePhotoToFile(
+            {
+              flashMode: 'off',
+              qualityPrioritization: 'quality',
+            },
+            {}
+          );
 
-          if (!photo || !photo.path) {
+          if (!photo || !photo.filePath) {
             throw new Error('Failed to capture photo - no path returned');
           }
 
-          const photopath = `file://${photo.path}`;
+          const photopath = `file://${photo.filePath}`;
           const fileName = photopath.substr(photopath.lastIndexOf('/') + 1);
           const photoData = {
             uri: photopath,
@@ -115,7 +160,7 @@ const CaptureImageWithoutEdit = React.memo(
           resetCaptureState();
         }
       },
-      [onCapture, resetCaptureState]
+      [onCapture, resetCaptureState, photoOutput]
     );
 
     const onFacesUpdate = useCallback((payload) => {
@@ -125,7 +170,6 @@ const CaptureImageWithoutEdit = React.memo(
         setFaceCount(count);
         setProgress(progress);
 
-        // Update anti-spoof related states
         if (antiSpoofState) {
           setIsFaceLive(antiSpoofState.isLive || false);
           setAntiSpoofConfidence(antiSpoofState.confidence || 0);
@@ -164,7 +208,6 @@ const CaptureImageWithoutEdit = React.memo(
     const onAntiSpoofUpdate = useCallback((result) => {
       if (!isMounted.current) return;
       try {
-        // Animate live indicator when face becomes live
         if (result?.isLive && !isFaceLive) {
           Animated.spring(liveIndicatorAnim, {
             toValue: 1,
@@ -189,7 +232,7 @@ const CaptureImageWithoutEdit = React.memo(
     }, [isFaceLive, liveIndicatorAnim]);
 
     const {
-      frameProcessor,
+      outputs: faceOutputs,
       forceResetCaptureState,
       updateShowCodeScanner,
       updateIsActive,
@@ -204,6 +247,9 @@ const CaptureImageWithoutEdit = React.memo(
       isActive: showCamera && cameraInitialized,
       livenessLevel: livenessLevel,
       antispooflevel,
+      cameraFacing: currentCameraType,
+      windowWidth: layout.width,
+      windowHeight: layout.height,
     });
 
     useEffect(() => {
@@ -214,68 +260,55 @@ const CaptureImageWithoutEdit = React.memo(
       }
     }, [capturedSV?.value]);
 
-    const getPermission = useCallback(async () => {
+    // Camera permission and device selection - NEW API
+    const initializeCamera = useCallback(async () => {
       try {
         if (!isMounted.current) return;
 
         setIsInitializing(true);
         setShowCamera(false);
 
-        const newCameraPermission = await Camera?.requestCameraPermission();
-        if (newCameraPermission === 'granted') {
-          let devices = await Camera?.getAvailableCameraDevices();
+        const permission = await requestPermission();
+        console.log('Camera permission:', permission);
 
-          // Retry once after short delay if no devices found
-          if (!devices || devices.length === 0) {
-            await new Promise((resolve) => setTimeout(resolve, 300));
-            devices = await Camera?.getAvailableCameraDevices();
-          }
+        if (permission === true || permission === 'granted') {
+          // Find device by position
+          const device = devices.find((d) => d.position === currentCameraType) || devices[0];
 
-          if (!devices || devices.length === 0) {
-            throw new Error('No camera devices available');
+          if (!device) {
+            throw new Error(`No ${currentCameraType} camera available`);
           }
 
-          const device = getCameraDevice(devices, currentCameraType);
-          if (!device) throw new Error(`No ${currentCameraType} camera available`);
-
+          console.log('Selected device:', device);
           setCameraDevice(device);
           setShowCamera(true);
         } else {
           console.warn('Camera permission not granted');
+          setShowCamera(false);
         }
       } catch (error) {
-        console.error('Camera permission error:', error);
+        console.error('Camera initialization error:', error);
         setShowCamera(false);
       } finally {
         if (isMounted.current) {
           setIsInitializing(false);
         }
       }
-    }, [currentCameraType]);
-
-    const initializeCamera = useCallback(async () => {
-      await getPermission();
-    }, [getPermission]);
+    }, [currentCameraType, devices, requestPermission]);
 
     useEffect(() => {
       isMounted.current = true;
 
-      const initOnMount = async () => {
-        try {
-          await initializeCamera();
-        } catch (error) {
-          console.error('Failed to initialize camera on mount:', error);
-        }
-      };
-
-      initOnMount();
+      if (devices && devices.length > 0) {
+        initializeCamera();
+      }
 
       return () => {
         isMounted.current = false;
         setShowCamera(false);
         forceResetCaptureState();
       };
-    }, [initializeCamera, forceResetCaptureState]);
+    }, [devices, initializeCamera, forceResetCaptureState]);
 
     useEffect(() => {
       updateIsActive(showCamera && cameraInitialized);
@@ -284,13 +317,11 @@ const CaptureImageWithoutEdit = React.memo(
     useEffect(() => {
       if (cameraType !== currentCameraType) {
         setCurrentCameraType(cameraType);
-        initializeCamera();
+        if (devices && devices.length > 0) {
+          initializeCamera();
+        }
       }
-    }, [cameraType, currentCameraType, initializeCamera]);
-
-    const format = useCameraFormat(cameraDevice, [
-      { fps: 30 },
-    ]);
+    }, [cameraType, currentCameraType, initializeCamera, devices]);
 
     useEffect(() => {
       try {
@@ -315,11 +346,13 @@ const CaptureImageWithoutEdit = React.memo(
         setCameraInitialized(false);
         forceResetCaptureState();
         resetCaptureState();
-        await initializeCamera();
+        if (devices && devices.length > 0) {
+          await initializeCamera();
+        }
       } catch (error) {
         console.error('Retry failed:', error);
       }
-    }, [initializeCamera, resetCaptureState, forceResetCaptureState]);
+    }, [initializeCamera, resetCaptureState, forceResetCaptureState, devices]);
 
     const getInstruction = useCallback(() => {
       if (faceCount > 1) {
@@ -424,35 +457,95 @@ const CaptureImageWithoutEdit = React.memo(
 
     const stepConfig = getStepConfig();
 
+    const getOverlayHeights = () => {
+      const containerHeight = layout.height || 400;
+      const overlayHeight = containerHeight * 0.15;
+      return { overlayHeight };
+    };
+
+    const { overlayHeight } = getOverlayHeights();
+    const confidencePercent = Math.round(
+      Math.max(0, Math.min(1, Number(antiSpoofConfidence) || 0)) * 100
+    );
+    const confidenceColor = confidencePercent >= 70
+      ? Global.AppTheme.success
+      : confidencePercent >= 40
+        ? Global.AppTheme.warning
+        : Global.AppTheme.error;
+
+    const scannerOutput = useBarcodeScannerOutput({
+      barcodeFormats: [
+        'qr-code',
+        'ean-13',
+        'code-128',
+        'code-39',
+        'code-93',
+      ],
+      onBarcodeScanned: handleBarcodeScanned,
+      onError: handleScannerError,
+    });
+
+    const cameraOutputs = showCodeScanner
+      ? [photoOutput, scannerOutput]
+      : [photoOutput, ...faceOutputs];
+
     return (
       <View style={styles.container}>
-        <View style={styles.cameraContainer}>
+        <View
+          style={styles.cameraContainer}
+          onLayout={(event) => {
+            const { width, height } = event.nativeEvent.layout;
+            setLayout({ width, height });
+          }}
+        >
           {!isInitializing && showCamera && cameraDevice ? (
-            <Camera
-              ref={cameraRef}
-              style={styles.camera}
-              device={cameraDevice}
-              isActive={cameraInitialized && showCamera && !isLoading}
-              photo={true}
-              format={cameraDevice ? format : undefined}
-              codeScanner={showCodeScanner && cameraInitialized ? codeScanner : undefined}
-              enableZoomGesture={false}
-              lowLightBoost={cameraDevice?.supportsLowLightBoost}
-              frameProcessor={
-                !showCodeScanner && cameraInitialized ? frameProcessor : undefined
-              }
-              frameProcessorFps={frameProcessorFps}
-              onInitialized={() => {
-                setCameraInitialized(true);
-              }}
-              onError={(error) => {
-                console.error('Camera error:', error);
-              }}
-              exposure={0}
-              pixelFormat="yuv"
-              preset="photo"
-              orientation="portrait"
-            />
+            <View style={StyleSheet.absoluteFill}>
+              <Camera
+                ref={cameraRef}
+                style={styles.camera}
+                device={cameraDevice}
+                isActive={showCamera && !isLoading}
+                outputs={cameraOutputs}
+                enableNativeZoomGesture={false}
+                onStarted={() => {
+                  setCameraInitialized(true);
+                }}
+                onStopped={() => {
+                  setCameraInitialized(false);
+                }}
+                onError={(error) => {
+                  console.error('Camera error:', error);
+                }}
+                exposure={1.2}
+              />
+              {currentCameraType === 'front' && (
+                <View style={StyleSheet.absoluteFillObject} pointerEvents="none">
+                  {/* Top Translucent White Overlay (Header) */}
+                  <View style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: overlayHeight,
+                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                    borderBottomWidth: 1,
+                    borderBottomColor: 'rgba(255, 255, 255, 0.8)',
+                  }} />
+
+                  {/* Bottom Translucent White Overlay (Footer) */}
+                  <View style={{
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    height: overlayHeight,
+                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                    borderTopWidth: 1,
+                    borderTopColor: 'rgba(255, 255, 255, 0.8)',
+                  }} />
+                </View>
+              )}
+            </View>
           ) : (
             <View style={styles.placeholderContainer}>
               {isInitializing && (
@@ -545,19 +638,15 @@ const CaptureImageWithoutEdit = React.memo(
               {isFaceCentered && (
                 <View style={styles.confidenceContainer}>
                   <Text style={styles.confidenceText}>
-                    Confidence: {Math.round(antiSpoofConfidence * 100)}%
+                    Confidence: {confidencePercent}%
                   </Text>
                   <View style={styles.confidenceBar}>
                     <View
                       style={[
                         styles.confidenceProgress,
                         {
-                          width: `${antiSpoofConfidence * 100}%`,
-                          backgroundColor: antiSpoofConfidence * 100 > 40
-                            ? Global.AppTheme.success
-                            : antiSpoofConfidence * 100 > 20
-                              ? Global.AppTheme.warning
-                              : Global.AppTheme.error
+                          width: `${confidencePercent}%`,
+                          backgroundColor: confidenceColor,
                         }
                       ]}
                     />
@@ -670,7 +759,6 @@ const styles = StyleSheet.create({
     color: 'white',
     fontWeight: 'bold',
   },
-  // Live Indicator
   liveIndicator: {
     position: 'absolute',
     top: 20,
@@ -704,7 +792,6 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: 'bold',
   },
-  // Status Overview
   statusOverview: {
     position: 'absolute',
     bottom: 20,
@@ -758,7 +845,6 @@ const styles = StyleSheet.create({
     height: '100%',
     borderRadius: 2,
   },
-  // Existing styles
   blinkProgressContainer: {
     flexDirection: 'row',
     marginVertical: 8,