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 { ...@@ -16,6 +16,7 @@ import {
InputAdornment, InputAdornment,
Stack, Stack,
Tooltip, Tooltip,
Container,
} from '@mui/material'; } from '@mui/material';
// layouts // layouts
import MainLayout from '../layouts/main'; import MainLayout from '../layouts/main';
...@@ -99,6 +100,8 @@ export default function AboutPage() { ...@@ -99,6 +100,8 @@ export default function AboutPage() {
<Head> <Head>
<title>Translate SSL to Text</title> <title>Translate SSL to Text</title>
</Head> </Head>
<Container maxWidth="l">
<ButtonGroup disableElevation variant="contained" aria-label="Disabled elevation buttons"> <ButtonGroup disableElevation variant="contained" aria-label="Disabled elevation buttons">
<Button <Button
variant={checkTranalationTypeForUpload()} variant={checkTranalationTypeForUpload()}
...@@ -111,7 +114,7 @@ export default function AboutPage() { ...@@ -111,7 +114,7 @@ export default function AboutPage() {
</Button> </Button>
<Button <Button
variant={checkTranalationTypeForRecord()} variant={checkTranalationTypeForRecord()}
endIcon={<EmergencyRecordingIcon />} startIcon={<EmergencyRecordingIcon />}
onClick={() => { onClick={() => {
setIsUploadFile(false); setIsUploadFile(false);
}} }}
...@@ -167,6 +170,19 @@ export default function AboutPage() { ...@@ -167,6 +170,19 @@ export default function AboutPage() {
</Box> </Box>
</Card> </Card>
</Grid> </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> </Grid>
</Card> </Card>
</Box> </Box>
...@@ -216,25 +232,24 @@ export default function AboutPage() { ...@@ -216,25 +232,24 @@ export default function AboutPage() {
</Box> </Box>
</Card> </Card>
</Grid> </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> </Grid>
</Card> </Card>
</Box> </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 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 WebcamStreamCapture = () => {
const webcamRef = React.useRef(null); const webcamRef = React.useRef(null);
const mediaRecorderRef = React.useRef(null); const mediaRecorderRef = React.useRef(null);
...@@ -10,7 +12,10 @@ const WebcamStreamCapture = () => { ...@@ -10,7 +12,10 @@ const WebcamStreamCapture = () => {
const [mediaBlobUrl, setMediaBlobUrl] = React.useState([]); const [mediaBlobUrl, setMediaBlobUrl] = React.useState([]);
const handleStartCaptureClick = React.useCallback(() => { const handleStartCaptureClick = React.useCallback(() => {
setRecordedChunks([]);
setMediaBlobUrl([]);
setCapturing(true); setCapturing(true);
mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, { mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
mimeType: 'video/webm', mimeType: 'video/webm',
}); });
...@@ -27,8 +32,18 @@ const WebcamStreamCapture = () => { ...@@ -27,8 +32,18 @@ const WebcamStreamCapture = () => {
[setRecordedChunks] [setRecordedChunks]
); );
const handleStopCaptureClick = React.useCallback(() => { const handleStopCaptureClick = React.useCallback(async () => {
mediaRecorderRef.current.stop(); 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); setCapturing(false);
}, [mediaRecorderRef, webcamRef, setCapturing]); }, [mediaRecorderRef, webcamRef, setCapturing]);
...@@ -49,20 +64,71 @@ const WebcamStreamCapture = () => { ...@@ -49,20 +64,71 @@ const WebcamStreamCapture = () => {
} }
}, [recordedChunks]); }, [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 ( 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 ? ( {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>} </center>
<video src={mediaBlobUrl} controls autoPlay loop /> </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; 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