fix : Web cam recording issue with new template

Project/Frontend/SignConnectPlus/package.json

@@ -22,7 +22,9 @@
     "@fullcalendar/timegrid": "^6.1.5",
     "@fullcalendar/timeline": "^6.1.5",
     "@hello-pangea/dnd": "^16.2.0",
+    "@material-ui/core": "^4.12.4",
     "@mui/base": "^5.0.0-alpha.126",
+    "@mui/icons-material": "^5.14.6",
     "@mui/lab": "^5.0.0-alpha.127",
     "@mui/material": "^5.12.1",
     "@mui/system": "^5.12.1",
@@ -94,6 +96,7 @@
     "react-table-sticky": "^1.1.3",
     "react-timer-hook": "^3.0.5",
     "react-to-print": "^2.14.12",
+    "react-webcam": "^7.1.1",
     "react-window": "^1.8.9",
     "react-zoom-pan-pinch": "^3.0.7",
     "react18-input-otp": "^1.1.3",
@@ -107,9 +110,7 @@
     "util": "^0.12.5",
     "uuid": "^9.0.0",
     "web-vitals": "^3.3.1",
-    "yup": "^1.1.1",
-    "@material-ui/core": "^4.12.4",
-    "@mui/icons-material": "^5.14.6"
+    "yup": "^1.1.1"
   },
   "scripts": {
     "start": "react-app-rewired start",

Project/Frontend/SignConnectPlus/src/pages/ssl-translate/process/WebcamStreamCapture.tsx

-// import { useRef, useState } from 'react';
-// import { Button, Grid } from '@mui/material';
-// import Webcam from 'react-webcam';
+import { useRef, useState } from 'react';
+import { Button, Grid } from '@mui/material';
+import Webcam from 'react-webcam';
+//@ts-ignore
+const WebcamStreamCapture = ({ onVideoRecorded }) => {
+  const webcamRef = useRef(null);
+  const mediaRecorderRef = useRef(null);
+  const [capturing, setCapturing] = useState(false);
+  const [recordedChunks, setRecordedChunks] = useState([]);
 
-// const WebcamStreamCapture = ({ onVideoRecorded }) => {
-//   const webcamRef = useRef(null);
-//   const mediaRecorderRef = useRef(null);
-//   const [capturing, setCapturing] = useState(false);
-//   const [recordedChunks, setRecordedChunks] = useState([]);
+  const handleStartCaptureClick = () => {
+    setRecordedChunks([]);
+    setCapturing(true);
+    //@ts-ignore
+    mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
+      mimeType: 'video/webm'
+    });
+    //@ts-ignore
+    mediaRecorderRef.current.addEventListener('dataavailable', handleDataAvailable);
+    //@ts-ignore
+    mediaRecorderRef.current.start();
+  };
+  //@ts-ignore
+  const handleDataAvailable = ({ data }) => {
+    if (data.size > 0) {
+      setRecordedChunks((prev) => prev.concat(data));
+    }
+  };
 
-//   const handleStartCaptureClick = () => {
-//     setRecordedChunks([]);
-//     setCapturing(true);
+  const handleStopCaptureClick = () => {
+    //@ts-ignore
+    mediaRecorderRef.current.stop();
+    setCapturing(false);
+  };
 
-//     mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
-//       mimeType: 'video/webm'
-//     });
-//     mediaRecorderRef.current.addEventListener('dataavailable', handleDataAvailable);
-//     mediaRecorderRef.current.start();
-//   };
+  const handleDownload = () => {
+    if (recordedChunks.length) {
+      const blob = new Blob(recordedChunks, {
+        type: 'video/webm' // Use 'video/webm' to match MediaRecorder mimeType
+      });
+      const url = URL.createObjectURL(blob);
+      onVideoRecorded(url); // Pass the blob URL to the parent component
+      setRecordedChunks([]);
+    }
+  };
 
-//   const handleDataAvailable = ({ data }) => {
-//     if (data.size > 0) {
-//       setRecordedChunks((prev) => prev.concat(data));
-//     }
-//   };
+  return (
+    <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 ? (
+            // ! Add Icon
+            // <Button onClick={handleStopCaptureClick} startIcon={<StopIcon />} color="error" variant="contained">
+            //   Stop Capture
+            // </Button>
 
-//   const handleStopCaptureClick = () => {
-//     mediaRecorderRef.current.stop();
-//     setCapturing(false);
-//   };
+            <Button onClick={handleStopCaptureClick} color="error" variant="contained">
+              Stop Capture
+            </Button>
+          ) : (
+            // ! Add Icon
+            // <Button onClick={handleStartCaptureClick} startIcon={<RadioButtonCheckedIcon />} color="error" variant="contained">
+            //   Start Capture
+            // </Button>
+            <Button onClick={handleStartCaptureClick} 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}>
+        {recordedChunks.length > 0 && (
+          <center>
+            {/* @ts-ignore */}
+            <video
+              src={recordedChunks.length > 0 ? URL.createObjectURL(new Blob(recordedChunks, { type: 'video/webm' })) : undefined}
+              controls
+              autoPlay
+            />
+          </center>
+        )}
+      </Grid>
+    </Grid>
+  );
+};
 
