feat: Initial UI development with main functionalities

Project/Frontend/Web_App/src/sections/slToText/WebcamStreamCapture.module.css

+.videoContainer {
+  position: relative;
+  width: 50%;
+  padding-top: 56.25%; /* 16:9 aspect ratio */
+}
+
+.futuristicVideo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  background-color: black;
+  opacity: 0.8;
+  filter: blur(4px);
+  transition: opacity 0.5s, filter 0.5s;
+}
+
+.futuristicVideo:hover {
+  opacity: 1;
+  filter: blur(0);
+}

Project/Frontend/Web_App/src/sections/slToText/WebcamStreamCapture.tsx

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Webcam from 'react-webcam';
-import { Box, Button } from '@mui/material';
-
+import { Box, Button, Container, Grid, Stack } from '@mui/material';
+import StopIcon from '@mui/icons-material/Stop';
+import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
+import styles from './WebcamStreamCapture.module.css';
 const WebcamStreamCapture = () => {
   const webcamRef = React.useRef(null);
   const mediaRecorderRef = React.useRef(null);
@@ -10,7 +12,10 @@ const WebcamStreamCapture = () => {
   const [mediaBlobUrl, setMediaBlobUrl] = React.useState([]);
 
   const handleStartCaptureClick = React.useCallback(() => {
+    setRecordedChunks([]);
+    setMediaBlobUrl([]);
     setCapturing(true);
+
     mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
       mimeType: 'video/webm',
     });
@@ -27,8 +32,18 @@ const WebcamStreamCapture = () => {
     [setRecordedChunks]
   );
 
-  const handleStopCaptureClick = React.useCallback(() => {
+  const handleStopCaptureClick = React.useCallback(async () => {
     mediaRecorderRef.current.stop();
+
+    const blob = new Blob(recordedChunks, {
+      type: 'video/mp4',
+    });
+    const url = await URL.createObjectURL(blob);
+
+    console.log(url);
+
+    await setMediaBlobUrl(url);
+
     setCapturing(false);
   }, [mediaRecorderRef, webcamRef, setCapturing]);
 
@@ -49,20 +64,71 @@ const WebcamStreamCapture = () => {
     }
   }, [recordedChunks]);
 
+  // Styles for camera
+  const [width, setWidth] = useState(window.innerWidth);
+
+  const handleResize = () => {
+    setWidth(window.innerWidth);
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   return (
     <>
-      <Webcam audio={false} ref={webcamRef} />
-      {capturing ? (
-        <Button onClick={handleStopCaptureClick}>Stop Capture</Button>
-      ) : (
-        <Button onClick={handleStartCaptureClick}>Start Capture</Button>
-      )}
-      {recordedChunks.length > 0 && <Button onClick={handleDownload}>Download</Button>}
-      <video src={mediaBlobUrl} controls autoPlay loop />
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <center>
+            <Webcam audio={false} ref={webcamRef} style={{ width: '100%', maxWidth: '500px' }} />
+          </center>
+        </Grid>
+        <Grid item xs={12}>
+          <center>
+            {capturing ? (
+              <Button
+                onClick={handleStopCaptureClick}
+                startIcon={<StopIcon />}
+                color="error"
+                variant="contained"
+              >
+                Stop Capture
+              </Button>
+            ) : (
+              <Button
+                onClick={handleStartCaptureClick}
+                startIcon={<RadioButtonCheckedIcon />}
+                color="error"
+                variant="contained"
+              >
+                Start Capture
+              </Button>
+            )}
+            {recordedChunks.length > 0 && (
+              <Button
+                onClick={handleDownload}
+                variant="contained"
+                sx={{
+                  ml: 1,
+                }}
+              >
+                Download
+              </Button>
+            )}
+          </center>
+        </Grid>
+        <Grid item xs={12}>
+          <center>
+            <video src={mediaBlobUrl} controls autoPlay />
+          </center>
+          {/* <div className={styles.videoContainer}>
+            <video className={styles.futuristicVideo} src={mediaBlobUrl} controls autoPlay />
+          </div> */}
+        </Grid>
+      </Grid>
     </>
   );
 };
 
 export default WebcamStreamCapture;
-
-// https://www.npmjs.com/package/react-webcam