do the thing

src/App.tsx

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

src/app.css

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