diff --git a/ui/src/components/CustomTooltip.tsx b/ui/src/components/CustomTooltip.tsx index a27f607..5b8848f 100644 --- a/ui/src/components/CustomTooltip.tsx +++ b/ui/src/components/CustomTooltip.tsx @@ -1,25 +1,25 @@ import Card from "@components/Card"; export interface CustomTooltipProps { - payload: { payload: { date: number; stat: number }; unit: string }[]; + payload: { payload: { date: number; metric: number }; unit: string }[]; } export default function CustomTooltip({ payload }: CustomTooltipProps) { if (payload?.length) { const toolTipData = payload[0]; - const { date, stat } = toolTipData.payload; + const { date, metric } = toolTipData.payload; return ( -
-
+
+
{new Date(date * 1000).toLocaleTimeString()}
- - {stat} {toolTipData?.unit} + + {metric} {toolTipData?.unit}
diff --git a/ui/src/components/Metric.tsx b/ui/src/components/Metric.tsx new file mode 100644 index 0000000..a3706e4 --- /dev/null +++ b/ui/src/components/Metric.tsx @@ -0,0 +1,180 @@ +/* eslint-disable react-refresh/only-export-components */ +import { ComponentProps } from "react"; +import { cva, cx } from "cva"; + +import { someIterable } from "../utils"; + +import { GridCard } from "./Card"; +import MetricsChart from "./MetricsChart"; + +interface ChartPoint { + date: number; + metric: number | null; +} + +interface MetricProps { + title: string; + description: string; + stream?: Map; + metric?: K; + data?: ChartPoint[]; + gate?: Map; + supported?: boolean; + map?: (p: { date: number; metric: number | null }) => ChartPoint; + domain?: [number, number]; + unit: string; + heightClassName?: string; + referenceValue?: number; + badge?: ComponentProps["badge"]; + badgeTheme?: ComponentProps["badgeTheme"]; +} + +/** + * Creates a chart array from a metrics map and a metric name. + * + * @param metrics - Expected to be ordered from oldest to newest. + * @param metricName - Name of the metric to create a chart array for. + */ +export function createChartArray( + metrics: Map, + metricName: K, +) { + const result: { date: number; metric: number | null }[] = []; + const iter = metrics.entries(); + let next = iter.next() as IteratorResult<[number, T]>; + const nowSeconds = Math.floor(Date.now() / 1000); + + // We want 120 data points, in the chart. + const firstDate = Math.min(next.value?.[0] ?? nowSeconds, nowSeconds - 120); + + for (let t = firstDate; t < nowSeconds; t++) { + while (!next.done && next.value[0] < t) next = iter.next(); + const has = !next.done && next.value[0] === t; + + let metric = null; + if (has) metric = next.value[1][metricName] as number; + result.push({ date: t, metric }); + + if (has) next = iter.next(); + } + + return result; +} + +function computeReferenceValue(points: ChartPoint[]): number | undefined { + const values = points + .filter(p => p.metric != null && Number.isFinite(p.metric)) + .map(p => Number(p.metric)); + + if (values.length === 0) return undefined; + + const sum = values.reduce((acc, v) => acc + v, 0); + const mean = sum / values.length; + return Math.round(mean); +} + +const theme = { + light: + "bg-white text-black border border-slate-800/20 dark:border dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300", + danger: "bg-red-500 dark:border-red-700 dark:bg-red-800 dark:text-red-50", + primary: "bg-blue-500 dark:border-blue-700 dark:bg-blue-800 dark:text-blue-50", +}; + +interface SettingsItemProps { + readonly title: string; + readonly description: string | React.ReactNode; + readonly badge?: string; + readonly className?: string; + readonly children?: React.ReactNode; + readonly badgeTheme?: keyof typeof theme; +} + +export function MetricHeader(props: SettingsItemProps) { + const { title, description, badge } = props; + const badgeVariants = cva({ variants: { theme: theme } }); + + return ( +
+
+
+ {title} + {badge && ( + + {badge} + + )} +
+
+
{description}
+
+ ); +} + +export function Metric({ + title, + description, + stream, + metric, + data, + gate, + supported, + map, + domain = [0, 600], + unit = "", + heightClassName = "h-[127px]", + badge, + badgeTheme, +}: MetricProps) { + const ready = gate ? gate.size > 0 : stream ? stream.size > 0 : true; + const supportedFinal = + supported ?? + (stream && metric ? someIterable(stream, ([, s]) => s[metric] !== undefined) : true); + + // Either we let the consumer provide their own chartArray, or we create one from the stream and metric. + const raw = data ?? ((stream && metric && createChartArray(stream, metric)) || []); + + // If the consumer provides a map function, we apply it to the raw data. + const dataFinal: ChartPoint[] = map ? raw.map(map) : raw; + + // Compute the average value of the metric. + const referenceValue = computeReferenceValue(dataFinal); + + return ( +
+ + + +
+ {!ready ? ( +
+

Waiting for data...

+
+ ) : supportedFinal ? ( + + ) : ( +
+

Metric not supported

+
+ )} +
+ +
+ ); +} diff --git a/ui/src/components/StatChart.tsx b/ui/src/components/MetricsChart.tsx similarity index 91% rename from ui/src/components/StatChart.tsx rename to ui/src/components/MetricsChart.tsx index 2c403e3..853bcf3 100644 --- a/ui/src/components/StatChart.tsx +++ b/ui/src/components/MetricsChart.tsx @@ -12,13 +12,13 @@ import { import CustomTooltip, { CustomTooltipProps } from "@components/CustomTooltip"; -export default function StatChart({ +export default function MetricsChart({ data, domain, unit, referenceValue, }: { - data: { date: number; stat: number | null | undefined }[]; + data: { date: number; metric: number | null | undefined }[]; domain?: [string | number, string | number]; unit?: string; referenceValue?: number; @@ -33,7 +33,7 @@ export default function StatChart({ strokeLinecap="butt" stroke="rgba(30, 41, 59, 0.1)" /> - {referenceValue && ( + {referenceValue !== undefined && ( x.date)} /> ( - stream: Map, - metric: K, -): { date: number; stat: T[K] | null }[] { - const stat = Array.from(stream).map(([key, stats]) => { - return { date: key, stat: stats[metric] }; - }); - - // Sort the dates to ensure they are in chronological order - const sortedStat = stat.map(x => x.date).sort((a, b) => a - b); - - // Determine the earliest statistic date - const earliestStat = sortedStat[0]; - - // Current time in seconds since the Unix epoch - const now = Math.floor(Date.now() / 1000); - - // Determine the starting point for the chart data - const firstChartDate = earliestStat ? Math.min(earliestStat, now - 120) : now - 120; - - // Generate the chart array for the range between 'firstChartDate' and 'now' - return Array.from({ length: now - firstChartDate }, (_, i) => { - const currentDate = firstChartDate + i; - return { - date: currentDate, - // Find the statistic for 'currentDate', or use the last known statistic if none exists for that date - stat: stat.find(x => x.date === currentDate)?.stat ?? null, - }; - }); -} +import { createChartArray, Metric } from "../Metric"; +import { SettingsSectionHeader } from "../SettingsSectionHeader"; export default function ConnectionStatsSidebar() { const { sidebarView, setSidebarView } = useUiStore(); const { - mediaStream, - peerConnection, - inboundRtpStats, - appendInboundRtpStats, - candidatePairStats, - appendCandidatePairStats, - appendLocalCandidateStats, - appendRemoteCandidateStats, - appendDiskDataChannelStats, + mediaStream, + peerConnection, + inboundRtpStats: inboundVideoRtpStats, + appendInboundRtpStats: appendInboundVideoRtpStats, + candidatePairStats: iceCandidatePairStats, + appendCandidatePairStats, + appendLocalCandidateStats, + appendRemoteCandidateStats, + appendDiskDataChannelStats, } = useRTCStore(); - function isMetricSupported( - stream: Map, - metric: K, - ): boolean { - return Array.from(stream).some(([, stat]) => stat[metric] !== undefined); - } - useInterval(function collectWebRTCStats() { (async () => { if (!mediaStream) return; + const videoTrack = mediaStream.getVideoTracks()[0]; if (!videoTrack) return; + const stats = await peerConnection?.getStats(); let successfulLocalCandidateId: string | null = null; let successfulRemoteCandidateId: string | null = null; stats?.forEach(report => { - if (report.type === "inbound-rtp") { - appendInboundRtpStats(report); + if (report.type === "inbound-rtp" && report.kind === "video") { + appendInboundVideoRtpStats(report); } else if (report.type === "candidate-pair" && report.nominated) { if (report.state === "succeeded") { successfulLocalCandidateId = report.localCandidateId; @@ -91,144 +57,133 @@ export default function ConnectionStatsSidebar() { })(); }, 500); + const jitterBufferDelay = createChartArray(inboundVideoRtpStats, "jitterBufferDelay"); + const jitterBufferEmittedCount = createChartArray( + inboundVideoRtpStats, + "jitterBufferEmittedCount", + ); + + const jitterBufferAvgDelayData = jitterBufferDelay.map((d, idx) => { + if (idx === 0) return { date: d.date, metric: null }; + const prevDelay = jitterBufferDelay[idx - 1]?.metric as number | null | undefined; + const currDelay = d.metric as number | null | undefined; + const prevCountEmitted = + (jitterBufferEmittedCount[idx - 1]?.metric as number | null | undefined) ?? null; + const currCountEmitted = + (jitterBufferEmittedCount[idx]?.metric as number | null | undefined) ?? null; + + if ( + prevDelay == null || + currDelay == null || + prevCountEmitted == null || + currCountEmitted == null + ) { + return { date: d.date, metric: null }; + } + + const deltaDelay = currDelay - prevDelay; + const deltaEmitted = currCountEmitted - prevCountEmitted; + + // Guard counter resets or no emitted frames + if (deltaDelay < 0 || deltaEmitted <= 0) { + return { date: d.date, metric: null }; + } + + const valueMs = Math.round((deltaDelay / deltaEmitted) * 1000); + return { date: d.date, metric: valueMs }; + }); + return (
- {/* - The entire sidebar component is always rendered, with a display none when not visible - The charts below, need a height and width, otherwise they throw. So simply don't render them unless the thing is visible - */} {sidebarView === "connection-stats" && ( -
-
-
-

- Packets Lost -

-

- Number of data packets lost during transmission. -

-
- -
- {inboundRtpStats.size === 0 ? ( -
-

Waiting for data...

-
- ) : isMetricSupported(inboundRtpStats, "packetsLost") ? ( - - ) : ( -
-

Metric not supported

-
- )} -
- +
+ {/* Connection Group */} +
+ + ({ + date: x.date, + metric: x.metric != null ? Math.round(x.metric * 1000) : null, + })} + domain={[0, 600]} + unit=" ms" + />
-
-
-

- Round-Trip Time -

-

- Time taken for data to travel from source to destination and back -

-
- -
- {inboundRtpStats.size === 0 ? ( -
-

Waiting for data...

-
- ) : isMetricSupported(candidatePairStats, "currentRoundTripTime") ? ( - { - return { - date: x.date, - stat: x.stat ? Math.round(x.stat * 1000) : null, - }; - })} - domain={[0, 600]} - unit=" ms" - /> - ) : ( -
-

Metric not supported

-
- )} -
- -
-
-
-

- Jitter -

-

- Variation in packet delay, affecting video smoothness.{" "} -

-
- -
- {inboundRtpStats.size === 0 ? ( -
-

Waiting for data...

-
- ) : ( - { - return { - date: x.date, - stat: x.stat ? Math.round(x.stat * 1000) : null, - }; - })} - domain={[0, 300]} - unit=" ms" - /> - )} -
- -
-
-
-

- Frames per second -

-

- Number of video frames displayed per second. -

-
- -
- {inboundRtpStats.size === 0 ? ( -
-

Waiting for data...

-
- ) : ( - { - return { - date: x.date, - stat: x.stat ? x.stat : null, - }; - }, - )} - domain={[0, 80]} - unit=" fps" - /> - )} -
- + + {/* Video Group */} +
+ + + {/* RTP Jitter */} + ({ + date: x.date, + metric: x.metric != null ? Math.round(x.metric * 1000) : null, + })} + domain={[0, 10]} + unit=" ms" + /> + + {/* Playback Delay */} + x.jitterBufferDelay != null, + ) && + someIterable( + inboundVideoRtpStats, + ([, x]) => x.jitterBufferEmittedCount != null, + ) + } + domain={[0, 30]} + unit=" ms" + /> + + {/* Packets Lost */} + + + {/* Frames Per Second */} +
)} diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 99c1a50..9e36133 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -94,6 +94,17 @@ export const formatters = { }, }; +export function someIterable( + iterable: Iterable, + predicate: (item: T) => boolean, +): boolean { + for (const item of iterable) { + if (predicate(item)) return true; + } + + return false; +} + export const VIDEO = new Blob( [ new Uint8Array([