-//   const handleDownload = () => {
-//     if (recordedChunks.length) {
-//       const blob = new Blob(recordedChunks, {
-//         type: 'video/webm' // Use 'video/webm' to match MediaRecorder mimeType
-//       });
-//       const url = URL.createObjectURL(blob);
-//       onVideoRecorded(url); // Pass the blob URL to the parent component
-//       setRecordedChunks([]);
-//     }
-//   };
-
-//   return (
-//     <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 ? (
-//             // ! Add Icon
-//             // <Button onClick={handleStopCaptureClick} startIcon={<StopIcon />} color="error" variant="contained">
-//             //   Stop Capture
-//             // </Button>
-
-//             <Button onClick={handleStopCaptureClick} color="error" variant="contained">
-//               Stop Capture
-//             </Button>
-//           ) : (
-//             // ! Add Icon
-//             // <Button onClick={handleStartCaptureClick} startIcon={<RadioButtonCheckedIcon />} color="error" variant="contained">
-//             //   Start Capture
-//             // </Button>
-//             <Button onClick={handleStartCaptureClick} 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}>
-//         {recordedChunks.length > 0 && (
-//           <center>
-//             <video
-//               src={recordedChunks.length > 0 ? URL.createObjectURL(new Blob(recordedChunks, { type: 'video/webm' })) : null}
-//               controls
-//               autoPlay
-//             />
-//           </center>
-//         )}
-//       </Grid>
-//     </Grid>
-//   );
-// };
-
-// export default WebcamStreamCapture;
-
-function Test() {
-  return <></>;
-}
-
-export default Test;
+export default WebcamStreamCapture;

Project/Frontend/SignConnectPlus/src/pages/ssl-translate/process/process.tsx

@@ -28,6 +28,7 @@ import { useSnackbar } from 'notistack';
 
 import { MuiFileInput } from 'mui-file-input';
 import SignLanguageToTextService from '../../../services/SignLanguageToText.js';
+import WebcamStreamCapture from './WebcamStreamCapture';
 
 // assets
 
@@ -42,8 +43,7 @@ const Process = () => {
   const [loading, setLoading] = useState(false);
   const [value, setValue] = useState('');
   const [speed, setSpeed] = useState(0);
-  // const [recordedVideoUrl, setRecordedVideoUrl] = useState(null);
-  const recordedVideoUrl = null;
+  const [recordedVideoUrl, setRecordedVideoUrl] = useState(null);
 
   //   const handleDropSingleFile = useCallback(async (acceptedFiles: File[]) => {
   //     const file = acceptedFiles[0];
@@ -162,9 +162,9 @@ const Process = () => {
     return `$${value}°C`;
   }
 
-  // const handleVideoRecorded = (url: any) => {
-  //   setRecordedVideoUrl(url);
-  // };
+  const handleVideoRecorded = (url: any) => {
+    setRecordedVideoUrl(url);
+  };
   return (
     <>
       <MainCard content={false}>
@@ -226,9 +226,7 @@ const Process = () => {
                       <Card>
                         <CardContent>
                           {/* ! Important */}
-                          {/* <Upload file={file} onDrop={handleDropSingleFile} onDelete={() => setFile(null)} multiple={true} /> */}
 
-                          {/* <FileUpload value={file} onChange={handleDropSingleFile} /> */}
                           {/* @ts-ignore */}
                           <MuiFileInput value={file} onChange={handleDropSingleFile} />
 
@@ -333,7 +331,9 @@ const Process = () => {
                     {/* Paste Here  */}
                     <Grid item xs={12} md={6}>
                       <Card>
-                        <CardContent>{/* <WebcamStreamCapture onVideoRecorded={handleVideoRecorded} /> */}</CardContent>
+                        <CardContent>
+                          <WebcamStreamCapture onVideoRecorded={handleVideoRecorded} />
+                        </CardContent>
 
                         {recordedVideoUrl && (
                           <div>

Project/Frontend/SignConnectPlus/yarn.lock

@@ -11116,6 +11116,11 @@ react-transition-group@^4.4.0, react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-webcam@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/react-webcam/-/react-webcam-7.1.1.tgz#e6290b192cde0d2a1039051a019a18e998d7fb39"
+  integrity sha512-2W5WN8wmEv8ZlxvyAlOxVuw6new8Bi7+KSPqoq5oa7z1KSKZ72ucaKqCFRtHSuFjZ5sh5ioS9lp4BGwnaZ6lDg==
+
 react-window@^1.8.9:
   version "1.8.9"
   resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.9.tgz#24bc346be73d0468cdf91998aac94e32bc7fa6a8"