initial try

web/src/components/player/BirdseyeLivePlayer.tsx

@@ -39,6 +39,7 @@ export default function BirdseyeLivePlayer({
       <div className={`max-w-[${birdseyeConfig.width}px]`}>
         <JSMpegPlayer
           camera="birdseye"
+          className="w-full flex justify-center rounded-2xl overflow-hidden"
           width={birdseyeConfig.width}
           height={birdseyeConfig.height}
         />

web/src/pages/Live.tsx

@@ -18,9 +18,16 @@ function Live() {
 
     if (cameraGroup) {
       const group = config.camera_groups[cameraGroup];
-      return Object.values(config.cameras)
+      console.log(config.cameras);
+      const groupCameras = Object.values(config.cameras)
         .filter((conf) => conf.enabled && group.cameras.includes(conf.name))
         .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
+      if (group.cameras.includes("birdseye")) {
+        groupCameras.push({
+          name: "birdseye",
+        });
+      }
+      return groupCameras;
     }
 
     return Object.values(config.cameras)

web/src/pages/UIPlayground.tsx

@@ -22,6 +22,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
 
 // Color data
 const colors = [
@@ -184,6 +185,8 @@ function UIPlayground() {
   };
 
   const [isEventsReviewTimeline, setIsEventsReviewTimeline] = useState(true);
+  const birdseyeConfig = config?.birdseye;
+  console.log(birdseyeConfig);
 
   return (
     <>
@@ -243,6 +246,14 @@ function UIPlayground() {
               <div className="w-[40px] my-4">
                 <CameraActivityIndicator />
               </div>
+              <div className="">
+                {birdseyeConfig && (
+                  <BirdseyeLivePlayer
+                    birdseyeConfig={birdseyeConfig}
+                    liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
+                  />
+                )}
+              </div>
               <p>
                 <Button onClick={handleZoomOut} disabled={zoomLevel === 0}>
                   Zoom Out

web/src/views/live/LiveDashboardView.tsx

@@ -133,6 +133,7 @@ export default function LiveDashboardView({
           } else {
             grow = "aspect-video";
           }
+          // console.log(camera.name);
           return (
             <LivePlayer
               key={camera.name}

web/vite.config.ts

@@ -12,24 +12,24 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: "http://localhost:5000",
+        target: "http://192.168.5.4:5000",
         ws: true,
       },
       "/vod": {
-        target: "http://localhost:5000",
+        target: "http://192.168.5.4:5000",
       },
       "/clips": {
-        target: "http://localhost:5000",
+        target: "http://192.168.5.4:5000",
       },
       "/exports": {
-        target: "http://localhost:5000",
+        target: "http://192.168.5.4:5000",
       },
       "/ws": {
-        target: "ws://localhost:5000",
+        target: "ws://192.168.5.4:5000",
         ws: true,
       },
       "/live": {
-        target: "ws://localhost:5000",
+        target: "ws://192.168.5.4:5000",
         changeOrigin: true,
         ws: true,
       },