- added Konvas lib

- added feed from proof of concept

src/features/cameras/components/CameraGrid.tsx

@@ -0,0 +1,11 @@
+import VideoFeedCard from "./VideoFeedCard";
+
+const CameraGrid = () => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2">
+      <VideoFeedCard />
+    </div>
+  );
+};
+
+export default CameraGrid;

src/features/cameras/components/VideoFeedCard.tsx

@@ -0,0 +1,13 @@
+import Card from "../../../ui/Card";
+
+import VideoFeedGridPainter from "./VideoFeedGridPainter";
+
+const VideoFeedCard = () => {
+  return (
+    <Card className="w-full md:w-[70%]">
+      <VideoFeedGridPainter />
+    </Card>
+  );
+};
+
+export default VideoFeedCard;

src/features/cameras/components/VideoFeedGridPainter.tsx

@@ -0,0 +1,75 @@
+import { useRef, type RefObject } from "react";
+import { Stage, Layer, Image, Rect } from "react-konva";
+import { useCreateVideoSnapshot } from "../hooks/useGetvideoSnapshots";
+
+const VideoFeedGridPainter = () => {
+  const { latestBitmapRef } = useCreateVideoSnapshot();
+  const isDrawing = useRef(false);
+
+  const rows = 100;
+  const cols = 100;
+  const size = 10;
+  const gap = 0;
+
+  const squares = [];
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      squares.push(
+        <Rect
+          key={`${row}-${col}`}
+          x={col * (size + gap)}
+          y={row * (size + gap)}
+          width={size}
+          height={size}
+          fill="#ddd"
+          stroke="black"
+          strokeWidth={0.5}
+          opacity={0.5}
+        />,
+      );
+    }
+  }
+
+  const getCoords = (e) => {
+    isDrawing.current = true;
+  };
+
+  const handleMouseMove = (e) => {
+    if (!isDrawing.current) {
+      return;
+    }
+    const pos = e.target.getStage().getPointerPosition();
+    console.log(pos);
+  };
+
+  const handleMouseUp = () => {
+    isDrawing.current = false;
+  };
+
+  const draw = (bmp: RefObject<ImageBitmap | null>) => {
+    if (!bmp || !bmp.current) {
+      return;
+    } else {
+      const frame = bmp.current;
+      return frame;
+    }
+  };
+
+  return (
+    <Stage
+      width={640}
+      height={360}
+      onMouseDown={getCoords}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+    >
+      <Layer>
+        <Image image={draw(latestBitmapRef)} width={640} height={360} />
+      </Layer>
+      <Layer opacity={0.3}>{squares}</Layer>
+    </Stage>
+  );
+};
+
+export default VideoFeedGridPainter;