Reactify MSE player component (#9163)

* make mse a functional component with react hooks

* iOS 17 fixes

* birdseye mse

* remove debug

* fix test

web/src/components/player/LivePlayer.tsx

@@ -9,10 +9,8 @@ import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
 import { Switch } from "../ui/switch";
 import { Label } from "../ui/label";
 import { usePersistence } from "@/hooks/use-persistence";
-// @ts-expect-error we know this does not have types
-import MSEPlayer from "@/lib/MsePlayer";
+import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
-import { baseUrl } from "@/api/baseUrl";
 
 const emptyObject = Object.freeze({});
 
@@ -68,16 +66,7 @@ export default function LivePlayer({
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
       return (
         <div className="max-w-5xl">
-          <MSEPlayer
-            mode="mse"
-            src={
-              new URL(
-                `${baseUrl.replace(/^http/, "ws")}live/webrtc/api/ws?src=${
-                  cameraConfig.live.stream_name
-                }`
-              )
-            }
-          />
+          <MSEPlayer camera={cameraConfig.live.stream_name} />
         </div>
       );
     } else {