Set image height to make bandwidth usage lower

web/src/components/camera/CameraImage.tsx

@@ -1,5 +1,5 @@
 import { useApiHost } from "@/api";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import useSWR from "swr";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { useResizeObserver } from "@/hooks/resize-observer";
@@ -27,18 +27,29 @@ export default function CameraImage({
  const enabled = config ? config.cameras[camera].enabled : "True";
  const [isPortraitImage, setIsPortraitImage] = useState(false);
 
+ const [{ width: containerWidth, height: containerHeight }] =
+ useResizeObserver(containerRef);
+
+ const requestHeight = useMemo(() => {
+ if (!config || containerHeight == 0) {
+ return 360;
+ }
+
+ return Math.min(
+ config.cameras[camera].detect.height,
+ Math.round(containerHeight * 1.1),
+ );
+ }, [config, camera, containerHeight]);
+
  useEffect(() => {
  if (!config || !imgRef.current) {
  return;
  }
 
- imgRef.current.src = `${apiHost}api/${name}/latest.jpg${
- searchParams ? `?${searchParams}` : ""
+ imgRef.current.src = `${apiHost}api/${name}/latest.jpg?h=${requestHeight}${
+ searchParams ? `&${searchParams}` : ""
  }`;
- }, [apiHost, name, imgRef, searchParams, config]);
-
- const [{ width: containerWidth, height: containerHeight }] =
- useResizeObserver(containerRef);
+ }, [apiHost, name, imgRef, searchParams, requestHeight, config]);
 
  return (
  <div className={className} ref={containerRef}>