Skip to content

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

fix

parent 368f423f
Expand all Show whitespace changes
Inline Side-by-side
Showing with 313 additions and 115 deletions
Project/Frontend/SignConnectPlus/package.json
View file @ ac196e84
......@@ -107,7 +107,9 @@
"util": "^0.12.5",
"uuid": "^9.0.0",
"web-vitals": "^3.3.1",
"yup": "^1.1.1"
"yup": "^1.1.1",
"@material-ui/core": "^4.12.4",
"@mui/icons-material": "^5.14.6"
},
"scripts": {
"start": "react-app-rewired start",
......
Project/Frontend/SignConnectPlus/src/pages/ssl-translate/process/WebcamStreamCapture.tsx
View file @ ac196e84
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';
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);
// const handleStartCaptureClick = () => {
// setRecordedChunks([]);
// setCapturing(true);
mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
mimeType: 'video/webm'
});
mediaRecorderRef.current.addEventListener('dataavailable', handleDataAvailable);
mediaRecorderRef.current.start();
};
// mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
// mimeType: 'video/webm'
// });
// mediaRecorderRef.current.addEventListener('dataavailable', handleDataAvailable);
// mediaRecorderRef.current.start();
// };
const handleDataAvailable = ({ data }) => {
if (data.size > 0) {
setRecordedChunks((prev) => prev.concat(data));
}
};
// const handleDataAvailable = ({ data }) => {
// if (data.size > 0) {
// setRecordedChunks((prev) => prev.concat(data));
// }
// };
const handleStopCaptureClick = () => {
mediaRecorderRef.current.stop();
setCapturing(false);
};
// const handleStopCaptureClick = () => {
// mediaRecorderRef.current.stop();
// setCapturing(false);
// };
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 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>
// 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>
);
};
// <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;
// export default WebcamStreamCapture;
function Test() {
return <></>;
}
export default Test;
Project/Frontend/SignConnectPlus/src/pages/ssl-translate/process/process.tsx
View file @ ac196e84
// material-ui
// third-party
// project import
import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX';
......@@ -13,28 +9,26 @@ import {
Card,
CardContent,
CardHeader,
Container,
Grid,
TextField,
Typography,
InputAdornment,
Stack,
Tooltip,
Container,
Paper,
LinearProgress,
Slider
Paper,
Slider,
Stack,
TextField,
Typography
} from '@mui/material';
// layouts
// sections
import { useCallback, useState } from 'react';
import { useState } from 'react';
import { useSnackbar } from 'notistack';
import SignLanguageToTextService from '../../../services/SignLanguageToText.js';
import FileUpload from 'react-material-file-upload';
import WebcamStreamCapture from './WebcamStreamCapture';
import { MuiFileInput } from 'mui-file-input';
import SignLanguageToTextService from '../../../services/SignLanguageToText.js';
// assets
//types
......@@ -48,7 +42,8 @@ const Process = () => {
const [loading, setLoading] = useState(false);
const [value, setValue] = useState('');
const [speed, setSpeed] = useState(0);
const [recordedVideoUrl, setRecordedVideoUrl] = useState(null);
// const [recordedVideoUrl, setRecordedVideoUrl] = useState(null);
const recordedVideoUrl = null;
// const handleDropSingleFile = useCallback(async (acceptedFiles: File[]) => {
// const file = acceptedFiles[0];
......@@ -63,7 +58,7 @@ const Process = () => {
// }
// }, []);
const handleDropSingleFile = (files) => {
const handleDropSingleFile = (files: any) => {
if (files) {
setFile(
Object.assign(files, {
......@@ -112,6 +107,7 @@ const Process = () => {
setLoading(true);
const formData = new FormData();
//@ts-ignore
formData.append('video_request', file, file.name);
try {
......@@ -140,6 +136,7 @@ const Process = () => {
setLoading(true);
const formData = new FormData();
//@ts-ignore
formData.append('video_request', recordedVideoUrl, recordedVideoUrl.name);
try {
......@@ -165,9 +162,9 @@ const Process = () => {
return `$${value}°C`;
}
const handleVideoRecorded = (url) => {
setRecordedVideoUrl(url);
};
// const handleVideoRecorded = (url: any) => {
// setRecordedVideoUrl(url);
// };
return (
<>
<MainCard content={false}>
......@@ -307,12 +304,12 @@ const Process = () => {
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Tooltip title="Copy">
{/* <Tooltip title="Copy"> */}
{/* Important */}
{/* <IconButton onClick={() => onCopy(value)}>
<Iconify icon="eva:copy-fill" width={24} />
</IconButton> */}
</Tooltip>
{/* </Tooltip> */}
</InputAdornment>
)
}}
......@@ -405,11 +402,11 @@ const Process = () => {
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Tooltip title="Copy">
{/* <Tooltip title="Copy"> */}
{/* <IconButton onClick={() => onCopy(value)}>
<Iconify icon="eva:copy-fill" width={24} />
</IconButton> */}
</Tooltip>
{/* </Tooltip> */}
</InputAdornment>
)
}}
......
Project/Frontend/SignConnectPlus/yarn.lock
View file @ ac196e84
This diff is collapsed.
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