Skip to content

2
2023-029
Commit 9f60708f authored by Paranagama R.P.S.D.'s avatar Paranagama R.P.S.D.
Browse files
Options

fix : Web cam recording issue with new template

parent ac196e84
Show whitespace changes
Inline Side-by-side
Showing with 108 additions and 104 deletions
Project/Frontend/SignConnectPlus/package.json
View file @ 9f60708f
......@@ -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
View file @ 9f60708f
// 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
View file @ 9f60708f
......@@ -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
View file @ 9f60708f
......@@ -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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment