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 Hide 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 @@ ...@@ -107,7 +107,9 @@
"util": "^0.12.5", "util": "^0.12.5",
"uuid": "^9.0.0", "uuid": "^9.0.0",
"web-vitals": "^3.3.1", "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": { "scripts": {
"start": "react-app-rewired start", "start": "react-app-rewired start",
......
Project/Frontend/SignConnectPlus/src/pages/ssl-translate/process/WebcamStreamCapture.tsx
View file @ ac196e84
import { useRef, useState } from 'react'; // import { useRef, useState } from 'react';
import { Button, Grid } from '@mui/material'; // import { Button, Grid } from '@mui/material';
import Webcam from 'react-webcam'; // import Webcam from 'react-webcam';
const WebcamStreamCapture = ({ onVideoRecorded }) => { // const WebcamStreamCapture = ({ onVideoRecorded }) => {
const webcamRef = useRef(null); // const webcamRef = useRef(null);
const mediaRecorderRef = useRef(null); // const mediaRecorderRef = useRef(null);
const [capturing, setCapturing] = useState(false); // const [capturing, setCapturing] = useState(false);
const [recordedChunks, setRecordedChunks] = useState([]); // const [recordedChunks, setRecordedChunks] = useState([]);
const handleStartCaptureClick = () => { // const handleStartCaptureClick = () => {
setRecordedChunks([]); // setRecordedChunks([]);
setCapturing(true); // setCapturing(true);
mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, { // mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
mimeType: 'video/webm' // mimeType: 'video/webm'
}); // });
mediaRecorderRef.current.addEventListener('dataavailable', handleDataAvailable); // mediaRecorderRef.current.addEventListener('dataavailable', handleDataAvailable);
mediaRecorderRef.current.start(); // mediaRecorderRef.current.start();
}; // };
const handleDataAvailable = ({ data }) => { // const handleDataAvailable = ({ data }) => {
if (data.size > 0) { // if (data.size > 0) {
setRecordedChunks((prev) => prev.concat(data)); // setRecordedChunks((prev) => prev.concat(data));
} // }
}; // };
const handleStopCaptureClick = () => { // const handleStopCaptureClick = () => {
mediaRecorderRef.current.stop(); // mediaRecorderRef.current.stop();
setCapturing(false); // setCapturing(false);
}; // };
const handleDownload = () => { // const handleDownload = () => {
if (recordedChunks.length) { // if (recordedChunks.length) {
const blob = new Blob(recordedChunks, { // const blob = new Blob(recordedChunks, {
type: 'video/webm' // Use 'video/webm' to match MediaRecorder mimeType // type: 'video/webm' // Use 'video/webm' to match MediaRecorder mimeType
}); // });
const url = URL.createObjectURL(blob); // const url = URL.createObjectURL(blob);
onVideoRecorded(url); // Pass the blob URL to the parent component // onVideoRecorded(url); // Pass the blob URL to the parent component
setRecordedChunks([]); // setRecordedChunks([]);
} // }
}; // };
return ( // return (
<Grid container spacing={2}> // <Grid container spacing={2}>
<Grid item xs={12}> // <Grid item xs={12}>
<center> // <center>
<Webcam audio={false} ref={webcamRef} style={{ width: '100%', maxWidth: '500px' }} /> // <Webcam audio={false} ref={webcamRef} style={{ width: '100%', maxWidth: '500px' }} />
</center> // </center>
</Grid> // </Grid>
<Grid item xs={12}> // <Grid item xs={12}>
<center> // <center>
{capturing ? ( // {capturing ? (
// ! Add Icon // // ! Add Icon
// <Button onClick={handleStopCaptureClick} startIcon={<StopIcon />} color="error" variant="contained"> // // <Button onClick={handleStopCaptureClick} startIcon={<StopIcon />} color="error" variant="contained">
// Stop Capture // // Stop Capture
// </Button> // // </Button>
<Button onClick={handleStopCaptureClick} color="error" variant="contained"> // <Button onClick={handleStopCaptureClick} color="error" variant="contained">
Stop Capture // Stop Capture
</Button> // </Button>
) : ( // ) : (
// ! Add Icon // // ! Add Icon
// <Button onClick={handleStartCaptureClick} startIcon={<RadioButtonCheckedIcon />} color="error" variant="contained"> // // <Button onClick={handleStartCaptureClick} startIcon={<RadioButtonCheckedIcon />} color="error" variant="contained">
// Start Capture // // Start Capture
// </Button> // // </Button>
<Button onClick={handleStartCaptureClick} color="error" variant="contained"> // <Button onClick={handleStartCaptureClick} color="error" variant="contained">
Start Capture // Start Capture
</Button> // </Button>
)} // )}
{recordedChunks.length > 0 && ( // {recordedChunks.length > 0 && (
<Button onClick={handleDownload} variant="contained" sx={{ ml: 1 }}> // <Button onClick={handleDownload} variant="contained" sx={{ ml: 1 }}>
Download // Download
</Button> // </Button>
)} // )}
</center> // </center>
</Grid> // </Grid>
<Grid item xs={12}> // <Grid item xs={12}>
{recordedChunks.length > 0 && ( // {recordedChunks.length > 0 && (
<center> // <center>
<video // <video
src={recordedChunks.length > 0 ? URL.createObjectURL(new Blob(recordedChunks, { type: 'video/webm' })) : null} // src={recordedChunks.length > 0 ? URL.createObjectURL(new Blob(recordedChunks, { type: 'video/webm' })) : null}
controls // controls
autoPlay // autoPlay
/> // />
</center> // </center>
)} // )}
</Grid> // </Grid>
</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 // project import
import MainCard from 'components/MainCard'; import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX'; import ScrollX from 'components/ScrollX';
...@@ -13,28 +9,26 @@ import { ...@@ -13,28 +9,26 @@ import {
Card, Card,
CardContent, CardContent,
CardHeader, CardHeader,
Container,
Grid, Grid,
TextField,
Typography,
InputAdornment, InputAdornment,
Stack,
Tooltip,
Container,
Paper,
LinearProgress, LinearProgress,
Slider Paper,
Slider,
Stack,
TextField,
Typography
} from '@mui/material'; } from '@mui/material';
// layouts // layouts
// sections // sections
import { useCallback, useState } from 'react'; import { useState } from 'react';
import { useSnackbar } from 'notistack'; 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 { MuiFileInput } from 'mui-file-input';
import SignLanguageToTextService from '../../../services/SignLanguageToText.js';
// assets // assets
//types //types
...@@ -48,7 +42,8 @@ const Process = () => { ...@@ -48,7 +42,8 @@ const Process = () => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [value, setValue] = useState(''); const [value, setValue] = useState('');
const [speed, setSpeed] = useState(0); 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 handleDropSingleFile = useCallback(async (acceptedFiles: File[]) => {
// const file = acceptedFiles[0]; // const file = acceptedFiles[0];
...@@ -63,7 +58,7 @@ const Process = () => { ...@@ -63,7 +58,7 @@ const Process = () => {
// } // }
// }, []); // }, []);
const handleDropSingleFile = (files) => { const handleDropSingleFile = (files: any) => {
if (files) { if (files) {
setFile( setFile(
Object.assign(files, { Object.assign(files, {
...@@ -112,6 +107,7 @@ const Process = () => { ...@@ -112,6 +107,7 @@ const Process = () => {
setLoading(true); setLoading(true);
const formData = new FormData(); const formData = new FormData();
//@ts-ignore
formData.append('video_request', file, file.name); formData.append('video_request', file, file.name);
try { try {
...@@ -140,6 +136,7 @@ const Process = () => { ...@@ -140,6 +136,7 @@ const Process = () => {
setLoading(true); setLoading(true);
const formData = new FormData(); const formData = new FormData();
//@ts-ignore
formData.append('video_request', recordedVideoUrl, recordedVideoUrl.name); formData.append('video_request', recordedVideoUrl, recordedVideoUrl.name);
try { try {
...@@ -165,9 +162,9 @@ const Process = () => { ...@@ -165,9 +162,9 @@ const Process = () => {
return `$${value}°C`; return `$${value}°C`;
} }
const handleVideoRecorded = (url) => { // const handleVideoRecorded = (url: any) => {
setRecordedVideoUrl(url); // setRecordedVideoUrl(url);
}; // };
return ( return (
<> <>
<MainCard content={false}> <MainCard content={false}>
...@@ -307,12 +304,12 @@ const Process = () => { ...@@ -307,12 +304,12 @@ const Process = () => {
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
<Tooltip title="Copy"> {/* <Tooltip title="Copy"> */}
{/* Important */} {/* Important */}
{/* <IconButton onClick={() => onCopy(value)}> {/* <IconButton onClick={() => onCopy(value)}>
<Iconify icon="eva:copy-fill" width={24} /> <Iconify icon="eva:copy-fill" width={24} />
</IconButton> */} </IconButton> */}
</Tooltip> {/* </Tooltip> */}
</InputAdornment> </InputAdornment>
) )
}} }}
...@@ -405,11 +402,11 @@ const Process = () => { ...@@ -405,11 +402,11 @@ const Process = () => {
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
<Tooltip title="Copy"> {/* <Tooltip title="Copy"> */}
{/* <IconButton onClick={() => onCopy(value)}> {/* <IconButton onClick={() => onCopy(value)}>
<Iconify icon="eva:copy-fill" width={24} /> <Iconify icon="eva:copy-fill" width={24} />
</IconButton> */} </IconButton> */}
</Tooltip> {/* </Tooltip> */}
</InputAdornment> </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