From 3f61ae1b78eee9ef7a69783868e065d3ebe37baa Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Sun, 18 Jan 2026 07:50:19 -0600 Subject: [PATCH 1/4] tracking details tweaks - fix 4:3 layout - get and use aspect of record stream if different from detect stream --- .../overlay/detail/TrackingDetails.tsx | 19 +++++++++++++++---- web/src/types/record.ts | 1 + 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/web/src/components/overlay/detail/TrackingDetails.tsx b/web/src/components/overlay/detail/TrackingDetails.tsx index 767a7072a..03b6dd6c4 100644 --- a/web/src/components/overlay/detail/TrackingDetails.tsx +++ b/web/src/components/overlay/detail/TrackingDetails.tsx @@ -13,7 +13,7 @@ import HlsVideoPlayer from "@/components/player/HlsVideoPlayer"; import { baseUrl } from "@/api/baseUrl"; import { REVIEW_PADDING } from "@/types/review"; import { - ASPECT_VERTICAL_LAYOUT, + ASPECT_PORTRAIT_LAYOUT, ASPECT_WIDE_LAYOUT, Recording, } from "@/types/record"; @@ -39,6 +39,7 @@ import { useApiHost } from "@/api"; import ImageLoadingIndicator from "@/components/indicators/ImageLoadingIndicator"; import ObjectTrackOverlay from "../ObjectTrackOverlay"; import { useIsAdmin } from "@/hooks/use-is-admin"; +import { VideoResolutionType } from "@/types/live"; type TrackingDetailsProps = { className?: string; @@ -253,16 +254,25 @@ export function TrackingDetails({ const [timelineSize] = useResizeObserver(timelineContainerRef); + const [fullResolution, setFullResolution] = useState({ + width: 0, + height: 0, + }); + const aspectRatio = useMemo(() => { if (!config) { return 16 / 9; } + if (fullResolution.width && fullResolution.height) { + return fullResolution.width / fullResolution.height; + } + return ( config.cameras[event.camera].detect.width / config.cameras[event.camera].detect.height ); - }, [config, event]); + }, [config, event, fullResolution]); const label = event.sub_label ? event.sub_label @@ -460,7 +470,7 @@ export function TrackingDetails({ return "normal"; } else if (aspectRatio > ASPECT_WIDE_LAYOUT) { return "wide"; - } else if (aspectRatio < ASPECT_VERTICAL_LAYOUT) { + } else if (aspectRatio < ASPECT_PORTRAIT_LAYOUT) { return "tall"; } else { return "normal"; @@ -556,6 +566,7 @@ export function TrackingDetails({ onSeekToTime={handleSeekToTime} onUploadFrame={onUploadFrameToPlus} onPlaying={() => setIsVideoLoading(false)} + setFullResolution={setFullResolution} isDetailMode={true} camera={event.camera} currentTimeOverride={currentTime} @@ -623,7 +634,7 @@ export function TrackingDetails({
1 && aspectRatio < 1.5 + aspectRatio > 1 && aspectRatio < ASPECT_PORTRAIT_LAYOUT ? "lg:basis-3/5" : "lg:basis-2/5", )} diff --git a/web/src/types/record.ts b/web/src/types/record.ts index 25820c3d9..dbe43653a 100644 --- a/web/src/types/record.ts +++ b/web/src/types/record.ts @@ -44,4 +44,5 @@ export type RecordingStartingPoint = { export type RecordingPlayerError = "stalled" | "startup"; export const ASPECT_VERTICAL_LAYOUT = 1.5; +export const ASPECT_PORTRAIT_LAYOUT = 1.333; export const ASPECT_WIDE_LAYOUT = 2; From 39914cc3ad10b504b8ed86634388d19e78cc3b11 Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Sun, 18 Jan 2026 08:24:57 -0600 Subject: [PATCH 2/4] aspect ratio docs tip --- docs/docs/frigate/camera_setup.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/docs/frigate/camera_setup.md b/docs/docs/frigate/camera_setup.md index 06d7d3b4a..17a650a1f 100644 --- a/docs/docs/frigate/camera_setup.md +++ b/docs/docs/frigate/camera_setup.md @@ -11,6 +11,12 @@ Cameras configured to output H.264 video and AAC audio will offer the most compa - **Stream Viewing**: This stream will be rebroadcast as is to Home Assistant for viewing with the stream component. Setting this resolution too high will use significant bandwidth when viewing streams in Home Assistant, and they may not load reliably over slower connections. +::: tip + +For the best experience in Frigate's UI, configure your camera so that the detection and recording streams use the same aspect ratio. For example, if your main stream is 3840x2160 (16:9), set your substream to 640x360 (also 16:9) instead of 640x480 (4:3). While not strictly required, matching aspect ratios helps ensure seamless live stream display and preview/recordings playback. + +:: + ### Choosing a detect resolution The ideal resolution for detection is one where the objects you want to detect fit inside the dimensions of the model used by Frigate (320x320). Frigate does not pass the entire camera frame to object detection. It will crop an area of motion from the full frame and look in that portion of the frame. If the area being inspected is larger than 320x320, Frigate must resize it before running object detection. Higher resolutions do not improve the detection accuracy because the additional detail is lost in the resize. Below you can see a reference for how large a 320x320 area is against common resolutions. From a42b28bb5e00e2b6ab3b4cbab5a77f4c7cc89340 Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Sun, 18 Jan 2026 08:26:01 -0600 Subject: [PATCH 3/4] spacing --- docs/docs/frigate/camera_setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/frigate/camera_setup.md b/docs/docs/frigate/camera_setup.md index 17a650a1f..2347b1f1a 100644 --- a/docs/docs/frigate/camera_setup.md +++ b/docs/docs/frigate/camera_setup.md @@ -11,7 +11,7 @@ Cameras configured to output H.264 video and AAC audio will offer the most compa - **Stream Viewing**: This stream will be rebroadcast as is to Home Assistant for viewing with the stream component. Setting this resolution too high will use significant bandwidth when viewing streams in Home Assistant, and they may not load reliably over slower connections. -::: tip +:::tip For the best experience in Frigate's UI, configure your camera so that the detection and recording streams use the same aspect ratio. For example, if your main stream is 3840x2160 (16:9), set your substream to 640x360 (also 16:9) instead of 640x480 (4:3). While not strictly required, matching aspect ratios helps ensure seamless live stream display and preview/recordings playback. From 7b1b02de177cb4b185672be1633d0c12920e1e1f Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Sun, 18 Jan 2026 08:26:11 -0600 Subject: [PATCH 4/4] fix --- docs/docs/frigate/camera_setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/frigate/camera_setup.md b/docs/docs/frigate/camera_setup.md index 2347b1f1a..64c650c13 100644 --- a/docs/docs/frigate/camera_setup.md +++ b/docs/docs/frigate/camera_setup.md @@ -15,7 +15,7 @@ Cameras configured to output H.264 video and AAC audio will offer the most compa For the best experience in Frigate's UI, configure your camera so that the detection and recording streams use the same aspect ratio. For example, if your main stream is 3840x2160 (16:9), set your substream to 640x360 (also 16:9) instead of 640x480 (4:3). While not strictly required, matching aspect ratios helps ensure seamless live stream display and preview/recordings playback. -:: +::: ### Choosing a detect resolution