37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { useRef } from "react";
|
|
import { CAM_BASE } from "../utils/config";
|
|
|
|
async function fetchOverviewImage(cameraSide: string) {
|
|
const response = await fetch(`${CAM_BASE}/${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: () =>
|
|
// typeof document !== "undefined" && document.visibilityState === "hidden"
|
|
// ? SLOW_MS
|
|
// : FAST_MS,
|
|
// refetchIntervalInBackground: false,
|
|
});
|
|
|
|
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);
|
|
}
|