@trustchex/react-native-sdk 1.161.0

package/src/Shared/Components/FaceCamera.tsx

@@ -0,0 +1,267 @@
+import { useIsFocused } from '@react-navigation/native';
+import { useKeepAwake } from '../Libs/native-keep-awake.utils';
+import React, { useEffect, useState } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Platform,
+  Linking,
+  Dimensions,
+} from 'react-native';
+import {
+  useCameraDevice,
+  useCameraPermission,
+  Camera,
+  useFrameProcessor,
+  useCameraFormat,
+  runAtTargetFps,
+  type Frame,
+  useMicrophonePermission,
+  runAsync,
+} from 'react-native-vision-camera';
+import {
+  type Face,
+  useFaceDetector,
+} from '../VisionCameraPlugins/FaceDetector';
+import { Worklets, useSharedValue } from 'react-native-worklets-core';
+import { crop } from '../VisionCameraPlugins/Cropper';
+import { isFrameBright } from '../Libs/camera.utils';
+import { useTranslation } from 'react-i18next';
+import { ActivityIndicator, Button } from 'react-native-paper';
+
+export type FaceCameraProps = {
+  onFacesDetected: (
+    faces: Face[],
+    image: string,
+    isImageBright: boolean
+  ) => void;
+  onCameraInitialized: (camera: Camera) => void;
+};
+
+const VIDEO_WIDTH = 1280;
+const VIDEO_HEIGHT = 720;
+
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+
+const FaceCamera = ({
+  onFacesDetected,
+  onCameraInitialized,
+}: FaceCameraProps) => {
+  useKeepAwake();
+  const cameraPermission = useCameraPermission();
+  const microphonePermission = useMicrophonePermission();
+  const [permissionsRequested, setPermissionsRequested] = useState(false);
+  const cameraRef = React.useRef<Camera | null>(null);
+  const isFocused = useIsFocused();
+  const [isActive, setIsActive] = useState(false);
+  const device = useCameraDevice('front');
+  const format = useCameraFormat(device, [
+    {
+      videoResolution: { width: VIDEO_WIDTH, height: VIDEO_HEIGHT },
+      iso: 'max',
+      photoHdr: false,
+      videoHdr: false,
+      fps: 30,
+    },
+  ]);
+  const isCameraInitialized = useSharedValue(false);
+  const { detectFaces } = useFaceDetector({
+    contourMode: 'none',
+    landmarkMode: 'none',
+    classificationMode: 'all',
+    performanceMode: 'accurate',
+    trackingEnabled: false,
+    autoScale: true,
+    windowWidth: windowWidth,
+    windowHeight: windowHeight,
+  });
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    const requestPermissions = async () => {
+      if (!cameraPermission.hasPermission) {
+        await cameraPermission.requestPermission();
+      }
+      if (!microphonePermission.hasPermission) {
+        await microphonePermission.requestPermission();
+      }
+      setPermissionsRequested(true);
+    };
+    requestPermissions();
+  }, [cameraPermission, microphonePermission]);
+
+  const handleFaces = Worklets.createRunOnJS(
+    (faces: Face[], image: string, isBright: boolean) => {
+      if (faces.length > 0) {
+        onFacesDetected(faces, image, isBright);
+      }
+    }
+  );
+
+  useEffect(() => {
+    if (!!device && !!format && isFocused) {
+      setIsActive(true);
+    } else {
+      setIsActive(false);
+    }
+
+    return () => {
+      setIsActive(false);
+    };
+  }, [device, format, isFocused]);
+
+  const handleWorklet = (frame: Frame) => {
+    'worklet';
+    try {
+      const isBright = isFrameBright(frame);
+
+      const image = crop(frame, {
+        cropRegion: {
+          top: 0,
+          left: 0,
+          width: 100,
+          height: 100,
+        },
+        includeImageBase64: true,
+        saveAsFile: false,
+      });
+
+      if (image && image.base64) {
+        const faces = detectFaces(frame);
+        handleFaces(faces, image.base64, isBright);
+      }
+    } catch (error) {
+      console.error('Face detection error:', error);
+    }
+  };
+
+  const frameProcessor = useFrameProcessor(
+    (frame) => {
+      'worklet';
+      if (!isCameraInitialized.value) {
+        return;
+      }
+      // iOS: Run at target 6 FPS using runAtTargetFps
+      if (Platform.OS === 'ios') {
+        runAtTargetFps(6, () => {
+          'worklet';
+          handleWorklet(frame);
+        });
+      } else {
+        // Android: Run async without throttling
+        runAsync(frame, () => {
+          'worklet';
+          handleWorklet(frame);
+        });
+      }
+    },
+    [handleFaces, isCameraInitialized]
+  );
+
+  if (!permissionsRequested) {
+    return (
+      <View style={styles.permissionContainer}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  if (!cameraPermission.hasPermission) {
+    return (
+      <View style={styles.permissionContainer}>
+        <Text style={styles.permissionText}>
+          {t('general.noCameraPermissionGiven')}
+        </Text>
+        <Button
+          mode="contained"
+          onPress={() => {
+            Linking.openSettings();
+          }}
+        >
+          {t('general.openSettings')}
+        </Button>
+      </View>
+    );
+  }
+
+  if (!microphonePermission.hasPermission) {
+    return (
+      <View style={styles.permissionContainer}>
+        <Text style={styles.permissionText}>
+          {t('general.noMicrophonePermissionGiven')}
+        </Text>
+        <Button
+          mode="contained"
+          onPress={() => {
+            Linking.openSettings();
+          }}
+        >
+          {t('general.openSettings')}
+        </Button>
+      </View>
+    );
+  }
+
+  if (device == null) {
+    return (
+      <View style={styles.permissionContainer}>
+        <Text style={styles.permissionText}>
+          {t('general.noCameraDetected')}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={StyleSheet.absoluteFill}>
+      <Camera
+        ref={cameraRef}
+        frameProcessor={frameProcessor}
+        style={StyleSheet.absoluteFill}
+        device={device}
+        format={format}
+        isActive={isActive}
+        video={true}
+        photo={false}
+        audio={true}
+        videoBitRate={'extra-low'}
+        fps={Math.max(format?.minFps ?? 0, 30)}
+        onInitialized={() => {
+          isCameraInitialized.value = true;
+          onCameraInitialized(cameraRef.current!);
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  permissionContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 100,
+    backgroundColor: 'white',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 20,
+    padding: 20,
+  },
+  permissionText: {
+    color: 'black',
+    fontSize: 20,
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+});
+
+export default FaceCamera;