[INJIMOB-1603]: fix camera blank screen issue (#1561)

Signed-off-by: adityankannan-tw <[email protected]> Co-authored-by: adityankannan-tw <[email protected]>
mosip · Jul 15, 2024 · 7a3c53e · 7a3c53e
1 parent 0b11e0a
commit 7a3c53e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 27 deletions.
diff --git a/components/FaceScanner/FaceCompare.tsx b/components/FaceScanner/FaceCompare.tsx
@@ -10,6 +10,7 @@ import testIDProps from '../../shared/commonUtil';
 const FaceCompare: React.FC<FaceCompareProps> = ({
   whichCamera,
   setCameraRef,
+  flipCamera,
   isCapturing,
   isVerifying,
   service,
@@ -53,7 +54,7 @@ const FaceCompare: React.FC<FaceCompareProps> = ({
               </Text>
             </Centered>
             <Centered>
-              <TouchableOpacity onPress={() => service.send('FLIP_CAMERA')}>
+              <TouchableOpacity onPress={flipCamera}>
                 {SvgImage.FlipCameraIcon()}
               </TouchableOpacity>
               <Text
@@ -74,6 +75,7 @@ export default FaceCompare;
 interface FaceCompareProps {
   whichCamera: CameraType;
   setCameraRef: (node: Camera) => void;
+  flipCamera: () => void;
   isCapturing: boolean;
   isVerifying: boolean;
   service: any;

diff --git a/components/FaceScanner/FaceScanner.tsx b/components/FaceScanner/FaceScanner.tsx
@@ -15,7 +15,6 @@ import {
   selectIsValid,
   selectIsPermissionDenied,
   selectIsScanning,
-  selectWhichCamera,
   createFaceScannerMachine,
   selectIsInvalid,
   selectIsCapturing,
@@ -45,7 +44,7 @@ export const FaceScanner: React.FC<FaceScannerProps> = props => {
   const machine = useRef(createFaceScannerMachine(props.vcImage));
   const service = useInterpret(machine.current);
 
-  const whichCamera = useSelector(service, selectWhichCamera);
+  const [cameraType, setCameraType] = useState(Camera.Constants.Type.front);
   const cameraRef = useSelector(service, selectCameraRef);
 
   const isPermissionDenied = useSelector(service, selectIsPermissionDenied);
@@ -77,6 +76,14 @@ export const FaceScanner: React.FC<FaceScannerProps> = props => {
     [isScanning],
   );
 
+  const flipCamera = () => {
+    setCameraType(prevType =>
+      prevType === Camera.Constants.Type.front
+        ? Camera.Constants.Type.back
+        : Camera.Constants.Type.front,
+    );
+  };
+
   function handleOnCancel() {
     props.onCancel();
   }
@@ -177,7 +184,7 @@ export const FaceScanner: React.FC<FaceScannerProps> = props => {
       <LivenessDetection
         screenColor={screenColor}
         infoText={infoText}
-        whichCamera={whichCamera}
+        whichCamera={cameraType}
         setCameraRef={setCameraRef}
         handleFacesDetected={handleFacesDetected}
         faceDetectorConfig={faceDetectorConfig}
@@ -190,8 +197,9 @@ export const FaceScanner: React.FC<FaceScannerProps> = props => {
   } else {
     return (
       <FaceCompare
-        whichCamera={whichCamera}
+        whichCamera={cameraType}
         setCameraRef={setCameraRef}
+        flipCamera={flipCamera}
         isCapturing={isCapturing}
         isVerifying={isVerifying}
         service={service}

diff --git a/machines/faceScanner.ts b/machines/faceScanner.ts
@@ -1,5 +1,5 @@
 import {Camera, CameraCapturedPicture, PermissionResponse} from 'expo-camera';
-import {CameraType, Face, ImageType} from 'expo-camera/build/Camera.types';
+import {ImageType} from 'expo-camera/build/Camera.types';
 import {Linking} from 'react-native';
 import {assign, EventFrom, StateFrom} from 'xstate';
 import {createModel} from 'xstate/lib/model';
@@ -13,14 +13,12 @@ const model = createModel(
       minWidth: 280,
       minHeight: 280,
     },
-    whichCamera: Camera.Constants.Type.front as CameraType,
     capturedImage: {} as CameraCapturedPicture,
     captureError: '',
   },
   {
     events: {
       READY: (cameraRef: Camera) => ({cameraRef}),
-      FLIP_CAMERA: () => ({}),
       CAPTURE: () => ({}),
       DENIED: (response: PermissionResponse) => ({response}),
       GRANTED: () => ({}),
@@ -32,11 +30,6 @@ const model = createModel(
 
 export const FaceScannerEvents = model.events;
 
-export interface FaceScanResult {
-  metadata: Face;
-  image: CameraCapturedPicture;
-}
-
 export const createFaceScannerMachine = (vcImage: string) =>
   /** @xstate-layout N4IgpgJg5mDOIC5QDMCGBjMBldqB2eYATgHQCWeZALiegBZjoDWFUACsQLZmyxkD2eAMQARAKIA5AJJiRiUAAd+fKgLzyQAD0QBaAIwAmAyQMBWAJwBmABzWADHoAslywfOOANCACeu0wHYANhJ-R389SzC3QJjLAF84rzRMHHxCUgpqWgZmVg4ibl41IQBxACUAQQkAFVkNJRU1DW0EHUc7YxtA6z09c2sza3NzQK9fVtdjO0s7fqHrAL1-U0CEpIxsXAJickoaBS4ePkERMEpIIQB5NkkAfSwxauqpCRKseuVqJqQtXW6Q6aGbrWGymIzWMa6AwzEiOCwrZwzbp6QL+NYgZKbNI7TL7Q5FE5nMgXCpsNi3ABilwAwgBVB5yH4NL6CZpQ-zGazhQKmUwdSIGVGQiZGEjTWahIYGOx2azOdGY1LbDJ7EhEMAARwArnBVHh2PjjsJylVaozFJ9VKyfi03I4TJFHI4YqYFkEucL9JY9LC9GDxX7zAYQQqNkr0rssurtbq8obiuJpHUmZbvqAWkt7Y5g45ek7A4EnZ7JmLvQ4ZbKrI5zGjEhiw1sI7ihGUxBURABND6Na3pvzBfwclzWQs80y9CE+RBTexcwWy8eFlyhlKNnawRusEiYin8LV4CBCCCCMC7ABu-CYp8Va9IG7SW53e4PCAoF9wVrwAG07ABdbssuoNq6JY5gkN6gSGCiIJ6HYoTLMKrrGMssH2P4lj+HYzp6CuWLKiQ94EI+Gy7vuh7EEQ-CkAoAA2qBUMgVGcNuDbYnem76ixmCkS+b78B+ag-v+KY9kBfYINKpgkCMrpOg42auIEljCu0PqymEMyyoEBi5qsdY3mxBEcVAQgUgAMlI5LUhUACyYiVABn5sggegLCE-gDCCBiDjWIL+MKM6yhygQLiiiK4eG67GaZFTUmItziLU1Jmo5aa-BMIUkNpMzOOYQUYaMU4SWY0lBiM3qWK6qKOAkdZ4PwEBwBoBn4bi2SMCw+r5IURqpb26VtHYwQYUOSlWEYNieiF1ghGEhg1g47jLvprGtaqBwFEcainOcEB9WJA3mD6fIVQYfozNKLjFsGJCmDMIxLTl47xCtq6GW1G09WoJREPgVCQPtzmDfaGEYQMvJOpYSmehE-jSX6rmQdM7gRNYEW3pGNDRjqsB6gam0EgdzJOcBLkeSE0odIO-go3B-lFTorqWCYc2RA4yxBAY6PvXsgOk20MIjdCY2TJNDPIrN4TBpB0puOY3P4YRlCcU+ZF8+JjMzbYjhcjW7TmHyQTCjYM2yehMojjpKIKxGSvEZgEj8FQPF7SJgFA5l2aonK4Rgk43mmAF2awmVmGVa5zpwjbUUPvq6sDTY9rZVhoH5UbRVOHYpXRNmZgebMXOvXhTacKgMDUqgChUFq6quxaolA+0YoxAjbgjrYRjCuhUlmO0Osophzq1usb3KvHLRtKYIODsLoGi5O4w6Ms9rwYYyxGL0ha1XEQA */
   model.createMachine(
@@ -118,9 +111,6 @@ export const createFaceScannerMachine = (vcImage: string) =>
             CAPTURE: {
               target: 'capturing',
             },
-            FLIP_CAMERA: {
-              actions: 'flipWhichCamera',
-            },
           },
         },
         capturing: {
@@ -175,13 +165,6 @@ export const createFaceScannerMachine = (vcImage: string) =>
           capturedImage: (_context, event) => event.data,
         }),
 
-        flipWhichCamera: model.assign({
-          whichCamera: context =>
-            context.whichCamera === Camera.Constants.Type.front
-              ? Camera.Constants.Type.back
-              : Camera.Constants.Type.front,
-        }),
-
         setCaptureError: assign({
           captureError: '',
         }),
@@ -236,10 +219,6 @@ export const createFaceScannerMachine = (vcImage: string) =>
 
 type State = StateFrom<ReturnType<typeof createFaceScannerMachine>>;
 
-export function selectWhichCamera(state: State) {
-  return state.context.whichCamera;
-}
-
 export function selectCameraRef(state: State) {
   return state.context.cameraRef;
 }