Add ffprobe button back to camera metrics page (#13572)

web/src/components/overlay/CameraInfoDialog.tsx

@@ -0,0 +1,178 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import ActivityIndicator from "../indicators/activity-indicator";
+import { Ffprobe } from "@/types/stats";
+import { Button } from "../ui/button";
+import copy from "copy-to-clipboard";
+import { CameraConfig } from "@/types/frigateConfig";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { toast } from "sonner";
+import { Toaster } from "../ui/sonner";
+
+type CameraInfoDialogProps = {
+  camera: CameraConfig;
+  showCameraInfoDialog: boolean;
+  setShowCameraInfoDialog: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export default function CameraInfoDialog({
+  camera,
+  showCameraInfoDialog,
+  setShowCameraInfoDialog,
+}: CameraInfoDialogProps) {
+  const [ffprobeInfo, setFfprobeInfo] = useState<Ffprobe[]>();
+
+  useEffect(() => {
+    axios
+      .get("ffprobe", {
+        params: {
+          paths: `camera:${camera.name}`,
+        },
+      })
+      .then((res) => {
+        if (res.status === 200) {
+          setFfprobeInfo(res.data);
+        } else {
+          toast.error(`Unable to probe camera: ${res.statusText}`, {
+            position: "top-center",
+          });
+        }
+      })
+      .catch((error) => {
+        toast.error(`Unable to probe camera: ${error.response.data.message}`, {
+          position: "top-center",
+        });
+      });
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onCopyFfprobe = async () => {
+    copy(JSON.stringify(ffprobeInfo));
+    toast.success("Copied probe data to clipboard.");
+  };
+
+  function gcd(a: number, b: number): number {
+    return b === 0 ? a : gcd(b, a % b);
+  }
+
+  return (
+    <>
+      <Toaster position="top-center" />
+      <Dialog
+        open={showCameraInfoDialog}
+        onOpenChange={setShowCameraInfoDialog}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="capitalize">
+              {camera.name.replaceAll("_", " ")} Camera Probe Info
+            </DialogTitle>
+          </DialogHeader>
+          <DialogDescription>
+            Stream data is obtained with <code>ffprobe</code>.
+          </DialogDescription>
+
+          <div className="mb-2 p-4">
+            {ffprobeInfo ? (
+              <div>
+                {ffprobeInfo.map((stream, idx) => (
+                  <div key={idx} className="mb-5">
+                    <div className="mb-1 rounded-md bg-secondary p-2 text-lg text-primary">
+                      Stream {idx + 1}
+                    </div>
+                    {stream.return_code == 0 ? (
+                      <div>
+                        {stream.stdout.streams.map((codec, idx) => (
+                          <div className="" key={idx}>
+                            {codec.width ? (
+                              <div className="text-muted-foreground">
+                                <div className="ml-2">Video:</div>
+                                <div className="ml-5">
+                                  <div>
+                                    Codec:
+                                    <span className="text-primary">
+                                      {" "}
+                                      {codec.codec_long_name}
+                                    </span>
+                                  </div>
+                                  <div>
+                                    {codec.width && codec.height ? (
+                                      <>
+                                        Resolution:{" "}
+                                        <span className="text-primary">
+                                          {" "}
+                                          {codec.width}x{codec.height} (
+                                          {codec.width /
+                                            gcd(codec.width, codec.height)}
+                                          /
+                                          {codec.height /
+                                            gcd(codec.width, codec.height)}{" "}
+                                          aspect ratio)
+                                        </span>
+                                      </>
+                                    ) : (
+                                      <span>
+                                        Resolution:{" "}
+                                        <span className="text-primary">
+                                          Unknown
+                                        </span>
+                                      </span>
+                                    )}
+                                  </div>
+                                  <div>
+                                    FPS:{" "}
+                                    <span className="text-primary">
+                                      {codec.avg_frame_rate == "0/0"
+                                        ? "Unknown"
+                                        : codec.avg_frame_rate}
+                                    </span>
+                                  </div>
+                                </div>
+                              </div>
+                            ) : (
+                              <div className="text-muted-foreground">
+                                <div className="ml-2 mt-1">Audio:</div>
+                                <div className="ml-4">
+                                  Codec:{" "}
+                                  <span className="text-primary">
+                                    {codec.codec_long_name}
+                                  </span>
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="px-2">
+                        <div>Error: {stream.stderr}</div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="flex flex-col items-center">
+                <ActivityIndicator />
+                <div className="mt-2">Fetching Camera Data</div>
+              </div>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button variant="select" onClick={() => onCopyFfprobe()}>
+              Copy
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

web/src/types/stats.ts

@@ -70,3 +70,17 @@ export type Vainfo = {
   stdout: string;
   stderr: string;
 };
+
+export type Ffprobe = {
+  return_code: number;
+  stderr: string;
+  stdout: {
+    programs: string[];
+    streams: {
+      avg_frame_rate: string;
+      codec_long_name: string;
+      height?: number;
+      width?: number;
+    }[];
+  };
+};

web/src/views/system/CameraMetrics.tsx

@@ -1,9 +1,16 @@
 import { useFrigateStats } from "@/api/ws";
 import { CameraLineGraph } from "@/components/graph/CameraGraph";
+import CameraInfoDialog from "@/components/overlay/CameraInfoDialog";
 import { Skeleton } from "@/components/ui/skeleton";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { FrigateStats } from "@/types/stats";
 import { useEffect, useMemo, useState } from "react";
+import { MdInfo } from "react-icons/md";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import useSWR from "swr";
 
 type CameraMetricsProps = {
@@ -16,6 +23,11 @@ export default function CameraMetrics({
 }: CameraMetricsProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  // camera info dialog
+
+  const [showCameraInfoDialog, setShowCameraInfoDialog] = useState(false);
+  const [probeCameraName, setProbeCameraName] = useState<string>();
+
   // stats
 
   const { data: initialStats } = useSWR<FrigateStats[]>(
@@ -203,6 +215,12 @@ export default function CameraMetrics({
     return series;
   }, [statsHistory]);
 
+  useEffect(() => {
+    if (!showCameraInfoDialog) {
+      setProbeCameraName("");
+    }
+  }, [showCameraInfoDialog]);
+
   return (
     <div className="scrollbar-container mt-4 flex size-full flex-col gap-3 overflow-y-auto">
       <div className="text-sm font-medium text-muted-foreground">Overview</div>
@@ -227,45 +245,72 @@ export default function CameraMetrics({
           Object.values(config.cameras).map((camera) => {
             if (camera.enabled) {
               return (
-                <div className="flex w-full flex-col gap-3">
+                <>
-                  <div className="text-sm font-medium capitalize text-muted-foreground">
+                  {probeCameraName == camera.name && (
-                    {camera.name.replaceAll("_", " ")}
+                    <CameraInfoDialog
-                  </div>
+                      key={camera.name}
-                  <div key={camera.name} className="grid gap-2 sm:grid-cols-2">
+                      camera={camera}
-                    {Object.keys(cameraCpuSeries).includes(camera.name) ? (
+                      showCameraInfoDialog={showCameraInfoDialog}
-                      <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
+                      setShowCameraInfoDialog={setShowCameraInfoDialog}
-                        <div className="mb-5">CPU</div>
+                    />
-                        <CameraLineGraph
+                  )}
-                          graphId={`${camera.name}-cpu`}
+                  <div className="flex w-full flex-col gap-3">
-                          unit="%"
+                    <div className="flex flex-row items-center justify-between">
-                          dataLabels={["ffmpeg", "capture", "detect"]}
+                      <div className="text-sm font-medium capitalize text-muted-foreground">
-                          updateTimes={updateTimes}
+                        {camera.name.replaceAll("_", " ")}
-                          data={Object.values(
-                            cameraCpuSeries[camera.name] || {},
-                          )}
-                        />
                       </div>
-                    ) : (
+                      <Tooltip>
-                      <Skeleton className="aspect-video size-full" />
+                        <TooltipTrigger>
-                    )}
+                          <MdInfo
-                    {Object.keys(cameraFpsSeries).includes(camera.name) ? (
+                            className="size-5 cursor-pointer text-muted-foreground"
-                      <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
+                            onClick={() => {
-                        <div className="mb-5">Frames / Detections</div>
+                              setShowCameraInfoDialog(true);
-                        <CameraLineGraph
+                              setProbeCameraName(camera.name);
-                          graphId={`${camera.name}-dps`}
+                            }}
-                          unit=""
+                          />
-                          dataLabels={["camera", "detect", "skipped"]}
+                        </TooltipTrigger>
-                          updateTimes={updateTimes}
+                        <TooltipContent>Camera Probe Info</TooltipContent>
-                          data={Object.values(
+                      </Tooltip>
-                            cameraFpsSeries[camera.name] || {},
+                    </div>
-                          )}
+                    <div
-                        />
+                      key={camera.name}
-                      </div>
+                      className="grid gap-2 sm:grid-cols-2"
-                    ) : (
+                    >
-                      <Skeleton className="aspect-video size-full" />
+                      {Object.keys(cameraCpuSeries).includes(camera.name) ? (
-                    )}
+                        <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
+                          <div className="mb-5">CPU</div>
+                          <CameraLineGraph
+                            graphId={`${camera.name}-cpu`}
+                            unit="%"
+                            dataLabels={["ffmpeg", "capture", "detect"]}
+                            updateTimes={updateTimes}
+                            data={Object.values(
+                              cameraCpuSeries[camera.name] || {},
+                            )}
+                          />
+                        </div>
+                      ) : (
+                        <Skeleton className="aspect-video size-full" />
+                      )}
+                      {Object.keys(cameraFpsSeries).includes(camera.name) ? (
+                        <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
+                          <div className="mb-5">Frames / Detections</div>
+                          <CameraLineGraph
+                            graphId={`${camera.name}-dps`}
+                            unit=""
+                            dataLabels={["camera", "detect", "skipped"]}
+                            updateTimes={updateTimes}
+                            data={Object.values(
+                              cameraFpsSeries[camera.name] || {},
+                            )}
+                          />
+                        </div>
+                      ) : (
+                        <Skeleton className="aspect-video size-full" />
+                      )}
+                    </div>
                   </div>
-                </div>
+                </>
               );
             }