diff --git a/signup-ui/src/pages/EkycVerificationPage/SlotChecking/SlotChecking.tsx b/signup-ui/src/pages/EkycVerificationPage/SlotChecking/SlotChecking.tsx index d67f3ea4..b35d5033 100644 --- a/signup-ui/src/pages/EkycVerificationPage/SlotChecking/SlotChecking.tsx +++ b/signup-ui/src/pages/EkycVerificationPage/SlotChecking/SlotChecking.tsx @@ -53,6 +53,11 @@ export const SlotChecking = ({ settings }: DefaultEkyVerificationProp) => { slotAvailabilityMutation.mutate(slotAvailabilityRequestDto, { onSuccess: ({ response, errors }) => { if (errors.length > 0) { + if (window.videoLocalStream) { + window.videoLocalStream + .getTracks() + .forEach((track) => track.stop()); + } setCriticalError(errors[0]); } else { setSlotId(response.slotId); diff --git a/signup-ui/src/pages/EkycVerificationPage/VideoPreview/VideoPreview.tsx b/signup-ui/src/pages/EkycVerificationPage/VideoPreview/VideoPreview.tsx index 7d0dd015..989f88ff 100644 --- a/signup-ui/src/pages/EkycVerificationPage/VideoPreview/VideoPreview.tsx +++ b/signup-ui/src/pages/EkycVerificationPage/VideoPreview/VideoPreview.tsx @@ -84,27 +84,24 @@ export const VideoPreview = ({ facingMode: "user", }; - useEffect(() => { - const cameraPermissionCheck = () => { - navigator.mediaDevices - .getUserMedia({ video: true }) - .then(cameraPermissionAllowed) - .catch(cameraPermissionDenied); - }; + const cameraPermissionCheck = () => { + navigator.mediaDevices + .getUserMedia({ video: true }) + .then(cameraPermissionAllowed) + .catch(cameraPermissionDenied); + }; - // checking camera permission in every 1 second - const cameraPermissionCheckInterval = setInterval( - cameraPermissionCheck, - 1000 - ); + navigator.permissions.query({ name: "camera" as PermissionName}).then((permissionStatus) => { - return () => { - clearInterval(cameraPermissionCheckInterval); - if (window.videoLocalStream) { - window.videoLocalStream.getTracks().forEach((track) => track.stop()); - } + // Listen for changes in the permission state + permissionStatus.onchange = () => { + cameraPermissionCheck(); }; - }, [permissionGranted]); + }); + + useEffect(() => { + cameraPermissionCheck(); + }, []); // if camera permission granted then set the state const cameraPermissionAllowed = useCallback((stream: MediaStream) => {