start editor

packages/apps/proof-of-us/package.json

@@ -22,8 +22,10 @@
     "next-themes": "~0.2.1",
     "peerjs": "^1.5.2",
     "react": "^18.2.0",
+    "react-canvas-draw": "^1.2.1",
     "react-dom": "^18.2.0",
     "react-qrcode-logo": "^2.9.0",
+    "react-sketch-canvas": "^6.2.0",
     "socket.io": "^4.7.4",
     "socket.io-client": "^4.7.4"
   },

packages/apps/proof-of-us/src/app/scan/[id]/page.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { CapturePhoto } from '@/components/CapturePhoto/CapturePhoto';
 import { ListSignees } from '@/components/ListSignees/ListSignees';
 import { useAccount } from '@/hooks/account';
 import { useSocket } from '@/hooks/socket';
@@ -38,6 +39,7 @@ const Page: FC<IProps> = ({ params }) => {
           <button onClick={handleRemove}>remove</button>
         )}
       </section>
+      <CapturePhoto />
       scanned Proof Of Us with ID ({params.id})
       <ListSignees />
     </div>

packages/apps/proof-of-us/src/app/user/proof-of-us/[id]/page.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { CapturePhoto } from '@/components/CapturePhoto/CapturePhoto';
 import { ListSignees } from '@/components/ListSignees/ListSignees';
 import { PROOFOFUS_QR_URL } from '@/constants';
 import { useProofOfUs } from '@/hooks/proofOfUs';
@@ -46,6 +47,7 @@ const Page: FC<IProps> = ({ params }) => {
     <div>
       Proof Of Us with ID ({data.tokenId})
       <section>
+        <CapturePhoto />
         <h2>Communication</h2>
         <ListSignees />
       </section>

packages/apps/proof-of-us/src/components/CapturePhoto/CapturePhoto.tsx

@@ -0,0 +1,72 @@
+import type { FC, MouseEvent } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import ReactSketchCanvas from 'react-canvas-draw';
+import { modalClass } from './styles.css';
+
+export const CapturePhoto: FC = () => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [bg, setBg] = useState(undefined);
+
+  useEffect(() => {
+    if (!videoRef.current && !isModalOpen) return;
+
+    navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
+      if (!videoRef.current) return;
+      videoRef.current.srcObject = stream;
+    });
+  }, [isModalOpen]);
+
+  const handleCapture = (evt: MouseEvent<HTMLButtonElement>) => {
+    evt.preventDefault();
+    if (!canvasRef.current || !videoRef.current) return;
+    console.log(canvasRef.current);
+    //const canvas = canvasRef.current.querySelector('svg');
+    const context = canvasRef.current.ctx.drawing;
+
+    console.log(videoRef.current, canvasRef.current.innerHTML);
+    //setBg(videoRef.current);
+
+    context?.drawImage(videoRef.current, 0, 0, 320, 240);
+
+    (videoRef.current?.srcObject as MediaStream)
+      ?.getTracks()
+      .forEach((t) => t.stop());
+
+    setIsModalOpen(false);
+  };
+
+  const handleToggleCaptureModal = (evt: MouseEvent<HTMLButtonElement>) => {
+    evt.preventDefault();
+
+    setIsModalOpen((v) => !v);
+  };
+
+  return (
+    <div>
+      <button onClick={handleToggleCaptureModal}>Capture</button>
+
+      <div>
+        <ReactSketchCanvas
+          hideGridX={true}
+          hideGridY={false}
+          canvasWidth={320}
+          canvasHeight={240}
+          ref={canvasRef}
+        />
+      </div>
+
+      {isModalOpen && (
+        <section className={modalClass}>
+          <input type="file" accept="image/*" capture="user" />
+
+          <video ref={videoRef} id="player" controls autoPlay></video>
+          <button id="capture" onClick={handleCapture}>
+            Capture
+          </button>
+        </section>
+      )}
+    </div>
+  );
+};

packages/apps/proof-of-us/src/components/CapturePhoto/styles.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+export const modalClass = style([
+  {
+    position: 'absolute',
+    background: 'white',
+    inset: 0,
+  },
+]);
+
+export const notificationWrapperClass = style({});