Skip to content

2
2023-029
Commit d9272568 authored by supundileepa00's avatar supundileepa00
Browse files
Options

feat: Initial UI development with main functionalities

parent 5b04c61f
Show whitespace changes
Inline Side-by-side
Showing with 252 additions and 147 deletions
Project/Frontend/Web_App/src/pages/translate-page.tsx
View file @ d9272568
......@@ -16,6 +16,7 @@ import {
InputAdornment,
Stack,
Tooltip,
Container,
} from '@mui/material';
// layouts
import MainLayout from '../layouts/main';
......@@ -99,6 +100,8 @@ export default function AboutPage() {
<Head>
<title>Translate SSL to Text</title>
</Head>
<Container maxWidth="l">
<ButtonGroup disableElevation variant="contained" aria-label="Disabled elevation buttons">
<Button
variant={checkTranalationTypeForUpload()}
......@@ -111,7 +114,7 @@ export default function AboutPage() {
</Button>
<Button
variant={checkTranalationTypeForRecord()}
endIcon={<EmergencyRecordingIcon />}
startIcon={<EmergencyRecordingIcon />}
onClick={() => {
setIsUploadFile(false);
}}
......@@ -167,6 +170,19 @@ export default function AboutPage() {
</Box>
</Card>
</Grid>
<Grid item xs={12} md={12}>
<center>
<Button
variant="contained"
style={{ width: '200px', height: '60px', fontSize: '20px' }}
sx={{
mb: 3,
}}
>
Translate
</Button>
</center>
</Grid>
</Grid>
</Card>
</Box>
......@@ -216,25 +232,24 @@ export default function AboutPage() {
</Box>
</Card>
</Grid>
<Grid item xs={12} md={12}>
<center>
<Button
variant="contained"
style={{ width: '200px', height: '60px', fontSize: '20px' }}
sx={{
mb: 3,
}}
>
Translate
</Button>
</center>
</Grid>
</Grid>
</Card>
</Box>
// <RecordView />
)}
</Container>
</>
);
}
const RecordView = () => {
const { status, startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({
video: true,
});
return (
<div>
<p>{status}</p>
<button onClick={startRecording}>Start Recording</button>
<button onClick={stopRecording}>Stop Recording</button>
<video src={mediaBlobUrl} controls autoPlay loop />
</div>
);
};
Project/Frontend/Web_App/src/sections/slToText/WebcamStreamCapture.module.css 0 → 100644
View file @ d9272568
.videoContainer {
position: relative;
width: 50%;
padding-top: 56.25%; /* 16:9 aspect ratio */
}
.futuristicVideo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background-color: black;
opacity: 0.8;
filter: blur(4px);
transition: opacity 0.5s, filter 0.5s;
}
.futuristicVideo:hover {
opacity: 1;
filter: blur(0);
}
Project/Frontend/Web_App/src/sections/slToText/WebcamStreamCapture.tsx
View file @ d9272568
import React from 'react';
import React, { useEffect, useState } from 'react';
import Webcam from 'react-webcam';
import { Box, Button } from '@mui/material';
import { Box, Button, Container, Grid, Stack } from '@mui/material';
import StopIcon from '@mui/icons-material/Stop';
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
import styles from './WebcamStreamCapture.module.css';
const WebcamStreamCapture = () => {
const webcamRef = React.useRef(null);
const mediaRecorderRef = React.useRef(null);
......@@ -10,7 +12,10 @@ const WebcamStreamCapture = () => {
const [mediaBlobUrl, setMediaBlobUrl] = React.useState([]);
const handleStartCaptureClick = React.useCallback(() => {
setRecordedChunks([]);
setMediaBlobUrl([]);
setCapturing(true);
mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
mimeType: 'video/webm',
});
......@@ -27,8 +32,18 @@ const WebcamStreamCapture = () => {
[setRecordedChunks]
);
const handleStopCaptureClick = React.useCallback(() => {
const handleStopCaptureClick = React.useCallback(async () => {
mediaRecorderRef.current.stop();
const blob = new Blob(recordedChunks, {
type: 'video/mp4',
});
const url = await URL.createObjectURL(blob);
console.log(url);
await setMediaBlobUrl(url);
setCapturing(false);
}, [mediaRecorderRef, webcamRef, setCapturing]);
......@@ -49,20 +64,71 @@ const WebcamStreamCapture = () => {
}
}, [recordedChunks]);
// Styles for camera
const [width, setWidth] = useState(window.innerWidth);
const handleResize = () => {
setWidth(window.innerWidth);
};
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return (
<>
<Webcam audio={false} ref={webcamRef} />
<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 ? (
<Button onClick={handleStopCaptureClick}>Stop Capture</Button>
<Button
onClick={handleStopCaptureClick}
startIcon={<StopIcon />}
color="error"
variant="contained"
>
Stop Capture
</Button>
) : (
<Button onClick={handleStartCaptureClick}>Start Capture</Button>
<Button
onClick={handleStartCaptureClick}
startIcon={<RadioButtonCheckedIcon />}
color="error"
variant="contained"
>
Start Capture
</Button>
)}
{recordedChunks.length > 0 && (
<Button
onClick={handleDownload}
variant="contained"
sx={{
ml: 1,
}}
>
Download
</Button>
)}
{recordedChunks.length > 0 && <Button onClick={handleDownload}>Download</Button>}
<video src={mediaBlobUrl} controls autoPlay loop />
</center>
</Grid>
<Grid item xs={12}>
<center>
<video src={mediaBlobUrl} controls autoPlay />
</center>
{/* <div className={styles.videoContainer}>
<video className={styles.futuristicVideo} src={mediaBlobUrl} controls autoPlay />
</div> */}
</Grid>
</Grid>
</>
);
};
export default WebcamStreamCapture;
// https://www.npmjs.com/package/react-webcam
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