[INJIVER-173] Added feature to select camera

Signed-off-by: Shiva <[email protected]>

inji-verify/src/components/Home/VerificationSection/QrScanner.tsx

@@ -6,8 +6,8 @@ import {useAlertMessages} from "../../../pages/Home";
 
 let timer: NodeJS.Timeout;
 
-function QrScanner({setActiveStep, setQrData}: {
-    setQrData: (data: string) => void, setActiveStep: (activeStep: number) => void
+function QrScanner({setActiveStep, setQrData, deviceId}: {
+    setQrData: (data: string) => void, setActiveStep: (activeStep: number) => void, deviceId?: string
 }) {
     const [isCameraBlocked, setIsCameraBlocked] = useState(false);
 
@@ -65,7 +65,8 @@ function QrScanner({setActiveStep, setQrData}: {
                             "max": 1080
                         }
                     },
-                    delayBetweenScanSuccess: 100000 // Scan once
+                    delayBetweenScanSuccess: 100000, // Scan once
+                    deviceId
                 }}
                 styles={{
                     container: {

inji-verify/src/components/Home/VerificationSection/Verification.tsx

@@ -1,16 +1,21 @@
-import React from 'react';
-import {Box, Grid, Typography} from "@mui/material";
+import React, {useEffect, useState} from 'react';
+import {Autocomplete, Box, Grid, TextField, Typography, useMediaQuery} from "@mui/material";
 import scanQr from "../../../assets/scanner-ouline.svg";
 import Loader from "../../commons/Loader";
 import QrScanner from "./QrScanner";
 import {SetQrDataFunction} from "../../../types/function-types";
 import {useActiveStepContext} from "../../../pages/Home";
 import StyledButton from "./commons/StyledButton";
+import {useCameraSelectionHook} from "../../../hooks/useCameraSelectionHook";
 
 const Verification = ({setQrData}: {
     setQrData: SetQrDataFunction
 }) => {
     const {getActiveStep, setActiveStep} = useActiveStepContext();
+    const isTabletOrMobile = useMediaQuery("@media(max-width: 720px)");
+
+    const {videoInputOptions} = useCameraSelectionHook();
+    const [selectedDeviceId, setSelectedDeviceId] = useState<string | undefined>();
 
     return (
         <Grid container style={{padding: "78px 104px", textAlign: "center", display: "grid", placeContent: "center"}}>
@@ -41,6 +46,7 @@ const Verification = ({setQrData}: {
                             : (<QrScanner
                                 setActiveStep={setActiveStep}
                                 setQrData={setQrData}
+                                deviceId={selectedDeviceId}
                             />)
                     }
                 </Box>
@@ -52,6 +58,26 @@ const Verification = ({setQrData}: {
                     Back
                 </StyledButton>
             </Grid>
+            <Grid item xs={12}>
+                {isTabletOrMobile && (<Autocomplete
+                    id="grouped-demo"
+                    options={videoInputOptions.map(option => ({
+                        label: option.label,
+                        deviceId: option.deviceId
+                    }))}
+                    getOptionLabel={(option) => option.label}
+                    onChange={(event, value) => {
+                        setSelectedDeviceId(value?.deviceId);
+                    }}
+                    sx={{width: 350, margin: "18px auto"}}
+                    renderInput={(params) =>
+                        <TextField {...params}
+                                   style={{borderColor: '#FF7F00', borderRadius: 1000}}
+                                   label="Select Camera"
+                        />
+                    }
+                />)}
+            </Grid>
         </Grid>
     );
 }

inji-verify/src/hooks/useCameraSelectionHook.ts

@@ -0,0 +1,21 @@
+import {useEffect, useState} from "react";
+
+export const useCameraSelectionHook = () => {
+    const [videoInputOptions, setVideoInputOptions] = useState<MediaDeviceInfo[] | undefined>(undefined);
+    useEffect(() => {
+        navigator.mediaDevices.getUserMedia({video: true}).then(stream => {
+            navigator.mediaDevices
+                .enumerateDevices()
+                .then((devices) => {
+                    console.log("Devices: ", devices);
+                    setVideoInputOptions(devices.filter(device => device.kind === "videoinput"));
+                })
+                .catch((err) => {
+                    console.error(`${err.name}: ${err.message}`);
+                });
+        }).catch(error => {
+            console.log("Error occurred while getting the media devices")
+        })
+    }, []);
+    return {videoInputOptions: videoInputOptions ?? []};
+}