do the thing

master
Elijah Lucian 1 year ago
parent 9f1e2c1ca5
commit 92720ddaa7
  1. 37
      src/App.tsx
  2. 14
      src/app.css

@ -1,15 +1,50 @@
import { useEffect, useState, useRef } from "react";
import Webcam from "react-webcam";
import "./app.css";
function App() {
const [success, setSuccess] = useState(false);
const webcamRef = useRef<Webcam | null>(null);
useEffect(() => {
const listener = () => {
console.log("click");
setSuccess((success) => {
if (success) return !success;
const frame = webcamRef.current?.getScreenshot();
console.log("send current frame to server");
console.log("on success, change to success page");
console.log("if state is 'verified', return to camera mode ");
console.log(frame);
return !success;
});
};
window.addEventListener("click", listener);
return () => window.removeEventListener("click", listener);
}, []);
console.log("State", success);
return (
<div className="app">
<Webcam className="webcam" />
<Webcam ref={webcamRef} className="webcam" />
<div className="overlay"></div>
<div className="header"></div>
<div className="headtext">Scan the Record QR Code.</div>
<div className="footer"></div>
{success && (
<div className="success">
<div>Record Valid!</div>
</div>
)}
</div>
);
}

@ -9,6 +9,7 @@ body {
}
.app {
user-select: none;
height: 100vh;
overflow: hidden;
display: grid;
@ -38,6 +39,19 @@ body {
font-size: 24pt;
}
.app .success {
grid-column: 1/5;
grid-row: 1/6;
font-size: 48pt;
color: #96fc46;
background: #000000;
display: flex;
}
.app .success div {
user-select: none;
margin: auto;
}
.app .footer {
grid-column: 1/4;
grid-row: 5/6;

Loading…
Cancel
Save