From 0a8249d6fb11e60091eb553a733c10e8339395ae Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 30 Jun 2023 06:34:10 -0600
Subject: [PATCH] Fix Bad Resize For Camera Snapshot (#6797)

* Catch cases where incorrect size is requested

* Set a default if calculated height is incorrect
---
 frigate/http.py                    |  9 +++++++
 web/src/components/CameraImage.jsx | 41 ++++++++++++++++--------------
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/frigate/http.py b/frigate/http.py
index 44706f2c2..9c55d68c4 100644
--- a/frigate/http.py
+++ b/frigate/http.py
@@ -1118,6 +1118,15 @@ def latest_frame(camera_name):
         height = int(request.args.get("h", str(frame.shape[0])))
         width = int(height * frame.shape[1] / frame.shape[0])
 
+        if not frame:
+            return "Unable to get valid frame from {}".format(camera_name), 500
+
+        if height < 1 or width < 1:
+            return (
+                "Invalid height / width requested :: {} / {}".format(height, width),
+                400,
+            )
+
         frame = cv2.resize(frame, dsize=(width, height), interpolation=cv2.INTER_AREA)
 
         ret, jpg = cv2.imencode(
diff --git a/web/src/components/CameraImage.jsx b/web/src/components/CameraImage.jsx
index 98754e506..ce4e4bef7 100644
--- a/web/src/components/CameraImage.jsx
+++ b/web/src/components/CameraImage.jsx
@@ -28,13 +28,18 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
 
   const scaledHeight = useMemo(() => {
     const scaledHeight = Math.floor(availableWidth / aspectRatio);
-    return stretch ? scaledHeight : Math.min(scaledHeight, height);
+    const finalHeight = stretch ? scaledHeight : Math.min(scaledHeight, height);
+
+    if (finalHeight > 0) {
+      return finalHeight;
+    }
+
+    return 100;
   }, [availableWidth, aspectRatio, height, stretch]);
-  const scaledWidth = useMemo(() => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth), [
-    scaledHeight,
-    aspectRatio,
-    scrollBarWidth,
-  ]);
+  const scaledWidth = useMemo(
+    () => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth),
+    [scaledHeight, aspectRatio, scrollBarWidth]
+  );
 
   const img = useMemo(() => new Image(), []);
   img.onload = useCallback(
@@ -58,18 +63,16 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
 
   return (
     <div className="relative w-full" ref={containerRef}>
-      {
-        (enabled) ?
-          <canvas data-testid="cameraimage-canvas" height={scaledHeight} ref={canvasRef} width={scaledWidth} />
-          : <div class="text-center pt-6">Camera is disabled in config, no stream or snapshot available!</div>
-      }
-      {
-        (!hasLoaded && enabled) ? (
-          <div className="absolute inset-0 flex justify-center" style={`height: ${scaledHeight}px`}>
-            <ActivityIndicator />
-          </div>
-        ) : null
-      }
-    </div >
+      {enabled ? (
+        <canvas data-testid="cameraimage-canvas" height={scaledHeight} ref={canvasRef} width={scaledWidth} />
+      ) : (
+        <div class="text-center pt-6">Camera is disabled in config, no stream or snapshot available!</div>
+      )}
+      {!hasLoaded && enabled ? (
+        <div className="absolute inset-0 flex justify-center" style={`height: ${scaledHeight}px`}>
+          <ActivityIndicator />
+        </div>
+      ) : null}
+    </div>
   );
 }