From 4635e64b2ea9c26e968cfe5bddfcd450b2136121 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 17 Jun 2024 14:53:35 -0600
Subject: [PATCH] Use api path to determine type (#12031)

* Use api path to determine type

* Use in both cases

* Fix extension parsing
---
 frigate/api/media.py                              | 9 +++++----
 web/src/components/camera/CameraImage.tsx         | 2 +-
 web/src/components/camera/ResizingCameraImage.tsx | 2 +-
 web/src/components/settings/PolygonCanvas.tsx     | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frigate/api/media.py b/frigate/api/media.py
index 8222fddaf..3f3cdb736 100644
--- a/frigate/api/media.py
+++ b/frigate/api/media.py
@@ -105,6 +105,7 @@ def latest_frame(camera_name):
         "regions": request.args.get("regions", type=int),
     }
     resize_quality = request.args.get("quality", default=70, type=int)
+    extension = os.path.splitext(request.path)[1][1:]
 
     if camera_name in current_app.frigate_config.cameras:
         frame = current_app.detected_frames_processor.get_current_frame(
@@ -147,10 +148,10 @@ def latest_frame(camera_name):
         frame = cv2.resize(frame, dsize=(width, height), interpolation=cv2.INTER_AREA)
 
         ret, img = cv2.imencode(
-            ".webp", frame, [int(cv2.IMWRITE_WEBP_QUALITY), resize_quality]
+            f".{extension}", frame, [int(cv2.IMWRITE_WEBP_QUALITY), resize_quality]
         )
         response = make_response(img.tobytes())
-        response.headers["Content-Type"] = "image/webp"
+        response.headers["Content-Type"] = f"image/{extension}"
         response.headers["Cache-Control"] = "no-store"
         return response
     elif camera_name == "birdseye" and current_app.frigate_config.birdseye.restream:
@@ -165,10 +166,10 @@ def latest_frame(camera_name):
         frame = cv2.resize(frame, dsize=(width, height), interpolation=cv2.INTER_AREA)
 
         ret, img = cv2.imencode(
-            ".webp", frame, [int(cv2.IMWRITE_WEBP_QUALITY), resize_quality]
+            f".{extension}", frame, [int(cv2.IMWRITE_WEBP_QUALITY), resize_quality]
         )
         response = make_response(img.tobytes())
-        response.headers["Content-Type"] = "image/webp"
+        response.headers["Content-Type"] = f"image/{extension}"
         response.headers["Cache-Control"] = "no-store"
         return response
     else:
diff --git a/web/src/components/camera/CameraImage.tsx b/web/src/components/camera/CameraImage.tsx
index b515cda2e..7994c19e1 100644
--- a/web/src/components/camera/CameraImage.tsx
+++ b/web/src/components/camera/CameraImage.tsx
@@ -47,7 +47,7 @@ export default function CameraImage({
       return;
     }
 
-    imgRef.current.src = `${apiHost}api/${name}/latest.jpg?h=${requestHeight}${
+    imgRef.current.src = `${apiHost}api/${name}/latest.webp?h=${requestHeight}${
       searchParams ? `&${searchParams}` : ""
     }`;
   }, [apiHost, name, imgRef, searchParams, requestHeight, config]);
diff --git a/web/src/components/camera/ResizingCameraImage.tsx b/web/src/components/camera/ResizingCameraImage.tsx
index e82d58e5d..f082c81c4 100644
--- a/web/src/components/camera/ResizingCameraImage.tsx
+++ b/web/src/components/camera/ResizingCameraImage.tsx
@@ -89,7 +89,7 @@ export default function CameraImage({
     if (!config || scaledHeight === 0 || !canvasRef.current) {
       return;
     }
-    img.src = `${apiHost}api/${name}/latest.jpg?h=${scaledHeight}${
+    img.src = `${apiHost}api/${name}/latest.webp?h=${scaledHeight}${
       searchParams ? `&${searchParams}` : ""
     }`;
   }, [apiHost, canvasRef, name, img, searchParams, scaledHeight, config]);
diff --git a/web/src/components/settings/PolygonCanvas.tsx b/web/src/components/settings/PolygonCanvas.tsx
index bea79ed2c..9ac4bad70 100644
--- a/web/src/components/settings/PolygonCanvas.tsx
+++ b/web/src/components/settings/PolygonCanvas.tsx
@@ -39,7 +39,7 @@ export function PolygonCanvas({
       const element = new window.Image();
       element.width = width;
       element.height = height;
-      element.src = `${apiHost}api/${camera}/latest.jpg`;
+      element.src = `${apiHost}api/${camera}/latest.webp`;
       return element;
     }
   }, [camera, width, height, apiHost]);