34 lines
890 B
TypeScript
34 lines
890 B
TypeScript
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);
|
|
}
|