fix: react-media-recorder blob storage not defined issue. Used react-webcam instead

Project/Frontend/Web_App/src/pages/translate-page.tsx

@@ -26,6 +26,7 @@ import {
   AboutTeam,
   AboutVision,
   AboutTestimonials,
+  WebcamStreamCapture,
 } from '../sections/slToText';
 import { Upload } from 'src/components/upload';
 import { useCallback, useRef, useState } from 'react';
@@ -34,8 +35,10 @@ import EmergencyRecordingIcon from '@mui/icons-material/EmergencyRecording';
 import { useSnackbar } from 'notistack';
 import useCopyToClipboard from 'src/hooks/useCopyToClipboard';
 import Iconify from 'src/components/iconify/Iconify';
-import { useReactMediaRecorder } from 'react-media-recorder';
 import dynamic from 'next/dynamic';
+const useReactMediaRecorder = () =>
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  import('react-media-recorder');
 
 // ----------------------------------------------------------------------
 
@@ -169,8 +172,54 @@ export default function AboutPage() {
         </Box>
       ) : (
         // Video Capture
+
+        <Box sx={{ flexGrow: 1 }}>
+          <Card>
+            <CardHeader title="Upload a video containing Sign Language" />
+            <Grid container spacing={2}>
+              <Grid item xs={12} md={6}>
+                <Card>
+                  <CardContent>
+                    <WebcamStreamCapture />
+                  </CardContent>
+                </Card>
+              </Grid>
+              <Grid item xs={12} md={6}>
+                <Card sx={{ p: 5 }}>
+                  <Box
+                    display="grid"
+                    gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
+                    gap={5}
+                  >
+                    <Stack spacing={2}>
+                      <Typography variant="overline" sx={{ color: 'text.secondary' }}>
+                        on Change
+                      </Typography>
+
+                      <TextField
+                        fullWidth
+                        value={value}
+                        onChange={handleChange}
+                        InputProps={{
+                          endAdornment: (
+                            <InputAdornment position="end">
+                              <Tooltip title="Copy">
+                                <IconButton onClick={() => onCopy(value)}>
+                                  <Iconify icon="eva:copy-fill" width={24} />
+                                </IconButton>
+                              </Tooltip>
+                            </InputAdornment>
+                          ),
+                        }}
+                      />
+                    </Stack>
+                  </Box>
+                </Card>
+              </Grid>
+            </Grid>
+          </Card>
+        </Box>
         // <RecordView />
-        <div>sdsd</div>
       )}
     </>
   );
@@ -180,7 +229,6 @@ const RecordView = () => {
   const { status, startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({
     video: true,
   });
-
   return (
     <div>
       <p>{status}</p>

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

+import React from 'react';
+import Webcam from 'react-webcam';
+import { Box, Button } from '@mui/material';
+
+const WebcamStreamCapture = () => {
+  const webcamRef = React.useRef(null);
+  const mediaRecorderRef = React.useRef(null);
+  const [capturing, setCapturing] = React.useState(false);
+  const [recordedChunks, setRecordedChunks] = React.useState([]);
+  const [mediaBlobUrl, setMediaBlobUrl] = React.useState([]);
+
+  const handleStartCaptureClick = React.useCallback(() => {
+    setCapturing(true);
+    mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
+      mimeType: 'video/webm',
+    });
+    mediaRecorderRef.current.addEventListener('dataavailable', handleDataAvailable);
+    mediaRecorderRef.current.start();
+  }, [webcamRef, setCapturing, mediaRecorderRef]);
+
+  const handleDataAvailable = React.useCallback(
+    ({ data }) => {
+      if (data.size > 0) {
+        setRecordedChunks((prev) => prev.concat(data));
+      }
+    },
+    [setRecordedChunks]
+  );
+
+  const handleStopCaptureClick = React.useCallback(() => {
+    mediaRecorderRef.current.stop();
+    setCapturing(false);
+  }, [mediaRecorderRef, webcamRef, setCapturing]);
+
+  const handleDownload = React.useCallback(() => {
+    if (recordedChunks.length) {
+      const blob = new Blob(recordedChunks, {
+        type: 'video/mp4',
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      document.body.appendChild(a);
+      a.style = 'display: none';
+      a.href = url;
+      a.download = 'user-recording.mp4';
+      a.click();
+      window.URL.revokeObjectURL(url);
+      setRecordedChunks([]);
+    }
+  }, [recordedChunks]);
+
+  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 />
+    </>
+  );
+};
+
+export default WebcamStreamCapture;
+
+// https://www.npmjs.com/package/react-webcam

Project/Frontend/Web_App/src/sections/slToText/index.ts

@@ -3,3 +3,4 @@ export { default as AboutWhat } from './AboutWhat';
 export { default as AboutTeam } from './AboutTeam';
 export { default as AboutVision } from './AboutVision';
 export { default as AboutTestimonials } from './AboutTestimonials';
+export { default as WebcamStreamCapture } from './WebcamStreamCapture';