Add ability to restream birdseye (#4761)

* Try using RTSP for restream

* Add ability to get snapshot of birdseye when birdseye restream is enabled

* Write to pipe instead of encoding mpeg1

* Write to cache instead

* Use const for location

* Formatting

* Add hardware encoding for birdseye based on ffmpeg preset

* Provide framerate

* Adjust args

* Fix order

* Delete pipe file if it exists

* Cleanup spacing

* Fix spacing

web/src/routes/Birdseye.jsx

@@ -1,14 +1,83 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
+import { usePersistence } from '../context';
+import ActivityIndicator from '../components/ActivityIndicator';
 import JSMpegPlayer from '../components/JSMpegPlayer';
 import Heading from '../components/Heading';
+import WebRtcPlayer from '../components/WebRtcPlayer';
+import MsePlayer from '../components/MsePlayer';
+import useSWR from 'swr';
+import videojs from 'video.js';
 
 export default function Birdseye() {
+  const { data: config } = useSWR('config');
+
+  const [viewSource, setViewSource, sourceIsLoaded] = usePersistence('birdseye-source', 'mse');
+  const sourceValues = ['mse', 'webrtc', 'jsmpeg'];
+
+  if (!config || !sourceIsLoaded) {
+    return <ActivityIndicator />;
+  }
+
+  let player;
+  if (viewSource == 'mse' && config.restream.birdseye) {
+    if (videojs.browser.IS_IOS) {
+      player = (
+        <Fragment>
+          <div className="w-5xl text-center text-sm">
+            MSE is not supported on iOS devices. You'll need to use jsmpeg or webRTC. See the docs for more info.
+          </div>
+        </Fragment>
+      );
+    } else {
+      player = (
+        <Fragment>
+          <div className="max-w-5xl">
+            <MsePlayer camera="birdseye" />
+          </div>
+        </Fragment>
+      );
+    }
+  } else if (viewSource == 'webrtc' && config.restream.birdseye) {
+    player = (
+      <Fragment>
+        <div className="max-w-5xl">
+          <WebRtcPlayer camera="birdseye" />
+        </div>
+      </Fragment>
+    );
+  } else {
+    player = (
+      <Fragment>
+        <div className="max-w-7xl">
+          <JSMpegPlayer camera="birdseye" />
+        </div>
+      </Fragment>
+    );
+  }
+
   return (
     <div className="space-y-4 p-2 px-4">
-      <Heading size="2xl">Birdseye</Heading>
-      <div className="max-w-7xl">
-        <JSMpegPlayer camera="birdseye" />
+      <div className="flex justify-between">
+        <Heading className="p-2" size="2xl">
+          Birdseye
+        </Heading>
+
+        {config.restream.birdseye && (
+          <select
+            className="basis-1/8 cursor-pointer rounded dark:bg-slate-800"
+            value={viewSource}
+            onChange={(e) => setViewSource(e.target.value)}
+          >
+            {sourceValues.map((item) => (
+              <option key={item} value={item}>
+                {item}
+              </option>
+            ))}
+          </select>
+        )}
       </div>
+
+      {player}
     </div>
   );
 }