@vpalmisano/webrtcperf 4.4.14 → 4.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vpalmisano/webrtcperf",
-  "version": "4.4.14",
+  "version": "4.5.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/vpalmisano/webrtcperf.git"
@@ -51,7 +51,7 @@
   },
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@google/genai": "^1.20.0",
+    "@google/genai": "^1.21.0",
     "@puppeteer/browsers": "^2.10.10",
     "@vpalmisano/throttler": "0.0.14",
     "@vpalmisano/webrtcperf-js": "^1.1.14",
@@ -78,8 +78,8 @@
     "pidtree": "^0.6.0",
     "pidusage": "^4.0.1",
     "prom-client": "^15.1.3",
-    "puppeteer": "^24.22.0",
-    "puppeteer-core": "^24.22.0",
+    "puppeteer": "^24.22.3",
+    "puppeteer-core": "^24.22.3",
     "puppeteer-extra": "^3.3.6",
     "puppeteer-extra-plugin-stealth": "^2.11.2",
     "puppeteer-intercept-and-modify-requests": "^1.3.1",
@@ -105,8 +105,8 @@
     "@types/sprintf-js": "^1.1.4",
     "@types/tar-fs": "^2.0.4",
     "@types/ws": "^8.18.1",
-    "@typescript-eslint/eslint-plugin": "^8.44.0",
-    "@typescript-eslint/parser": "^8.44.0",
+    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/parser": "^8.44.1",
     "@vpalmisano/typedoc-cookie-consent": "^0.0.4",
     "@vpalmisano/typedoc-plugin-ga": "^1.0.6",
     "eslint": "^9.36.0",
@@ -122,7 +122,7 @@
     "ts-loader": "^9.5.4",
     "typedoc": "^0.28.13",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.44.0",
+    "typescript-eslint": "^8.44.1",
     "webpack": "^5.101.3",
     "webpack-cli": "^6.0.1",
     "webpack-node-externals": "^3.0.0",
@@ -131,7 +131,7 @@
   "optionalDependencies": {
     "chart.js": "^4.5.0",
     "chartjs-chart-error-bars": "^4.4.4",
-    "skia-canvas": "^3.0.7",
+    "skia-canvas": "^3.0.8",
     "zeromq": "^6.5.0"
   }
 }

package/src/app.ts

@@ -25,6 +25,7 @@ import path from 'path'
 import { markedTerminal } from 'marked-terminal'
 import { EventEmitter } from 'events'
 import { runWithDocker } from './docker'
+import { plotDetailedStatsDashboard } from './plot'
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const { marked } = require('marked')
@@ -242,6 +243,17 @@ async function main(): Promise<void> {
     process.exit(0)
   }
 
+  if (process.argv.includes('--plot')) {
+    process.argv = process.argv.filter(s => s !== '--plot')
+    try {
+      await plotDetailedStatsDashboard(process.argv[0], process.argv[1])
+    } catch (err: unknown) {
+      log.error(`plotDetailedStatsDashboard error: ${(err as Error).stack}`)
+      process.exit(1)
+    }
+    process.exit(0)
+  }
+
   let configs: Config[]
 
   // Handle prompt.

package/src/config.ts

@@ -638,7 +638,8 @@ a .csv file inside that file.`,
   },
   detailedStatsPath: {
     doc: `The log file path; if set, the detailed stats will be written in \
-a .csv file inside that file.`,
+a .csv file inside that file. \
+Use \`webrtcperf --plot <detailed-stats-file> <output-file>.html\` to generate a HTML plot.`,
     format: String,
     default: '',
     env: 'DETAILED_STATS_PATH',

package/src/docker.ts

