Skip to content

Commit a8989dc

Browse files
author
Ayaan Farooqui
committed
added video control panels
1 parent d156a66 commit a8989dc

File tree

8 files changed

+131
-43
lines changed

8 files changed

+131
-43
lines changed

‎src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ function App() {
3535
return (
3636

3737
<ThemeProvider theme={theme}>
38-
<div className="App" style={{ display: "flex", justifyContent: "center", backgroundColor: showOnboardingScreen ? stepColors[activeStep] : "#dfdce3", height: "100vh", width: "100%" }}>
38+
<div className="App" style={{ display: "flex", justifyContent: "center", alignItems: "center", backgroundColor: showOnboardingScreen ? stepColors[activeStep] : "white", height: "100vh", width: "100%" }}>
3939
{
4040
showOnboardingScreen ?
4141
<OnBoardingScreen

‎src/detector/Detector.js‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,19 @@
1-
import { useEffect, useRef, useState, useCallback } from "react";
1+
import { useEffect, useState } from "react";
22
import * as mpHolistic from "@mediapipe/holistic";
33
import * as tf from '@tensorflow/tfjs';
4-
import { Camera } from '@mediapipe/camera_utils';
54
import { onResults } from "./helperFunctions";
65
import LoadingComponent from './LoadingComponent';
6+
import VideoContainer from "./VideoContainer";
7+
import { DetectorContainer } from "./detectorStyles";
8+
import { IconButton, Avatar, Tooltip } from "@mui/material";
9+
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
10+
import UploadFileIcon from '@mui/icons-material/UploadFile';
711

812
function Detector() {
913

1014
const [loadingStates, setLoadingStates] = useState(0)
11-
const videoElementRef = useRef();
1215
const [holisticModel, setHolisticModel] = useState(null);
1316

14-
const initCamera = useCallback(() => {
15-
// Start the camera using mediapipe camera utility
16-
if (typeof videoElementRef.current !== "undefined" && videoElementRef.current !== null && holisticModel !== null) {
17-
const camera = new Camera(videoElementRef.current, {
18-
onFrame: async () => {
19-
await holisticModel.send({ image: videoElementRef.current });
20-
},
21-
width: 480,
22-
height: 480
23-
});
24-
camera.start();
25-
}
26-
// --------------------------------------------------
27-
}, [videoElementRef, holisticModel])
28-
29-
console.log(initCamera)
30-
3117
useEffect(() => {
3218
// load our custom model and set it
3319
const speechSynthesisUtterance = new SpeechSynthesisUtterance();
@@ -62,9 +48,22 @@ function Detector() {
6248
)
6349
else
6450
return (
65-
<div style={{ width: "100%", background: "linear-gradient(-25deg, #fdcb6c 50%, #7d8dc1 50%)" }}>
66-
<video ref={videoElementRef} ></video>
67-
</div>
51+
<DetectorContainer>
52+
{/* <div className="navbar">
53+
<img src="/logo512.png" alt="logo" height="50px" width="50px" />
54+
<Typography component="h4" style={{color:"white", fontSize:"1.5rem"}}>Sign-it ASL Translator</Typography>
55+
</div> */}
56+
<VideoContainer holisticModel={holisticModel} />
57+
<div class="buttonsContainer">
58+
<Tooltip title="Play">
59+
<IconButton color="primary" variant="outlined" ><PlayArrowIcon sx={{ height: "40px", width: "40px" }} /></IconButton>
60+
</Tooltip>
61+
<Avatar src="/logo512.png" sx={{ height: "100px", width: "100px" }} />
62+
<Tooltip title="Upload File">
63+
<IconButton color="primary" variant="outlined" ><UploadFileIcon sx={{ height: "40px", width: "40px" }} /></IconButton>
64+
</Tooltip>
65+
</div>
66+
</DetectorContainer>
6867
)
6968
}
7069

‎src/detector/VideoContainer.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { useRef, useCallback } from "react";
2+
import { Camera } from '@mediapipe/camera_utils';
3+
import { Paper } from "@mui/material";
4+
5+
export default function VideoContainer(props) {
6+
7+
const videoElementRef = useRef();
8+
9+
const initCamera = useCallback(() => {
10+
// Start the camera using mediapipe camera utility
11+
if (typeof videoElementRef.current !== "undefined" && videoElementRef.current !== null && props.holisticModel !== null) {
12+
const camera = new Camera(videoElementRef.current, {
13+
onFrame: async () => {
14+
await props.holisticModel.send({ image: videoElementRef.current });
15+
},
16+
width: 480,
17+
height: 480
18+
});
19+
camera.start();
20+
}
21+
// --------------------------------------------------
22+
}, [videoElementRef, props.holisticModel])
23+
24+
console.log(initCamera)
25+
26+
return (
27+
<Paper elevation={3} className="videoContainer">
28+
<video ref={videoElementRef} ></video>
29+
</Paper>
30+
);
31+
};

‎src/detector/detectorStyles.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,65 @@ export const LoadingDiv = styled(Box)({
5454
transform: "translateY(30px)",
5555
opacity: 1
5656
}
57+
}
58+
})
5759

60+
export const DetectorContainer = styled("div")({
61+
"&": {
62+
width: "100%",
63+
background: "linear-gradient(-25deg, #fdcb6c 50%, #7d8dc1 50%)",
64+
animation: "detector_bg 0.5s ease-in forwards",
65+
display: "flex",
66+
justifyContent: "center",
67+
alignItems: "center",
68+
flexDirection: "column"
69+
},
70+
"@keyframes detector_bg": {
71+
"0%": {
72+
height: 0,
73+
},
74+
"100%": {
75+
height: "100%",
76+
},
77+
},
78+
"& .videoContainer": {
79+
border: "5px solid white",
80+
borderRadius: "50%",
81+
backgroundColor: "white",
82+
animation: "detector_container 1s ease-in forwards",
83+
animationDelay: "1s",
84+
visibility: "hidden",
85+
},
86+
"@keyframes detector_container": {
87+
"0%": {
88+
visibility: "visible",
89+
height: 0,
90+
width: 0,
91+
},
92+
"100%": {
93+
visibility: "visible",
94+
width: "min(500px, 90vw)",
95+
height: "min(500px, 90vw)",
96+
},
97+
},
98+
"& .navbar": {
99+
position: "absolute",
100+
top: 20,
101+
left: 40,
102+
display: "flex",
103+
justifyContent: "center",
104+
alignItems: "center"
105+
},
106+
"& .buttonsContainer": {
107+
backgroundColor: "white",
108+
marginTop: "50px",
109+
width: "max-content",
110+
padding: "0 20px",
111+
borderRadius: "30px",
112+
justifyContent: "center",
113+
alignItems: "center",
114+
display: "grid",
115+
gridTemplateColumns: "auto auto auto",
116+
gridColumnGap: "10px"
58117
}
59118
})

‎src/index.css‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
body {
22
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
63
-webkit-font-smoothing: antialiased;
74
-moz-osx-font-smoothing: grayscale;
85
}
9-
10-
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12-
monospace;
13-
}

‎src/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import './index.css';
43
import App from './App';
4+
import "./index.css";
55
import reportWebVitals from './reportWebVitals';
66

77
ReactDOM.render(

‎src/onBoardingScreen/OnBoardingScreenHandler.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const cardContent = [{
66
header: "Lorem ipsum dolor",
77
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
88
showButton: false,
9-
imgURL: "/res/onBoardingImage1.png"
9+
imgURL: "/logo512.png"
1010
},
1111
{
1212
id: "02",

‎src/onBoardingScreen/transitionStyles.css‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
body {
2+
margin: 0;
3+
}
4+
15
/* appear - on page load */
26
.fade-appear {
37
opacity: 0;
@@ -17,23 +21,26 @@
1721
transform: scale(1) translatex(250px);
1822
z-index: 1;
1923
}
24+
2025
.slide-enter.slide-enter-active {
21-
opacity: 1;
22-
transform: scale(1) translateY(0);
23-
transition: opacity 1000ms linear 0ms, transform 1000ms ease-in-out 0ms;
26+
opacity: 1;
27+
transform: scale(1) translateY(0);
28+
transition: opacity 1000ms linear 0ms, transform 1000ms ease-in-out 0ms;
2429
}
2530

2631
/* slide exit */
2732
.slide-exit {
28-
opacity: 1;
29-
/* transform: scale(1) translateY(0); */
30-
33+
opacity: 1;
34+
/* transform: scale(1) translateY(0); */
35+
3136
}
37+
3238
.slide-exit.slide-exit-active {
33-
opacity: 0;
34-
/* transform: scale(0.97) translateY(5px); */
35-
transition: opacity 0ms linear,
39+
opacity: 0;
40+
/* transform: scale(0.97) translateY(5px); */
41+
transition: opacity 0ms linear,
3642
}
43+
3744
.slide-exit-done {
3845
opacity: 0;
3946
}

0 commit comments

Comments
 (0)