mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
Add ffprobe button back to camera metrics page (#13572)
This commit is contained in:
Josh Hawkins
GitHub
parent
fe2fec81ac
commit
7e9a7ad49c
178
web/src/components/overlay/CameraInfoDialog.tsx
Normal file
178
web/src/components/overlay/CameraInfoDialog.tsx
Normal file
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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;
|
||||
}[];
|
||||
};
|
||||
};
|
||||
|
||||
@ -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">
|
||||
{camera.name.replaceAll("_", " ")}
|
||||
</div>
|
||||
<div key={camera.name} className="grid gap-2 sm:grid-cols-2">
|
||||
{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] || {},
|
||||
)}
|
||||
/>
|
||||
<>
|
||||
{probeCameraName == camera.name && (
|
||||
<CameraInfoDialog
|
||||
key={camera.name}
|
||||
camera={camera}
|
||||
showCameraInfoDialog={showCameraInfoDialog}
|
||||
setShowCameraInfoDialog={setShowCameraInfoDialog}
|
||||
/>
|
||||
)}
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<div className="text-sm font-medium capitalize text-muted-foreground">
|
||||
{camera.name.replaceAll("_", " ")}
|
||||
</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" />
|
||||
)}
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<MdInfo
|
||||
className="size-5 cursor-pointer text-muted-foreground"
|
||||
onClick={() => {
|
||||
setShowCameraInfoDialog(true);
|
||||
setProbeCameraName(camera.name);
|
||||
}}
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Camera Probe Info</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
key={camera.name}
|
||||
className="grid gap-2 sm:grid-cols-2"
|
||||
>
|
||||
{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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user