@@ -54,6 +54,7 @@ export async function runWithDocker(argv: string[]) {
     'SERVER_USE_HTTPS=true',
     'SERVER_DATA=/data',
     `START_TIMESTAMP=${startTimestamp}`,
+    'VIDEO_CACHE_PATH=/root/.webrtcperf/cache',
   ]
 
   if (configs[0].prometheusPushgateway.startsWith('http://localhost')) {

package/src/plot.ts

@@ -2,6 +2,8 @@ import fs from 'fs'
 
 import { logger } from './utils'
 import json5 from 'json5'
+import { formatThrottleRule, parseStatsFile, parseThrottleRule, StatsRow } from './scenarios'
+import path from 'path'
 
 const log = logger('webrtcperf:plot')
 
@@ -161,3 +163,402 @@ export async function plotHtml(options: PlotOptions, series: PlotData[]) {
 </html>`
   await fs.promises.writeFile(options.filePath || 'plot.html', data)
 }
+
+function groupByParticipant(rows: StatsRow[]) {
+  const m = new Map<string, StatsRow[]>()
+  for (const r of rows) {
+    if (!r.participantName) continue
+    const p = r.participantName as string
+    if (!m.has(p)) m.set(p, [])
+    m.get(p)!.push(r)
+  }
+  return m
+}
+
+export async function plotDetailedStatsDashboard(statsFile: string, outFile = 'plot.html') {
+  const rows = await parseStatsFile(statsFile)
+  if (rows.length === 0) {
+    log.warn('No stats found')
+    return
+  }
+
+  const byParticipant = groupByParticipant(rows)
+  const participants = Array.from(byParticipant.keys()).sort()
+
+  type ChartSpec = { id: string; title?: string; yLabel?: string; datasets?: PlotData[]; width?: number }
+  const charts: ChartSpec[] = []
+
+  const build = (
+    id: string,
+    title?: string,
+    yLabel?: string,
+    processValue?: (value: number) => number,
+    width?: number,
+  ) => {
+    const series: PlotData[] = []
+    if (!id.startsWith('_')) {
+      for (const [participant, rows] of byParticipant.entries()) {
+        const dataPerTrack = new Map<string, { x: number; y: number }[]>()
+        for (const r of rows) {
+          const trackId = (r.trackId as string) || ''
+          if (!dataPerTrack.has(trackId)) dataPerTrack.set(trackId, [])
+          const data = dataPerTrack.get(trackId)!
+          const v = r[id] as number
+          if (v !== undefined) data.push({ x: r.datetime as number, y: processValue ? processValue(v) : v })
+        }
+        dataPerTrack.forEach((data, trackId) => {
+          if (data.length) series.push({ label: `${participant}${trackId ? ` (${trackId})` : ''}`, data: data })
+        })
+      }
+    }
+    charts.push({ id, title, yLabel, datasets: series, width })
+  }
+
+  const kbps = (v: number) => v / 1000
+  const percent = (v: number) => v * 100
+  const ms = (v: number) => v * 1000
+
+  ;[
+    { id: '_throttle', title: 'Throttle settings' },
+    { id: 'throttleUpRate', title: 'Throttle up rate', yLabel: 'Kbps', processValue: kbps, width: 2 },
+    { id: 'throttleUpDelay', title: 'Throttle up delay', yLabel: 'ms', width: 2 },
+    { id: 'throttleUpLoss', title: 'Throttle up loss', yLabel: '%', width: 2 },
+    { id: 'throttleDownRate', title: 'Throttle down rate', yLabel: 'Kbps', processValue: kbps, width: 2 },
+    { id: 'throttleDownDelay', title: 'Throttle down delay', yLabel: 'ms', width: 2 },
+    { id: 'throttleDownLoss', title: 'Throttle down loss', yLabel: '%', width: 2 },
+    // Performance / Connectivity
+    { id: '_performance', title: 'Performance / Connectivity' },
+    { id: 'pageCpu', title: 'Page CPU', yLabel: '%' },
+    { id: 'pageMemory', title: 'Page memory', yLabel: 'MB' },
+    { id: 'peerConnectionConnectionTime', title: 'Peer connection connection time', yLabel: 's' },
+    { id: 'peerConnectionDisconnectionTime', title: 'Peer connection disconnection time', yLabel: 's' },
+    // Sent audio
+    { id: '_sentAudio', title: 'Sent audio' },
+    { id: 'audioSentBitrates', title: 'Sent audio bitrate', yLabel: 'Kbps', processValue: kbps },
+    { id: 'audioSentPacketsLossRate', title: 'Send audio loss', yLabel: '%', processValue: percent },
+    { id: 'audioSentRoundTripTime', title: 'Send audio RTT', yLabel: 'ms', processValue: ms },
+    { id: 'audioSentJitter', title: 'Send audio jitter', yLabel: 'ms', processValue: ms },
+    // Sent video
+    { id: '_sentVideo', title: 'Sent video' },
+    { id: 'videoSentBitrates', title: 'Sent video bitrate', yLabel: 'Kbps', processValue: kbps },
+    { id: 'videoSentPacketsLossRate', title: 'Send video loss', yLabel: '%', processValue: percent },
+    { id: 'videoSentRoundTripTime', title: 'Send video RTT', yLabel: 'ms', processValue: ms },
+    { id: 'videoSentJitter', title: 'Send video jitter', yLabel: 'ms', processValue: ms },
+    { id: 'videoSentWidth', title: 'Send video width', yLabel: 'px' },
+    { id: 'videoSentHeight', title: 'Send video height', yLabel: 'px' },
+    { id: 'videoSentFps', title: 'Send video framerate', yLabel: 'fps' },
+    {
+      id: 'transportSentAvailableOutgoingBitrate',
+      title: 'Send available bitrate',
+      yLabel: 'Kbps',
+      processValue: kbps,
+    },
+    { id: 'videoQualityLimitationCpu', title: 'Send video CPU limitation', yLabel: '%' },
+    { id: 'videoQualityLimitationBandwidth', title: 'Send video bandwidth limitation', yLabel: '%' },
+    { id: 'videoFirCountReceived', title: 'Send video FIR count', yLabel: 'count' },
+    { id: 'videoPliCountReceived', title: 'Send video PLI count', yLabel: 'count' },
+    // Sent screen
+    { id: '_sentScreen', title: 'Sent screen' },
+    { id: 'screenSentBitrates', title: 'Sent screen bitrate', yLabel: 'Kbps', processValue: kbps },
+    { id: 'screenSentPacketsLossRate', title: 'Send screen loss', yLabel: '%', processValue: percent },
+    { id: 'screenSentRoundTripTime', title: 'Send screen RTT', yLabel: 'ms', processValue: ms },
+    { id: 'screenSentJitter', title: 'Send screen jitter', yLabel: 'ms', processValue: ms },
+    { id: 'screenSentWidth', title: 'Send screen width', yLabel: 'px' },
+    { id: 'screenSentHeight', title: 'Send screen height', yLabel: 'px' },
+    { id: 'screenSentFps', title: 'Send screen framerate', yLabel: 'fps' },
+    { id: '' },
+    { id: 'screenQualityLimitationCpu', title: 'Send screen CPU limitation', yLabel: '%' },
+    { id: 'screenQualityLimitationBandwidth', title: 'Send screen bandwidth limitation', yLabel: '%' },
+    { id: 'screenFirCountReceived', title: 'Send screen FIR count', yLabel: 'count' },
+    { id: 'screenPliCountReceived', title: 'Send screen PLI count', yLabel: 'count' },
+    // Recv audio
+    { id: '_recvAudio', title: 'Recv audio' },
+    { id: 'audioRecvBitrates', title: 'Recv audio bitrate', yLabel: 'Kbps', processValue: kbps },
+    { id: 'audioRecvPacketsLossRate', title: 'Recv audio loss', yLabel: '%', processValue: percent },
+    { id: 'audioRecvJitter', title: 'Recv audio jitter', yLabel: 'ms', processValue: ms },
+    { id: 'audioRecvAvgJitterBufferDelay', title: 'Recv audio jitter buffer', yLabel: 'ms', processValue: ms },
+    { id: 'audioRecvLevel', title: 'Recv audio level', yLabel: 'db' },
+    { id: 'audioRecvConcealmentEvents', title: 'Recv audio concealment events', yLabel: 'count' },
+    {
+      id: 'audioRecvInsertedSamplesForDeceleration',
+      title: 'Recv audio inserted samples',
+      yLabel: 'count',
+    },
+    {
+      id: 'audioRecvRemovedSamplesForAcceleration',
+      title: 'Recv audio removed samples',
+      yLabel: 'count',
+    },
+    { id: 'audioRecvEndToEndDelay', title: 'Recv audio end to end delay', yLabel: 'ms', processValue: ms },
+    // Recv video
+    { id: '_recvVideo', title: 'Recv video' },
+    { id: 'videoRecvBitrates', title: 'Recv video bitrate', yLabel: 'Kbps', processValue: kbps },
+    { id: 'videoRecvPacketsLossRate', title: 'Recv video loss', yLabel: '%', processValue: percent },
+    { id: 'videoRecvJitter', title: 'Recv video jitter', yLabel: 'ms', processValue: ms },
+    { id: 'videoRecvAvgJitterBufferDelay', title: 'Recv video jitter buffer', yLabel: 'ms', processValue: ms },
+    { id: 'videoRecvWidth', title: 'Recv video width', yLabel: 'px' },
+    { id: 'videoRecvHeight', title: 'Recv video height', yLabel: 'px' },
+    { id: 'videoRecvFps', title: 'Recv video framerate', yLabel: 'fps' },
+    { id: 'videoTotalFreezesDuration', title: 'Recv video freezes', yLabel: 'count' },
+    { id: 'videoFirCountSent', title: 'Recv video FIR sent', yLabel: 'count' },
+    { id: 'videoPliCountSent', title: 'Recv video PLI sent', yLabel: 'count' },
+    { id: 'videoRecvEndToEndDelay', title: 'Recv video end to end delay', yLabel: 'ms', processValue: ms },
+    { id: '' },
+    // Recv screen
+    { id: '_recvScreen', title: 'Recv screen' },
+    { id: 'screenRecvBitrates', title: 'Recv screen bitrate', yLabel: 'Kbps', processValue: kbps },
+    { id: 'screenRecvPacketsLossRate', title: 'Recv screen loss', yLabel: '%', processValue: percent },
+    { id: 'screenRecvJitter', title: 'Recv screen jitter', yLabel: 'ms', processValue: ms },
+    { id: 'screenRecvAvgJitterBufferDelay', title: 'Recv screen jitter buffer', yLabel: 'ms', processValue: ms },
+    { id: 'screenRecvWidth', title: 'Recv screen width', yLabel: 'px' },
+    { id: 'screenRecvHeight', title: 'Recv screen height', yLabel: 'px' },
+    { id: 'screenRecvFps', title: 'Recv screen framerate', yLabel: 'fps' },
+    { id: 'screenTotalFreezesDuration', title: 'Recv screen freezes', yLabel: 'count' },
+    { id: 'screenFirCountSent', title: 'Recv screen FIR sent', yLabel: 'count' },
+    { id: 'screenPliCountSent', title: 'Recv screen PLI sent', yLabel: 'count' },
+    { id: 'screenRecvEndToEndDelay', title: 'Recv screen end to end delay', yLabel: 'ms', processValue: ms },
+    { id: '' },
+  ].forEach(graph => {
+    build(graph.id, graph.title, graph.yLabel, graph.processValue, graph.width)
+  })
+
+  const [_, id, scenario] = path.basename(path.dirname(statsFile)).split('_')
+  const description = formatThrottleRule(parseThrottleRule(scenario), true, false)
+
+  const data = `\
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${id} (${description})</title>
+  <link rel="icon" href="https://raw.githubusercontent.com/vpalmisano/webrtcperf/devel/media/logo.svg">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-error-bars"></script>
+  <script src="https://cdn.jsdelivr.net/npm/hammerjs"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/vuetify@3.7.2/dist/vuetify.min.css" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/vuetify@3.7.2/dist/vuetify.min.js"></script>
+</head>
+<body>
+  <div id="app">
+    <v-app>
+      <v-main>
+        <v-app-bar color="primary" density="compact">
+          <v-app-bar-title><b>${id}</b> (${description})</v-app-bar-title>
+          <template v-slot:append>
+            <v-select color="primary" :items="participants" v-model="selected" density="compact" variant="solo" hide-details="auto"></v-select>
+          </template>
+        </v-app-bar>
+        <v-container fluid>
+          <v-row dense>
+            <v-col v-for="c in charts" :key="c.id" cols="12" :md="isExpanded(c.id) ? 12 : c.width || 3">
+              <template v-if="c.id">
+                <v-card color="primary" :variant="c.id.startsWith('_') ? 'tonal' : 'text'">
+                  <v-card-title class="text-subtitle-1 d-flex align-center flex-nowrap" @click="toggleExpanded(c)" style="cursor: pointer;">
+                    <span class="text-truncate">{{ c.title }}</span>
+                  </v-card-title>
+                  <v-card-text v-if="!c.id.startsWith('_')" style="min-height: 250px;">
+                    <canvas :id="c.id"></canvas>
+                  </v-card-text>
+                </v-card>
+              </template>
+              <template v-else>
+                <div class="empty-slot"></div>
+              </template>
+            </v-col>
+          </v-row>
+        </v-container>
+        <v-footer color="primary" density="compact">
+          <v-btn class="text-none" variant="text" density="compact" size="small" href="https://github.com/vpalmisano/webrtcperf" target="_blank">Generated with webrtcperf</v-btn>
+        </v-footer>
+      </v-main>
+    </v-app>
+  </div>
+
+  <script>
+    const { createApp, onMounted, nextTick, watch, ref } = Vue;
+    const vuetify = Vuetify.createVuetify();
+    const PARTICIPANTS = ${json5.stringify(['All', ...participants])};
+    const CHARTS = ${json5.stringify(charts)};
+    const SERIES_COLORS = ${json5.stringify(SERIES_COLORS)};
+
+    function fmtTime(v) {
+      const d = new Date(Number(v));
+      if (!isFinite(d.getTime())) return v;
+      const pad = n => String(n).padStart(2, '0');
+      return pad(d.getHours()) + ':' + pad(d.getMinutes())
+    }
+
+    function buildDatasets(datasets, selected) {
+      const filtered = selected === 'All' ? datasets : datasets.filter(d => d.label.startsWith(selected));
+      return filtered.map((s, i) => ({
+        label: s.label,
+        data: s.data,
+        fill: false,
+        backgroundColor: SERIES_COLORS[i % SERIES_COLORS.length],
+        borderColor: SERIES_COLORS[i % SERIES_COLORS.length],
+        borderWidth: 1,
+        pointRadius: 0,
+      }));
+    }
+
+    createApp({
+      setup() {
+        const participants = ref(PARTICIPANTS);
+        const selected = ref('All');
+        const charts = ref(CHARTS);
+        const chartInstances = new Map();
+        const expanded = ref(new Set());
+
+        function onPanZoom({ chart }) {
+          const x = chart.scales.x;
+          if (!x) return;
+          // Sync zoom level across all charts
+          for (const { chart: otherChart } of chartInstances.values()) {
+            if (otherChart !== chart) {
+              const otherX = otherChart.scales.x;
+              if (otherX) {
+                otherX.options.min = x.min;
+                otherX.options.max = x.max;
+                otherChart.update('none');
+              }
+            }
+          }
+        }
+
+        function createPanel(chartSpec) {
+          const canvas = document.getElementById(chartSpec.id);
+          if (!canvas) return;
+          const ctx = canvas.getContext('2d');
+          const chart = new Chart(ctx, {
+            type: 'line',
+            options: {
+              maintainAspectRatio: false,
+              animation: false,
+              layout: {
+                padding: 0,
+              },
+              interaction: {
+                intersect: false,
+                mode: 'x',
+              },
+              plugins: {
+                tooltip: {
+                  callbacks: {
+                    title: (context) => {
+                      if (context[0].parsed.x !== null) {
+                        return fmtTime(context[0].parsed.x);
+                      }
+                      return '';
+                    },
+                    label: (context) => {
+                      return context.parsed.y;
+                    }
+                  },
+                },
+                legend: { 
+                  display: true,
+                  position: 'bottom',
+                  align: 'start',
+                  maxHeight: 50,
+                  labels: {
+                    boxWidth: 8,
+                    boxHeight: 8,
+                    font: {
+                      size: 8,
+                      lineHeight: 1,
+                    },
+                  },
+                },
+                zoom: {
+                    pan: {
+                      enabled: true,
+                      mode: 'x',
+                      modifierKey: 'ctrl',
+                      onPan: onPanZoom,
+                    },
+                    zoom: {
+                      drag: { enabled: true },
+                      mode: 'x',
+                      onZoom: onPanZoom,
+                    },
+                },
+              },
+              scales: {
+                x: { 
+                  type: 'linear',
+                  title: { display: false, text: 'Time' },
+                  ticks: { display: true, callback: (value) => fmtTime(value) },
+                },
+                y: {
+                  type: 'linear',
+                  title: { display: true, text: chartSpec.yLabel },
+                  min: 0,
+                },
+              },
+            },
+            data: { datasets: buildDatasets(chartSpec.datasets, selected.value) },
+          });
+          chartInstances.set(chartSpec.id, { chart, spec: chartSpec });
+
+          canvas.addEventListener('contextmenu', e => {
+            e.preventDefault();
+            resetZoom();
+          });
+        }
+
+        function rebuildCharts() {
+          for (const { chart } of chartInstances.values()) chart.destroy();
+          chartInstances.clear();
+          nextTick(() => charts.value.forEach(createPanel));
+        }
+
+        function applyFilter() {
+          for (const { chart, spec } of chartInstances.values()) {
+            chart.data.datasets = buildDatasets(spec.datasets, selected.value);
+            chart.update();
+          }
+        }
+
+        function resetZoom() {
+          for (const { chart } of chartInstances.values()) {
+            chart.resetZoom('none');
+            if (chart.scales.x) {
+              chart.scales.x.options.min = undefined;
+              chart.scales.x.options.max = undefined;
+            }
+            chart.update('none');
+          }
+        }
+
+        function toggleExpanded(c) {
+          const id = c.id;
+          const s = new Set(expanded.value);
+          if (s.has(id)) s.delete(id); else s.add(id);
+          expanded.value = s;
+          nextTick(() => { const entry = chartInstances.get(id); entry?.chart?.resize(); });
+        }
+
+        function isExpanded(id) {
+          return id.startsWith('_') || expanded.value.has(id);
+        }
+
+        onMounted(() => {
+          nextTick(() => charts.value.forEach(createPanel));
+          window.addEventListener('resize', () => { for (const { chart } of chartInstances.values()) chart.resize(); });
+        });
+
+        watch(selected, () => applyFilter());
+
+        return { participants, selected, charts, resetZoom, toggleExpanded, isExpanded };
+      }
+    }).use(vuetify).mount('#app');
+  </script>
+</body>
+</html>`
+
+  await fs.promises.writeFile(outFile, data)
+}

package/src/scenarios.ts

@@ -10,6 +10,8 @@ import { PlotData, plotHtml } from './plot'
 
 const log = logger('webrtcperf:scenarios')
 
+export type StatsRow = Record<string, string | number>
+
 /**
  * It parses a CSV stats file and returns an array of objects representing each row.
  * @param filePath The path to the CSV stats file.
@@ -21,15 +23,12 @@ export async function parseStatsFile(filePath: string) {
   const lines = fileData.split('\n')
   const headers = lines[0].split(',')
   const data = lines.slice(1).map(line =>
-    line.split(',').reduce(
-      (acc, value, index) => {
-        if (value !== '') {
-          acc[headers[index]] = isNaN(Number(value)) ? value : Number(value)
-        }
-        return acc
-      },
-      {} as Record<string, string | number>,
-    ),
+    line.split(',').reduce((acc, value, index) => {
+      if (value !== '') {
+        acc[headers[index]] = isNaN(Number(value)) ? value : Number(value)
+      }
+      return acc
+    }, {} as StatsRow),
   )
   return data
 }