initial commit

src/hooks/useOverviewVideo.ts

@@ -0,0 +1,33 @@
+import { useQuery } from "@tanstack/react-query";
+import { useRef } from "react";
+
+const apiUrl = import.meta.env.VITE_BASEURL;
+
+async function fetchOverviewImage(cameraSide: string) {
+  const response = await fetch(`${apiUrl}${cameraSide}-preview`);
+  if (!response.ok) throw new Error("could not fetch overview image");
+  return response.blob();
+}
+
+export function useOverviewVideo() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const { isPending, isError, data } = useQuery({
+    queryKey: ["overviewVideo"],
+    queryFn: () => fetchOverviewImage("CameraFront"),
+    refetchInterval: 500,
+  });
+
+  if (isPending) return;
+
+  if (isError) return;
+
+  const img = new Image();
+  const imgUrl = URL.createObjectURL(data);
+  img.src = imgUrl;
+
+  const canvas = canvasRef.current;
+  if (!canvas) return;
+  const ctx = canvas.getContext("2d");
+
+  ctx?.drawImage(img, 0, 0);
+}