add playing check for webrtc

web/src/components/player/LivePlayer.tsx

@@ -15,7 +15,6 @@ import { MdCircle, MdLeakAdd, MdSelectAll } from "react-icons/md";
 import { BsSoundwave } from "react-icons/bs";
 import Chip from "../Chip";
 import useCameraActivity from "@/hooks/use-camera-activity";
-import CameraImage from "../camera/CameraImage";
 
 const emptyObject = Object.freeze({});
 
@@ -90,15 +89,16 @@ export default function LivePlayer({
   if (liveMode == "webrtc") {
     player = (
       <WebRtcPlayer
-        className="rounded-2xl w-full"
+        className={`rounded-2xl h-full ${liveReady ? "" : "hidden"}`}
         camera={cameraConfig.live.stream_name}
+        onPlaying={() => setLiveReady(true)}
       />
     );
   } else if (liveMode == "mse") {
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
       player = (
         <MSEPlayer
-          className="rounded-2xl"
+          className={`rounded-2xl h-full ${liveReady ? "" : "hidden"}`}
           camera={cameraConfig.name}
           onPlaying={() => setLiveReady(true)}
         />

web/src/components/player/WebRTCPlayer.tsx

@@ -4,15 +4,13 @@ import { useCallback, useEffect, useRef } from "react";
 type WebRtcPlayerProps = {
   className?: string;
   camera: string;
-  width?: number;
-  height?: number;
+  onPlaying?: () => void;
 };
 
 export default function WebRtcPlayer({
   className,
   camera,
-  width,
-  height,
+  onPlaying,
 }: WebRtcPlayerProps) {
   const pcRef = useRef<RTCPeerConnection | undefined>();
   const videoRef = useRef<HTMLVideoElement | null>(null);
@@ -154,10 +152,8 @@ export default function WebRtcPlayer({
         className={className}
         autoPlay
         playsInline
-        controls
         muted
-        width={width}
-        height={height}
+        onLoadedData={onPlaying}
       />
     </div>
   );