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/7] 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/7] 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/7] 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/7] 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 From b22bc16fca24ac75381da26b48940c395ab81921 Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Sun, 18 Jan 2026 11:01:12 -0600 Subject: [PATCH 5/7] i18n fix --- web/src/views/settings/TriggerView.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/web/src/views/settings/TriggerView.tsx b/web/src/views/settings/TriggerView.tsx index 28aa148fe..aabf89294 100644 --- a/web/src/views/settings/TriggerView.tsx +++ b/web/src/views/settings/TriggerView.tsx @@ -664,9 +664,7 @@ export default function TriggerView({ - - {t("name", { ns: "triggers.table.name" })} - + {t("triggers.table.name")} {t("triggers.table.type")} {t("triggers.table.lastTriggered")} From ec5f1911879dcfd434cdc6cc7b4cf4919bdeadd5 Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Sun, 18 Jan 2026 11:38:38 -0600 Subject: [PATCH 6/7] additional logs on ffmpeg exit --- frigate/video.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frigate/video.py b/frigate/video.py index a139c25f1..615c61d61 100755 --- a/frigate/video.py +++ b/frigate/video.py @@ -64,10 +64,12 @@ def stop_ffmpeg(ffmpeg_process: sp.Popen[Any], logger: logging.Logger): try: logger.info("Waiting for ffmpeg to exit gracefully...") ffmpeg_process.communicate(timeout=30) + logger.info("FFmpeg has exited") except sp.TimeoutExpired: logger.info("FFmpeg didn't exit. Force killing...") ffmpeg_process.kill() ffmpeg_process.communicate() + logger.info("FFmpeg has been killed") ffmpeg_process = None From 72eb0352ad2e31c86f3138b5ef2b960e4e18c3e6 Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Mon, 19 Jan 2026 08:33:03 -0600 Subject: [PATCH 7/7] improve no camera view instead of showing an "add camera" message, show a specific message for empty camera groups when frigate already has cameras added --- web/public/locales/en/views/live.json | 10 +++++++ web/src/components/card/EmptyCard.tsx | 4 ++- web/src/views/live/LiveDashboardView.tsx | 33 ++++++++++++++++-------- 3 files changed, 35 insertions(+), 12 deletions(-) diff --git a/web/public/locales/en/views/live.json b/web/public/locales/en/views/live.json index 21f367ea9..c2efef84f 100644 --- a/web/public/locales/en/views/live.json +++ b/web/public/locales/en/views/live.json @@ -181,6 +181,16 @@ "restricted": { "title": "No Cameras Available", "description": "You don't have permission to view any cameras in this group." + }, + "default": { + "title": "No Cameras Configured", + "description": "Get started by connecting a camera to Frigate.", + "buttonText": "Add Camera" + }, + "group": { + "title": "No Cameras in Group", + "description": "This camera group has no assigned or enabled cameras.", + "buttonText": "Manage Groups" } } } diff --git a/web/src/components/card/EmptyCard.tsx b/web/src/components/card/EmptyCard.tsx index 00b22d197..b9943b31a 100644 --- a/web/src/components/card/EmptyCard.tsx +++ b/web/src/components/card/EmptyCard.tsx @@ -35,7 +35,9 @@ export function EmptyCard({ {icon} {TitleComponent} {description && ( -
{description}
+
+ {description} +
)} {buttonText?.length && (