You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
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 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>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default App;
|