functioning birdseye view

web/src/App.jsx

@@ -27,6 +27,7 @@ export default function App() {
                 <Router>
                   <AsyncRoute path="/cameras/:camera/editor" getComponent={Routes.getCameraMap} />
                   <AsyncRoute path="/cameras/:camera" getComponent={Routes.getCamera} />
+                  <AsyncRoute path="/birdseye" getComponent={Routes.getBirdseye} />
                   <AsyncRoute path="/events/:eventId" getComponent={Routes.getEvent} />
                   <AsyncRoute path="/events" getComponent={Routes.getEvents} />
                   <AsyncRoute path="/recording/:camera/:date?/:hour?/:seconds?" getComponent={Routes.getRecording} />

web/src/Sidebar.jsx

@@ -49,6 +49,7 @@ export default function Sidebar() {
           ) : null
         }
       </Match>
+      <Destination href="/birdseye" text="Birdseye" />
       <Destination href="/events" text="Events" />
       <Destination href="/debug" text="Debug" />
       <Separator />

web/src/components/JSMpegPlayer.jsx

@@ -0,0 +1,29 @@
+import { h } from 'preact';
+import { baseUrl } from '../api/baseUrl';
+import { useRef, useEffect } from 'preact/hooks';
+import JSMpeg from '@cycjimmy/jsmpeg-player';
+
+export default function JSMpegPlayer({ camera }) {
+  const playerRef = useRef();
+  const canvasRef = useRef();
+  const url = `${baseUrl.replace(/^http/, 'ws')}/live/${camera}`
+
+  useEffect(() => {
+    const video = new JSMpeg.VideoElement(
+      playerRef.current,
+      url,
+      {canvas: canvasRef.current},
+      {protocols: []}
+    );
+
+    return () => {
+      video.destroy();
+    };
+  }, [url]);
+
+  return (
+    <div ref={playerRef} className="jsmpeg">
+      <canvas ref={canvasRef} className="relative w-full" />
+    </div>
+  );
+}

web/src/routes/Birdseye.jsx

@@ -0,0 +1,14 @@
+import { h } from 'preact';
+import JSMpegPlayer from '../components/JSMpegPlayer';
+import Heading from '../components/Heading';
+
+export default function Birdseye() {
+  return (
+    <div className="space-y-4">
+      <Heading size="2xl">Birdseye</Heading>
+      <div>
+        <JSMpegPlayer camera="birdseye" />
+      </div>
+    </div>
+  );
+}

web/src/routes/index.js

@@ -13,6 +13,11 @@ export async function getEvent(url, cb, props) {
   return module.default;
 }
 
+export async function getBirdseye(url, cb, props) {
+  const module = await import('./Birdseye.jsx');
+  return module.default;
+}
+
 export async function getEvents(url, cb, props) {
   const module = await import('./Events.jsx');
   return module.default;