preserve aspect ratio

web/src/components/player/BirdseyeLivePlayer.tsx

@@ -37,7 +37,11 @@ export default function BirdseyeLivePlayer({
   } else if (liveMode == "jsmpeg") {
     return (
       <div className={`max-w-[${birdseyeConfig.width}px]`}>
-        <JSMpegPlayer camera="birdseye" />
+        <JSMpegPlayer
+          camera="birdseye"
+          width={birdseyeConfig.width}
+          height={birdseyeConfig.height}
+        />
       </div>
     );
   } else {

web/src/components/player/JSMpegPlayer.tsx

@@ -6,9 +6,16 @@ import { useEffect, useRef } from "react";
 type JSMpegPlayerProps = {
   className?: string;
   camera: string;
+  width: number;
+  height: number;
 };
 
-export default function JSMpegPlayer({ camera, className }: JSMpegPlayerProps) {
+export default function JSMpegPlayer({
+  camera,
+  width,
+  height,
+  className,
+}: JSMpegPlayerProps) {
   const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
   const playerRef = useRef<HTMLDivElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -38,7 +45,11 @@ export default function JSMpegPlayer({ camera, className }: JSMpegPlayerProps) {
 
   return (
     <div className={className} ref={containerRef}>
-      <div ref={playerRef} className="jsmpeg size-full" />
+      <div
+        ref={playerRef}
+        className="jsmpeg size-full"
+        style={{ aspectRatio: width / height }}
+      />
     </div>
   );
 }

web/src/components/player/LivePlayer.tsx

@@ -46,7 +46,8 @@ export default function LivePlayer({
 
   // camera live state
 
-  const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode);
+  // const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode);
+  const liveMode = "jsmpeg";
 
   const [liveReady, setLiveReady] = useState(false);
   useEffect(() => {
@@ -124,6 +125,8 @@ export default function LivePlayer({
       <JSMpegPlayer
         className="size-full flex justify-center rounded-2xl overflow-hidden"
         camera={cameraConfig.name}
+        width={cameraConfig.detect.width}
+        height={cameraConfig.detect.height}
       />
     );
   } else {