From abdf30dc47de01f326aa32b019bdfb70fedd9ed5 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 3 Jan 2024 08:12:27 -0600
Subject: [PATCH] birdseye mse

---
 .../components/player/BirdseyeLivePlayer.tsx   | 16 +++++++++++++++-
 web/src/components/player/LivePlayer.tsx       | 10 +---------
 web/src/components/player/MsePlayer.tsx        | 18 ++++++------------
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/web/src/components/player/BirdseyeLivePlayer.tsx b/web/src/components/player/BirdseyeLivePlayer.tsx
index a43e2266a..2c742ee1c 100644
--- a/web/src/components/player/BirdseyeLivePlayer.tsx
+++ b/web/src/components/player/BirdseyeLivePlayer.tsx
@@ -2,6 +2,7 @@ import WebRtcPlayer from "./WebRTCPlayer";
 import { BirdseyeConfig } from "@/types/frigateConfig";
 import ActivityIndicator from "../ui/activity-indicator";
 import JSMpegPlayer from "./JSMpegPlayer";
+import MSEPlayer from "./MsePlayer";
 
 type LivePlayerProps = {
   birdseyeConfig: BirdseyeConfig;
@@ -19,7 +20,20 @@ export default function BirdseyeLivePlayer({
       </div>
     );
   } else if (liveMode == "mse") {
-    return <div className="max-w-5xl">Not yet implemented</div>;
+    if ("MediaSource" in window || "ManagedMediaSource" in window) {
+      return (
+        <div className="max-w-5xl">
+          <MSEPlayer camera="birdseye" />
+        </div>
+      );
+    } else {
+      return (
+        <div className="w-5xl text-center text-sm">
+          MSE is only supported on iOS 17.1+. You'll need to update if available
+          or use jsmpeg / webRTC streams. See the docs for more info.
+        </div>
+      );
+    }
   } else if (liveMode == "jsmpeg") {
     return (
       <div className={`max-w-[${birdseyeConfig.width}px]`}>
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index fca7cb440..93fb61b9e 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -67,15 +67,7 @@ export default function LivePlayer({
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
       return (
         <div className="max-w-5xl">
-          <MSEPlayer
-            src={
-              new URL(
-                `${baseUrl.replace(/^http/, "ws")}live/webrtc/api/ws?src=${
-                  cameraConfig.live.stream_name
-                }`
-              )
-            }
-          />
+          <MSEPlayer camera={cameraConfig.live.stream_name} />
         </div>
       );
     } else {
diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index c5b01c02e..6051ada07 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -1,10 +1,11 @@
+import { baseUrl } from "@/api/baseUrl";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 type MSEPlayerProps = {
-  src: URL;
+  camera: string;
 };
 
-function MSEPlayer({ src }: MSEPlayerProps) {
+function MSEPlayer({ camera }: MSEPlayerProps) {
   let connectTS: number = 0;
 
   const RECONNECT_TIMEOUT: number = 30000;
@@ -33,16 +34,9 @@ function MSEPlayer({ src }: MSEPlayerProps) {
   const msRef = useRef<MediaSource | null>(null);
 
   const wsURL = useMemo(() => {
-    let updatedSrc = src.toString();
-
-    if (updatedSrc.startsWith("http")) {
-      updatedSrc = `ws${updatedSrc.substring(4)}`;
-    } else if (updatedSrc.startsWith("/")) {
-      updatedSrc = `ws${location.origin.substring(4)}${src}`;
-    }
-
-    return updatedSrc;
-  }, [src]);
+    console.log(camera);
+    return `${baseUrl.replace(/^http/, "ws")}live/webrtc/api/ws?src=${camera}`;
+  }, [camera]);
 
   const play = () => {
     const currentVideo = videoRef.current;