MOSIP-34887 (#331)

* fix: handle camera is not plugged in mid-verification

Signed-off-by: bunsy-0900 <[email protected]>

* fix: fix camera icon not hiding

Signed-off-by: bunsy-0900 <[email protected]>

* fix: fix webcam icon still showing

Signed-off-by: bunsy-0900 <[email protected]>

* fix: revert deprecated changes

Signed-off-by: bunsy-0900 <[email protected]>

---------

Signed-off-by: bunsy-0900 <[email protected]>

signup-ui/src/pages/EkycVerificationPage/IdentityVerificationStatus/IdentityVerificationStatus.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useL2Hash } from "~hooks/useL2Hash";
@@ -22,6 +23,12 @@ export const IdentityVerificationStatus = ({
   const retriableErrorCodes =
     settings.configs["status.request.retry.error.codes"].split(",");
 
+  useEffect(() => {
+    if (window.videoLocalStream) {
+      window.videoLocalStream.getTracks().forEach(track => track.stop());
+    }
+  }, [])
+
   // isError occurs when the query encounters a network error or the request limit attempts is reached
   const {
     data: identityVerificationStatus,

signup-ui/src/pages/EkycVerificationPage/VerificationScreen/VerificationScreen.tsx

@@ -144,6 +144,35 @@ export const VerificationScreen = ({
     setStep(EkycVerificationStep.SlotCheckingScreen);
   };
 
+  const stopEkycVerificationProcess = useCallback(() => {
+    if (connected) {
+      unsubscribe();
+      client.deactivate();
+    }
+    setStep(EkycVerificationStep.IdentityVerificationStatus);
+  }, [])
+
+  useEffect(() => {
+    const checkWebcamInputSource = () => {
+      if (webcamRef && webcamRef.current) {
+        const webcamStreamState = (webcamRef.current as Webcam).stream?.active;
+        if (webcamStreamState === false) {
+          stopEkycVerificationProcess();
+        }
+      }
+    }
+
+    // checking camera permission in every 1 second
+    const webcamInputSourceCheckInterval = setInterval(
+      checkWebcamInputSource,
+      1000
+    );
+
+    return () => {
+      clearInterval(webcamInputSourceCheckInterval);
+    };
+  }, []);
+
   // timer useEffect
   useEffect(() => {
     if (timer && timer > 0) {
@@ -444,6 +473,8 @@ export const VerificationScreen = ({
     };
   }, []);
 
+  const handleWebcamUserMediaError = (error: string | DOMException) => stopEkycVerificationProcess();
+
   return alertConfig !== null ? (
     <EkycStatusAlert config={alertConfig} />
   ) : (
@@ -479,6 +510,7 @@ export const VerificationScreen = ({
           }
           videoConstraints={videoConstraints}
           screenshotFormat="image/jpeg"
+          onUserMediaError={handleWebcamUserMediaError}
         />
       </div>
       {/* temporary button for socket connection */}

signup-ui/src/pages/EkycVerificationPage/VideoPreview/VideoPreview.tsx

@@ -58,6 +58,7 @@ export const VideoPreview = ({
    */
   const handleContinue = (e: any) => {
     e.preventDefault();
+    webcamRef.current = null;
     setStep(EkycVerificationStep.SlotCheckingScreen);
   };
 
@@ -78,23 +79,37 @@ export const VideoPreview = ({
   };
 
   useEffect(() => {
+    const cameraPermissionCheck = () => {
+      navigator.mediaDevices
+        .getUserMedia({ video: true })
+        .then(cameraPermissionAllowed)
+        .catch(cameraPermissionDenied);
+    };
+
     // checking camera permission in every 1 second
     const cameraPermissionCheckInterval = setInterval(
       cameraPermissionCheck,
       1000
     );
-    return () => clearInterval(cameraPermissionCheckInterval);
+
+    return () => {
+      clearInterval(cameraPermissionCheckInterval);
+      if (window.videoLocalStream) {
+        window.videoLocalStream.getTracks().forEach(track => track.stop());
+      }
+    };
   }, [permissionGranted]);
 
   // if camera permission granted then set the state
-  const cameraPermissionAllowed = (stream: MediaStream) => {
+  const cameraPermissionAllowed = useCallback((stream: MediaStream) => {
+    window.videoLocalStream = stream;
     if (!permissionGranted) {
       setPermissionGranted(true);
     }
-  };
+  }, []);
 
   // if camera permission denied then set the state
-  const cameraPermissionDenied = (error: any) => {
+  const cameraPermissionDenied = useCallback((error: any) => {
     if (permissionGranted) {
       setPermissionGranted(false);
       if (error.name === "NotReadableError") {
@@ -111,16 +126,7 @@ export const VideoPreview = ({
         });
       }
     }
-  };
-
-  // check the camera permission, if camera permission granted then set the state
-  // it will work for chrome & firefox as well
-  const cameraPermissionCheck = () => {
-    navigator.mediaDevices
-      .getUserMedia({ video: true })
-      .then(cameraPermissionAllowed)
-      .catch(cameraPermissionDenied);
-  };
+  }, []);
 
   // video preview div, it will show the video preview if camera permission granted
   // otherwise it will show a card asking for camera permission

signup-ui/src/pages/EkycVerificationPage/useEkycVerificationStore.tsx

@@ -2,7 +2,12 @@ import { isEqual } from "lodash";
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 
-import { Error, KycProvider, KycProviderDetail, SignupHashCode } from "~typings/types";
+import {
+  Error,
+  KycProvider,
+  KycProviderDetail,
+  SignupHashCode,
+} from "~typings/types";
 
 export enum EkycVerificationStep {
   VerificationSteps,
@@ -157,7 +162,8 @@ export const errorBannerMessageSelector = (
 
 export const setErrorBannerMessageSelector = (
   state: EkycVerificationStore
-): EkycVerificationStore["setErrorBannerMessage"] => state.setErrorBannerMessage;
+): EkycVerificationStore["setErrorBannerMessage"] =>
+  state.setErrorBannerMessage;
 
 export const slotIdSelector = (
   state: EkycVerificationStore

signup-ui/src/react-app-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="react-scripts" />
+
+declare global {
+    interface Window {
+        videoLocalStream: MediaStream
+    }
+}
+
+export {}