Improve live streaming (#16447)

* config file changes * config migrator * stream selection on single camera live view * camera streaming settings dialog * manage persistent group streaming settings * apply streaming settings in camera groups * add ability to clear all streaming settings from settings * docs * update reference config * fixes * clarify docs * use first stream as default in dialog * ensure still image is visible after switching stream type to none * docs * clarify docs * add ability to continue playing stream in background * fix props * put stream selection inside dropdown on desktop * add capabilities to live mode hook * live context menu component * resize observer: only return new dimensions if they've actually changed * pass volume prop to players * fix slider bug, https://github.com/shadcn-ui/ui/issues/1448 * update react-grid-layout * prevent animated transitions on draggable grid layout * add context menu to dashboards * use provider * streaming dialog from context menu * docs * add jsmpeg warning to context menu * audio and two way talk indicators in single camera view * add link to debug view * don't use hook * create manual events from live camera view * maintain grow classes on grid items * fix initial volume state on default dashboard * fix pointer events causing context menu to end up underneath image on iOS * mobile drawer tweaks * stream stats * show settings menu for non-restreamed cameras * consistent settings icon * tweaks * optional stats to fix birdseye player * add toaster to live camera view * fix crash on initial save in streaming dialog * don't require restreaming for context menu streaming settings * add debug view to context menu * stats fixes * update docs * always show stream info when restreamed * update camera streaming dialog * make note of no h265 support for webrtc * docs clarity * ensure docs show streams as a dict * docs clarity * fix css file * tweaks
2026-07-31 16:12:19 +03:00 · 2025-02-10 09:42:35 -07:00
parent 2a28964e63
commit dd7820e4ee
31 changed files with 2681 additions and 219 deletions
@@ -0,0 +1,100 @@
+import { cn } from "@/lib/utils";
+import { PlayerStatsType } from "@/types/live";
+
+type PlayerStatsProps = {
+  stats: PlayerStatsType;
+  minimal: boolean;
+};
+
+export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
+  const fullStatsContent = (
+    <>
+      <p>
+        <span className="text-white/70">Stream Type:</span>{" "}
+        <span className="text-white">{stats.streamType}</span>
+      </p>
+      <p>
+        <span className="text-white/70">Bandwidth:</span>{" "}
+        <span className="text-white">{stats.bandwidth.toFixed(2)} kbps</span>
+      </p>
+      {stats.latency != undefined && (
+        <p>
+          <span className="text-white/70">Latency:</span>{" "}
+          <span
+            className={`text-white ${stats.latency > 2 ? "text-danger" : ""}`}
+          >
+            {stats.latency.toFixed(2)} seconds
+          </span>
+        </p>
+      )}
+      <p>
+        <span className="text-white/70">Total Frames:</span>{" "}
+        <span className="text-white">{stats.totalFrames}</span>
+      </p>
+      {stats.droppedFrames != undefined && (
+        <p>
+          <span className="text-white/70">Dropped Frames:</span>{" "}
+          <span className="text-white">{stats.droppedFrames}</span>
+        </p>
+      )}
+      {stats.decodedFrames != undefined && (
+        <p>
+          <span className="text-white/70">Decoded Frames:</span>{" "}
+          <span className="text-white">{stats.decodedFrames}</span>
+        </p>
+      )}
+      {stats.droppedFrameRate != undefined && (
+        <p>
+          <span className="text-white/70">Dropped Frame Rate:</span>{" "}
+          <span className="text-white">
+            {stats.droppedFrameRate.toFixed(2)}%
+          </span>
+        </p>
+      )}
+    </>
+  );
+
+  const minimalStatsContent = (
+    <div className="flex flex-row items-center justify-center gap-4">
+      <div className="flex flex-col items-center justify-start gap-1">
+        <span className="text-white/70">Type</span>
+        <span className="text-white">{stats.streamType}</span>
+      </div>
+      <div className="flex flex-col items-center gap-1">
+        <span className="text-white/70">Bandwidth</span>{" "}
+        <span className="text-white">{stats.bandwidth.toFixed(2)} kbps</span>
+      </div>
+      {stats.latency != undefined && (
+        <div className="hidden flex-col items-center gap-1 md:flex">
+          <span className="text-white/70">Latency</span>
+          <span
+            className={`text-white ${stats.latency >= 2 ? "text-danger" : ""}`}
+          >
+            {stats.latency.toFixed(2)} sec
+          </span>
+        </div>
+      )}
+      {stats.droppedFrames != undefined && (
+        <div className="flex flex-col items-center justify-end gap-1">
+          <span className="text-white/70">Dropped</span>
+          <span className="text-white">{stats.droppedFrames} frames</span>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <>
+      <div
+        className={cn(
+          minimal
+            ? "absolute bottom-0 left-0 max-h-[50%] w-full overflow-y-auto rounded-b-lg p-1 md:rounded-b-xl md:p-3"
+            : "absolute bottom-2 right-2 min-w-52 rounded-2xl p-4",
+          "z-50 flex flex-col gap-1 bg-black/70 text-[9px] duration-300 animate-in fade-in md:text-xs",
+        )}
+      >
+        {minimal ? minimalStatsContent : fullStatsContent}
+      </div>
+    </>
+  );
+}