Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Set image height to make bandwidth usage lower (#12024)

Browse Source
This commit is contained in:
Nicolas Mowen 2024-06-17 08:21:51 -06:00 committed by GitHub
parent 24770148a7
commit ef304e6f7f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/components/camera/CameraImage.tsx
View File

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