swith camera view to jsmpeg

web/src/components/JSMpegPlayer.jsx

@@ -5,14 +5,13 @@ 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: [], audio: false}
     );
 
@@ -22,8 +21,7 @@ export default function JSMpegPlayer({ camera }) {
   }, [url]);
 
   return (
-    <div ref={playerRef} className="jsmpeg">
-      <canvas ref={canvasRef} className="relative w-full" />
+    <div ref={playerRef} class="jsmpeg">
     </div>
   );
 }

web/src/index.css

@@ -25,3 +25,7 @@
     transform: rotate(360deg);
   }
 }
+
+.jsmpeg canvas {
+  position: static !important;
+}

web/src/routes/Camera.jsx

@@ -1,5 +1,6 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import AutoUpdatingCameraImage from '../components/AutoUpdatingCameraImage';
+import JSMpegPlayer from '../components/JSMpegPlayer';
 import Button from '../components/Button';
 import Card from '../components/Card';
 import Heading from '../components/Heading';
@@ -16,6 +17,7 @@ export default function Camera({ camera }) {
   const { data: config } = useConfig();
   const apiHost = useApiHost();
   const [showSettings, setShowSettings] = useState(false);
+  const [viewMode, setViewMode] = useState('live');
 
   const cameraConfig = config?.cameras[camera];
   const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject);
@@ -79,9 +81,16 @@ export default function Camera({ camera }) {
     </div>
   ) : null;
 
-  return (
-    <div className="space-y-4">
-      <Heading size="2xl">{camera}</Heading>
+  let player;
+  if (viewMode == 'live') {
+    player = <>
+      <div>
+        <JSMpegPlayer camera={camera} />
+      </div>
+    </>;
+  }
+  else if (viewMode == 'debug') {
+    player = <>
       <div>
         <AutoUpdatingCameraImage camera={camera} searchParams={searchParams} />
       </div>
@@ -93,6 +102,24 @@ export default function Camera({ camera }) {
         <span>{showSettings ? 'Hide' : 'Show'} Options</span>
       </Button>
       {showSettings ? <Card header="Options" elevated={false} content={optionContent} /> : null}
+    </>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <Heading size="2xl">{camera}</Heading>
+      <div>
+        <nav className="flex justify-end">
+          <button onClick={() => setViewMode('live')} className={viewMode == 'live' ? `text-gray-600 py-0 px-4 block hover:text-gray-500 focus:outline-none border-b-2 font-medium border-gray-500` : `text-gray-600 py-0 px-4 block hover:text-gray-500`}>
+            Live
+          </button>
+          <button onClick={() => setViewMode('debug')} className={viewMode == 'debug' ? `text-gray-600 py-0 px-4 block hover:text-gray-500 focus:outline-none border-b-2 font-medium border-gray-500` : `text-gray-600 py-0 px-4 block hover:text-gray-500`}>
+            Debug
+          </button>
+        </nav>
+      </div>
+
+      {player}
 
       <div className="space-y-4">
         <Heading size="sm">Tracked objects</Heading>