integrated react webcam

client/package.json

@@ -13,6 +13,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "react-webcam": "^7.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx

@@ -1,17 +1,44 @@
-import React from 'react'
+/* eslint-disable multiline-ternary */
+import React, { useState } from 'react'
+import Webcam from 'react-webcam'
+import { useNavigate } from 'react-router-dom'
 import Header from '../../../components/Header/Header'
-import CardScanner from '../../../components/Card/CardScanner'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import styles from './PhotoCapture.module.css'
 import { Button, Grid, Typography } from '@mui/material'
 
 const PhotoCapture = () => {
+  const [photo, setPhoto] = useState()
+
+  const navigate = useNavigate()
+
+  const webcamRef = React.useRef(null)
+
+  const capture = React.useCallback(() => {
+    const imageSrc = webcamRef.current.getScreenshot()
+    setPhoto(imageSrc)
+  })
+
   return (
     <>
       <Header subheading="Enrollment" />
       <div className={styles.card__container}>
-        <CardScanner
-          image={`${process.env.PUBLIC_URL}/assets/images/capture.svg`}
-        />
+        {photo === '' ? (
+          <Webcam
+            audio={false}
+            height={300}
+            ref={webcamRef}
+            screenshotFormat="image/jpeg"
+            width={500}
+            videoConstraints={{
+              height: 300,
+              width: 500,
+              facingMode: 'user'
+            }}
+          />
+        ) : (
+          <img src={photo} />
+        )}
       </div>
       <Grid container columnSpacing={10} justifyContent="center">
         <Grid item>
@@ -20,6 +47,10 @@ const PhotoCapture = () => {
             size="large"
             type="submit"
             variant="contained"
+            onClick={(e) => {
+              e.preventDefault()
+              capture()
+            }}
           >
             Capture
           </Button>
@@ -30,6 +61,10 @@ const PhotoCapture = () => {
             size="large"
             type="submit"
             variant="contained"
+            onClick={(e) => {
+              e.preventDefault()
+              setPhoto('')
+            }}
           >
             Reset
           </Button>
@@ -45,6 +80,7 @@ const PhotoCapture = () => {
           </Typography>
         </Grid>
       </div>
+      <SubmitButton onClick={() => navigate('/enrollment/documents')} />
     </>
   )
 }

client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css

@@ -1,5 +1,5 @@
 .card__container {
-    display: flex;
-    justify-content: center;
-  }
-  
+  display: flex;
+  justify-content: center;
+  margin: 10px;
+}

client/yarn.lock

@@ -7665,6 +7665,11 @@ react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-webcam@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/react-webcam/-/react-webcam-7.0.1.tgz#8249e1d621eb4bba7e3f52135f562439d0528df3"
+  integrity sha512-8E/Eb/7ksKwn5QdLn67tOR7+TdP9BZdu6E5/DSt20v8yfW/s0VGBigE6VA7R4278mBuBUowovAB3DkCfVmSPvA==
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"