|
|
|
@ -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> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|