@trustchex/react-native-sdk 1.161.0

package/src/Screens/Dynamic/LivenessDetectionScreen.tsx

@@ -0,0 +1,699 @@
+import Svg, { Rect as SvgRect, Circle, Mask } from 'react-native-svg';
+import { useNavigation } from '@react-navigation/native';
+import React, {
+  useState,
+  useReducer,
+  useContext,
+  useEffect,
+  useCallback,
+} from 'react';
+import {
+  Dimensions,
+  Text,
+  View,
+  StyleSheet,
+  Platform,
+  Vibration,
+} from 'react-native';
+import NativeCircularProgress from '../../Shared/Components/NativeCircularProgress';
+import { Camera } from 'react-native-vision-camera';
+import type { Face } from '../../Shared/VisionCameraPlugins/FaceDetector';
+import FaceCamera from '../../Shared/Components/FaceCamera';
+import NavigationManager, {
+  type NavigationManagerRef,
+} from '../../Shared/Components/NavigationManager';
+import AppContext from '../../Shared/Contexts/AppContext';
+import { contains, type Rect } from '../../Shared/Libs/contains';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'react-native-paper';
+import LottieView from 'lottie-react-native';
+import { speakWithDebounce } from '../../Shared/Libs/tts.utils';
+
+const { width: windowWidth, height: windowHeight } = Dimensions.get('window');
+
+const PREVIEW_SIZE = windowWidth * 0.8;
+const PREVIEW_RECT: Rect = {
+  minX: (windowWidth - PREVIEW_SIZE) / 2,
+  minY: (windowHeight - PREVIEW_SIZE) / 2,
+  width: PREVIEW_SIZE,
+  height: PREVIEW_SIZE,
+};
+const PREVIEW_EDGE_OFFSET = 10;
+const TURN_ANGLE_LIMIT = 15;
+const LOOK_STRAIGHT_ANGLE_LIMIT = 10;
+
+type StateType = {
+  brightnessLow: boolean;
+  faceDetected: boolean;
+  multipleFacesDetected: boolean;
+  faceTooBig: boolean;
+  instructionList: string[];
+  previousInstruction: string;
+  currentInstruction: string;
+  progressFill: number;
+  processComplete: boolean;
+  videoPath: string;
+};
+
+interface Actions {
+  BRIGHTNESS_LOW: boolean;
+  FACE_DETECTED: boolean;
+  MULTIPLE_FACES_DETECTED: boolean;
+  FACE_TOO_BIG: boolean;
+  VIDEO_RECORDED: string;
+  NEXT_INSTRUCTION: string;
+}
+
+interface Action<T extends keyof Actions> {
+  type: T;
+  payload: Actions[T];
+}
+
+type PossibleActions = {
+  [K in keyof Actions]: Action<K>;
+}[keyof Actions];
+
+const LivenessDetectionScreen = () => {
+  const [camera, setCamera] = useState<Camera | null>(null);
+  const navigation = useNavigation();
+  const appContext = useContext(AppContext);
+  const navigationManagerRef = React.useRef<NavigationManagerRef>(null);
+  const { t } = useTranslation();
+  const [isRecording, setIsRecording] = useState(false);
+  const [initialState, setInitialState] = useState<StateType>({
+    brightnessLow: false,
+    faceDetected: false,
+    multipleFacesDetected: false,
+    faceTooBig: false,
+    instructionList: [],
+    previousInstruction: '',
+    currentInstruction: '',
+    progressFill: 0,
+    processComplete: false,
+    videoPath: '',
+  });
+  const [instructions, _setInstructions] = useState<{
+    [type: string]: Record<string, any> & {
+      instruction: string;
+      photo?: string;
+    };
+  }>({
+    START: { instruction: t('livenessDetectionScreen.start') },
+    SMILE: {
+      instruction: t('livenessDetectionScreen.smile'),
+      minProbability: 0.7,
+    },
+    LOOK_STRAIGHT_AND_BLINK: {
+      instruction: t('livenessDetectionScreen.lookStraightAndBlink'),
+      minProbability: 0.7,
+      eyesClosed: false,
+      maxAngle: LOOK_STRAIGHT_ANGLE_LIMIT,
+      minAngle: -LOOK_STRAIGHT_ANGLE_LIMIT,
+    },
+    TURN_HEAD_LEFT: {
+      instruction: t('livenessDetectionScreen.turnHeadLeft'),
+      minAngle: TURN_ANGLE_LIMIT,
+      maxAngle: -TURN_ANGLE_LIMIT,
+    },
+    TURN_HEAD_RIGHT: {
+      instruction: t('livenessDetectionScreen.turnHeadRight'),
+      minAngle: -TURN_ANGLE_LIMIT,
+      maxAngle: TURN_ANGLE_LIMIT,
+    },
+    LOOK_UP: {
+      instruction: t('livenessDetectionScreen.lookUp'),
+      minAngle: TURN_ANGLE_LIMIT,
+    },
+    FINISH: { instruction: t('livenessDetectionScreen.finish') },
+  });
+  const [instructionList, setInstructionList] = useState<string[]>([]);
+  const [hasGuideShown, setHasGuideShown] = useState(false);
+
+  useEffect(() => {
+    const il = Object.keys(instructions)
+      .filter(
+        (instruction) =>
+          !['START', 'FINISH'].includes(instruction) &&
+          // Look straight and blink is always included
+          (instruction === 'LOOK_STRAIGHT_AND_BLINK' ||
+            !appContext.currentWorkflowStep?.data
+              ?.allowedLivenessInstructionTypes ||
+            appContext.currentWorkflowStep?.data
+              ?.allowedLivenessInstructionTypes.length === 0 ||
+            appContext.currentWorkflowStep?.data?.allowedLivenessInstructionTypes.includes(
+              instruction as any
+            ))
+      )
+      .sort(() => Math.random() - 0.5);
+    il.unshift('START');
+    il.push('FINISH');
+    setInstructionList(il);
+    setInitialState({
+      brightnessLow: false,
+      faceDetected: false,
+      multipleFacesDetected: false,
+      faceTooBig: false,
+      instructionList: il,
+      previousInstruction: '',
+      currentInstruction: 'START',
+      progressFill: 0,
+      processComplete: false,
+      videoPath: '',
+    });
+  }, [
+    instructions,
+    appContext.currentWorkflowStep?.data?.allowedLivenessInstructionTypes,
+  ]);
+
+  const startRecording = useCallback(async () => {
+    if (isRecording) {
+      try {
+        await camera?.cancelRecording();
+        setIsRecording(false);
+      } catch (e) {
+        // Ignore error
+      }
+    }
+    setTimeout(() => {
+      camera?.startRecording({
+        fileType: 'mp4',
+        videoCodec: 'h265',
+        onRecordingError() {
+          setIsRecording(false);
+        },
+        onRecordingFinished(video) {
+          setTimeout(() => {
+            dispatch({ type: 'VIDEO_RECORDED', payload: video.path });
+            setIsRecording(false);
+          }, 500);
+        },
+      });
+    }, 500);
+    setIsRecording(true);
+  }, [camera, isRecording]);
+
+  const stopRecording = useCallback(async () => {
+    try {
+      await camera?.stopRecording();
+      setIsRecording(false);
+    } catch (e) {
+      // Ignore error
+    }
+  }, [camera]);
+
+  const areEyesOpen = (face: Face) =>
+    face.leftEyeOpenProbability >= 0.8 && face.rightEyeOpenProbability >= 0.8;
+
+  const instructionReducer = (
+    state: StateType,
+    action: PossibleActions
+  ): StateType => {
+    switch (action.type) {
+      case 'BRIGHTNESS_LOW':
+        if (action.payload) {
+          return {
+            ...state,
+            brightnessLow: action.payload,
+            progressFill: 0,
+          };
+        }
+        return initialState;
+
+      case 'MULTIPLE_FACES_DETECTED':
+        if (action.payload) {
+          return {
+            ...state,
+            multipleFacesDetected: action.payload,
+            progressFill: 0,
+          };
+        }
+        return initialState;
+
+      case 'FACE_TOO_BIG':
+        if (action.payload) {
+          return { ...state, faceTooBig: action.payload };
+        }
+        return initialState;
+
+      case 'FACE_DETECTED':
+        if (action.payload) {
+          return {
+            ...state,
+            faceDetected: action.payload,
+            progressFill: 100 / (state.instructionList.length + 1),
+          };
+        }
+        return initialState;
+
+      case 'VIDEO_RECORDED':
+        return { ...state, videoPath: action.payload };
+
+      case 'NEXT_INSTRUCTION':
+        if (action.payload === 'FINISH') {
+          return {
+            ...state,
+            processComplete: true,
+            progressFill: 100,
+          };
+        }
+
+        const nextInstructionIndex =
+          instructionList.findIndex(
+            (instruction) => instruction === action.payload
+          ) + 1;
+        const nextInstruction = state.instructionList[nextInstructionIndex];
+        const progressMultiplier = nextInstructionIndex + 1;
+        const newProgressFill =
+          (100 / (state.instructionList.length + 1)) * progressMultiplier;
+
+        return {
+          ...state,
+          currentInstruction: nextInstruction,
+          progressFill: newProgressFill,
+        };
+      default:
+        throw new Error('Unexpected action type.');
+    }
+  };
+
+  const [state, dispatch] = useReducer(instructionReducer, initialState);
+
+  const onFacesDetected = useCallback(
+    async (faces: Face[], image: string, isImageBright: boolean) => {
+      const face = faces[0];
+      const faceRectSmaller: Rect = {
+        width: face.bounds.width - PREVIEW_EDGE_OFFSET,
+        height: face.bounds.height - PREVIEW_EDGE_OFFSET,
+        minY: face.bounds.y + PREVIEW_EDGE_OFFSET / 2,
+        minX: face.bounds.x + PREVIEW_EDGE_OFFSET / 2,
+      };
+      const previewContainsFace = contains({
+        outside: PREVIEW_RECT,
+        inside: faceRectSmaller,
+      });
+      const multipleFacesDetected = faces.length > 1;
+
+      if (!isImageBright) {
+        dispatch({ type: 'BRIGHTNESS_LOW', payload: true });
+        return;
+      }
+
+      if (!previewContainsFace) {
+        dispatch({ type: 'FACE_DETECTED', payload: false });
+        return;
+      }
+
+      if (state.brightnessLow) {
+        dispatch({ type: 'BRIGHTNESS_LOW', payload: false });
+      }
+
+      if (!state.multipleFacesDetected && multipleFacesDetected) {
+        dispatch({ type: 'MULTIPLE_FACES_DETECTED', payload: true });
+        return;
+      }
+
+      if (state.multipleFacesDetected && !multipleFacesDetected) {
+        dispatch({ type: 'MULTIPLE_FACES_DETECTED', payload: false });
+      }
+
+      if (!state.faceDetected) {
+        if (
+          face.bounds.width >= PREVIEW_SIZE &&
+          face.bounds.height >= PREVIEW_SIZE
+        ) {
+          dispatch({ type: 'FACE_TOO_BIG', payload: true });
+          return;
+        }
+
+        if (state.faceTooBig) {
+          dispatch({ type: 'FACE_TOO_BIG', payload: false });
+          return;
+        }
+      }
+
+      if (!state.faceDetected) {
+        dispatch({ type: 'FACE_DETECTED', payload: true });
+      }
+
+      if (state.currentInstruction !== state.previousInstruction) {
+        state.previousInstruction = state.currentInstruction;
+        Vibration.vibrate(100);
+        if (appContext.currentWorkflowStep?.data?.voiceGuidanceActive) {
+          speakWithDebounce(
+            instructions[state.currentInstruction]?.instruction ?? ''
+          );
+        }
+      }
+
+      switch (state.currentInstruction) {
+        case 'START':
+          if (state.faceDetected) {
+            await startRecording();
+            dispatch({ type: 'NEXT_INSTRUCTION', payload: 'START' });
+          }
+          return;
+        case 'LOOK_STRAIGHT_AND_BLINK':
+          if (
+            instructions.LOOK_STRAIGHT_AND_BLINK.minAngle < face.yawAngle &&
+            face.yawAngle < instructions.LOOK_STRAIGHT_AND_BLINK.maxAngle &&
+            instructions.LOOK_STRAIGHT_AND_BLINK.minAngle < face.pitchAngle &&
+            face.pitchAngle < instructions.LOOK_STRAIGHT_AND_BLINK.maxAngle
+          ) {
+            if (instructions.LOOK_STRAIGHT_AND_BLINK.eyesClosed) {
+              if (areEyesOpen(face)) {
+                instructions.LOOK_STRAIGHT_AND_BLINK.eyesClosed = false;
+                instructions.LOOK_STRAIGHT_AND_BLINK.photo = image;
+                dispatch({
+                  type: 'NEXT_INSTRUCTION',
+                  payload: 'LOOK_STRAIGHT_AND_BLINK',
+                });
+              }
+            } else if (!areEyesOpen(face)) {
+              instructions.LOOK_STRAIGHT_AND_BLINK.eyesClosed = true;
+            }
+          }
+          return;
+        case 'SMILE':
+          if (face.smilingProbability >= instructions.SMILE.minProbability) {
+            instructions.SMILE.photo = image;
+            dispatch({ type: 'NEXT_INSTRUCTION', payload: 'SMILE' });
+          }
+          return;
+        case 'LOOK_UP':
+          if (
+            face.pitchAngle >= instructions.LOOK_UP.minAngle &&
+            areEyesOpen(face)
+          ) {
+            instructions.LOOK_UP.photo = image;
+            dispatch({ type: 'NEXT_INSTRUCTION', payload: 'LOOK_UP' });
+          }
+          return;
+        case 'TURN_HEAD_LEFT':
+          if (Platform.OS === 'ios') {
+            if (
+              face.yawAngle <= instructions.TURN_HEAD_LEFT.maxAngle &&
+              areEyesOpen(face)
+            ) {
+              instructions.TURN_HEAD_LEFT.photo = image;
+              dispatch({ type: 'NEXT_INSTRUCTION', payload: 'TURN_HEAD_LEFT' });
+            }
+          } else {
+            if (
+              face.yawAngle >= instructions.TURN_HEAD_LEFT.minAngle &&
+              areEyesOpen(face)
+            ) {
+              instructions.TURN_HEAD_LEFT.photo = image;
+              dispatch({ type: 'NEXT_INSTRUCTION', payload: 'TURN_HEAD_LEFT' });
+            }
+          }
+          return;
+        case 'TURN_HEAD_RIGHT':
+          if (Platform.OS === 'ios') {
+            if (
+              face.yawAngle >= instructions.TURN_HEAD_RIGHT.maxAngle &&
+              areEyesOpen(face)
+            ) {
+              instructions.TURN_HEAD_RIGHT.photo = image;
+              dispatch({
+                type: 'NEXT_INSTRUCTION',
+                payload: 'TURN_HEAD_RIGHT',
+              });
+            }
+          } else {
+            if (
+              face.yawAngle <= instructions.TURN_HEAD_RIGHT.minAngle &&
+              areEyesOpen(face)
+            ) {
+              instructions.TURN_HEAD_RIGHT.photo = image;
+              dispatch({
+                type: 'NEXT_INSTRUCTION',
+                payload: 'TURN_HEAD_RIGHT',
+              });
+            }
+          }
+          return;
+        case 'FINISH':
+          await stopRecording();
+          dispatch({ type: 'NEXT_INSTRUCTION', payload: 'FINISH' });
+          return;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      state.brightnessLow,
+      state.faceDetected,
+      state.multipleFacesDetected,
+      state.faceTooBig,
+      state.currentInstruction,
+      instructions.LOOK_STRAIGHT_AND_BLINK,
+      instructions.SMILE,
+      instructions.LOOK_UP,
+      instructions.TURN_HEAD_LEFT,
+      instructions.TURN_HEAD_RIGHT,
+      stopRecording,
+      startRecording,
+    ]
+  );
+
+  useEffect(() => {
+    if (
+      state.processComplete &&
+      !!state.videoPath &&
+      !!state.instructionList &&
+      !!appContext.identificationInfo &&
+      !!navigation &&
+      !!instructions
+    ) {
+      appContext.identificationInfo.livenessDetection = {
+        instructions: [
+          ...state.instructionList.map((instruction) => ({
+            instruction: instruction,
+            photo: instructions[instruction].photo ?? '',
+          })),
+        ],
+        videoPath: state.videoPath,
+      };
+      navigationManagerRef.current?.navigateToNextStep();
+    }
+  }, [
+    state.processComplete,
+    state.videoPath,
+    state.instructionList,
+    appContext.identificationInfo,
+    navigation,
+    instructions,
+  ]);
+
+  return (
+    <>
+      {!hasGuideShown ? (
+        <View style={styles.guide}>
+          <LottieView
+            source={require('../../Shared/Animations/face-scan.json')}
+            style={styles.guideAnimation}
+            loop={true}
+            autoPlay
+          />
+          <Text style={styles.guideHeader}>
+            {t('livenessDetectionScreen.guideHeader')}
+          </Text>
+          <View style={styles.guidePoints}>
+            <Text style={styles.guideText}>
+              {t('livenessDetectionScreen.guideText')}
+            </Text>
+            <Text style={styles.guideText}>
+              • {t('livenessDetectionScreen.guidePoint1')}
+            </Text>
+            <Text style={styles.guideText}>
+              • {t('livenessDetectionScreen.guidePoint2')}
+            </Text>
+            <Text style={styles.guideText}>
+              • {t('livenessDetectionScreen.guidePoint3')}
+            </Text>
+            <Text style={styles.guideText}>
+              • {t('livenessDetectionScreen.guidePoint4')}
+            </Text>
+          </View>
+          <Button
+            mode="contained"
+            onPress={() => {
+              setHasGuideShown(true);
+            }}
+          >
+            {t('general.letsGo')}
+          </Button>
+        </View>
+      ) : (
+        <>
+          <FaceCamera
+            onFacesDetected={onFacesDetected}
+            onCameraInitialized={setCamera}
+          />
+          <NativeCircularProgress
+            style={styles.circularProgress}
+            size={PREVIEW_SIZE}
+            width={10}
+            backgroundWidth={5}
+            fill={state.progressFill}
+            tintColor={appContext.branding.primaryColor}
+            backgroundColor="white"
+          />
+          {state.brightnessLow && (
+            <LottieView
+              source={require('../../Shared/Animations/light.json')}
+              style={styles.animation}
+              loop={true}
+              autoPlay
+            />
+          )}
+          <Svg style={styles.svgMask}>
+            <Mask id="hole-mask">
+              <SvgRect width="100%" height="100%" fill="white" />
+              <Circle cx="50%" cy="50%" r="25%" fill="black" />
+            </Mask>
+
+            <SvgRect
+              width="100%"
+              height="100%"
+              fill="white"
+              mask="url(#hole-mask)"
+            />
+          </Svg>
+          <View style={styles.instructionsContainerTop}>
+            <Text style={styles.instructions}>
+              {(() => {
+                if (state.brightnessLow) {
+                  return t('livenessDetectionScreen.brightnessLow');
+                } else if (state.multipleFacesDetected) {
+                  return t('livenessDetectionScreen.multipleFacesDetected');
+                } else if (state.faceTooBig) {
+                  return t('livenessDetectionScreen.faceTooBig');
+                } else if (state.faceDetected) {
+                  return t('livenessDetectionScreen.followInstructions');
+                } else {
+                  return t('livenessDetectionScreen.placeFaceInsideCircle');
+                }
+              })()}
+            </Text>
+          </View>
+          <View style={styles.instructionsContainerBottom}>
+            <Text style={styles.action}>
+              {state.faceDetected &&
+                !state.faceTooBig &&
+                !state.multipleFacesDetected &&
+                !state.brightnessLow &&
+                instructions[state.currentInstruction]?.instruction}
+            </Text>
+          </View>
+        </>
+      )}
+      <View style={styles.footer}>
+        <NavigationManager ref={navigationManagerRef} />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  circularProgress: {
+    width: PREVIEW_SIZE,
+    height: PREVIEW_SIZE,
+    marginTop: PREVIEW_RECT.minY,
+    marginLeft: PREVIEW_RECT.minX,
+  },
+  animation: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    zIndex: 1,
+  },
+  svgMask: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    zIndex: 1,
+  },
+  instructionsContainerTop: {
+    flex: 1,
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    height: windowHeight / 4,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    zIndex: 1,
+    padding: 20,
+  },
+  instructionsContainerBottom: {
+    flex: 1,
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    height: windowHeight / 4,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    zIndex: 1,
+    padding: 20,
+    gap: 20,
+  },
+  instructions: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: 20,
+    color: 'black',
+  },
+  action: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: 'black',
+  },
+  footer: {
+    position: 'absolute',
+    flex: 0,
+    bottom: 0,
+    width: '100%',
+    zIndex: 1,
+  },
+  guide: {
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    gap: 10,
+    backgroundColor: 'white',
+  },
+  guideAnimation: {
+    width: 250,
+    height: 250,
+    alignSelf: 'center',
+  },
+  guideHeader: {
+    color: 'black',
+    fontSize: 18,
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  guidePoints: {
+    display: 'flex',
+    gap: 10,
+    padding: 10,
+  },
+  guideText: {
+    color: 'black',
+    fontSize: 14,
+  },
+});
+
+export default LivenessDetectionScreen;