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.
52 lines
1.2 KiB
52 lines
1.2 KiB
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;
|
|
|