@vpalmisano/webrtcperf 4.5.1 → 4.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vpalmisano/webrtcperf",
-  "version": "4.5.1",
+  "version": "4.6.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/vpalmisano/webrtcperf.git"
@@ -51,10 +51,10 @@
   },
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@google/genai": "^1.21.0",
+    "@google/genai": "^1.22.0",
     "@puppeteer/browsers": "^2.10.10",
     "@vpalmisano/throttler": "0.0.14",
-    "@vpalmisano/webrtcperf-js": "^1.1.14",
+    "@vpalmisano/webrtcperf-js": "^1.1.16",
     "axios": "^1.12.2",
     "chalk-template": "^1.1.2",
     "change-case": "^4.1.2",
@@ -62,7 +62,7 @@
     "convict": "^6.2.4",
     "convict-format-with-validator": "^6.2.0",
     "debug-level": "^4.1.1",
-    "dockerode": "^4.0.8",
+    "dockerode": "^4.0.9",
     "express": "^5.1.0",
     "express-basic-auth": "^1.2.1",
     "fast-stats": "^0.0.7",
@@ -78,8 +78,8 @@
     "pidtree": "^0.6.0",
     "pidusage": "^4.0.1",
     "prom-client": "^15.1.3",
-    "puppeteer": "^24.22.3",
-    "puppeteer-core": "^24.22.3",
+    "puppeteer": "^24.23.0",
+    "puppeteer-core": "^24.23.0",
     "puppeteer-extra": "^3.3.6",
     "puppeteer-extra-plugin-stealth": "^2.11.2",
     "puppeteer-intercept-and-modify-requests": "^1.3.1",
@@ -90,7 +90,7 @@
     "yaml": "^2.8.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.36.0",
+    "@eslint/js": "^9.37.0",
     "@types/basic-auth": "^1.1.3",
     "@types/compression": "^1.8.1",
     "@types/convict": "^6.1.6",
@@ -98,18 +98,18 @@
     "@types/dockerode": "^3.3.44",
     "@types/fast-stats": "^0.0.35",
     "@types/marked-terminal": "^6.1.1",
-    "@types/node": "^20.19.17",
+    "@types/node": "^20.19.19",
     "@types/node-os-utils": "^1.3.4",
     "@types/pidusage": "^2.0.5",
     "@types/sdp-transform": "^2.15.0",
     "@types/sprintf-js": "^1.1.4",
     "@types/tar-fs": "^2.0.4",
     "@types/ws": "^8.18.1",
-    "@typescript-eslint/eslint-plugin": "^8.44.1",
-    "@typescript-eslint/parser": "^8.44.1",
+    "@typescript-eslint/eslint-plugin": "^8.45.0",
+    "@typescript-eslint/parser": "^8.45.0",
     "@vpalmisano/typedoc-cookie-consent": "^0.0.4",
     "@vpalmisano/typedoc-plugin-ga": "^1.0.6",
-    "eslint": "^9.36.0",
+    "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
@@ -121,16 +121,16 @@
     "terser-webpack-plugin": "^5.3.14",
     "ts-loader": "^9.5.4",
     "typedoc": "^0.28.13",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.44.1",
-    "webpack": "^5.101.3",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "webpack": "^5.102.0",
     "webpack-cli": "^6.0.1",
     "webpack-node-externals": "^3.0.0",
     "yarn-upgrade-minor": "^1.0.13"
   },
   "optionalDependencies": {
     "chart.js": "^4.5.0",
-    "chartjs-chart-error-bars": "^4.4.4",
+    "chartjs-chart-error-bars": "^4.4.5",
     "skia-canvas": "^3.0.8",
     "zeromq": "^6.5.0"
   }

package/src/app.ts

@@ -292,7 +292,7 @@ async function main(): Promise<void> {
   }
 
   const stop = async () => {
-    console.log('Exiting...')
+    log.info('Exiting...')
     await application.stop(true)
   }
   registerExitHandler(() => stop())
@@ -301,12 +301,15 @@ async function main(): Promise<void> {
 
   // Command line interface.
   if (process.stdin && process.stdin.setRawMode) {
-    console.log('Press [q] to quit or [x] to exit immediately')
+    console.log('Press [e] to exit after the current test, [q] to exit immediately or [x] to force exit.')
     process.stdin.setRawMode(true)
     process.stdin.resume()
     process.stdin.on('data', async data => {
       log.debug('[stdin]', data[0])
-      if (data[0] === 'q'.charCodeAt(0)) {
+      if (data[0] === 'e'.charCodeAt(0)) {
+        log.info(`Exiting after the current test (${i + 1}/${total})...`)
+        configs.splice(0)
+      } else if (data[0] === 'q'.charCodeAt(0)) {
         try {
           await stop()
         } catch (err: unknown) {
@@ -314,6 +317,7 @@ async function main(): Promise<void> {
           process.exit(1)
         }
       } else if (data[0] === 'x'.charCodeAt(0)) {
+        log.info('Force exiting...')
         process.exit(1)
       }
     })

package/src/config.ts

@@ -442,13 +442,21 @@ on the console. Regexp string allowed.`,
     arg: 'page-log-path',
   },
   enableBrowserLogging: {
-    doc: `It enables the Chromium browser logging for the specified session indexes. It requires the page log path option to be set. `,
+    doc: `It enables the Chromium browser logging for the specified session indexes. It requires the pageLogPath option to be set.`,
     format: 'index',
     nullable: true,
     default: '',
     env: 'ENABLE_BROWSER_LOGGING',
     arg: 'enable-browser-logging',
   },
+  enableRtpDump: {
+    doc: `It enables the RTP dump for the specified session indexes. It requires the enableBrowserLogging option to be set. The text2pcap utility is required to convert the RTP dump to pcap format.`,
+    format: 'index',
+    nullable: true,
+    default: '',
+    env: 'ENABLE_RTP_DUMP',
+    arg: 'enable-rtp-dump',
+  },
   userAgent: {
     doc: `The user agent override.`,
     format: String,

package/src/docker.ts

@@ -4,6 +4,7 @@ import { loadConfig } from './config'
 import { runShellCommand } from '@vpalmisano/throttler'
 import os from 'os'
 import fs from 'fs'
+import { Writable } from 'stream'
 
 const log = logger('webrtcperf:docker')
 
@@ -57,6 +58,10 @@ export async function runWithDocker(argv: string[]) {
     'VIDEO_CACHE_PATH=/root/.webrtcperf/cache',
   ]
 
+  if (process.env.URL) {
+    env.push(`URL=${process.env.URL}`)
+  }
+
   if (configs[0].prometheusPushgateway.startsWith('http://localhost')) {
     env.push('PROMETHEUS_PUSHGATEWAY=http://pushgateway:9091')
   }
@@ -110,7 +115,21 @@ export async function runWithDocker(argv: string[]) {
     })
 
     process.stdin.pipe(stream)
-    stream.pipe(process.stdout)
+    stream.pipe(
+      new Writable({
+        write: (chunk, _encoding, callback) => {
+          const s = chunk.toString('utf-8').trim()
+          try {
+            const data = JSON.parse(s)
+            log.info(data.msg.trim())
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          } catch (_err) {
+            log.info(s)
+          }
+          callback()
+        },
+      }),
+    )
 
     await new Promise(resolve => {
       container.wait((err: Error, data: { StatusCode: number }) => {

package/src/plot.ts

@@ -175,7 +175,19 @@ function groupByParticipant(rows: StatsRow[]) {
   return m
 }
 
+/**
+ * It plots a detailed stats dashboard from a CSV file.
+ * @param statsFile The path to the CSV file containing the detailed stats.
+ * @param outFile The path to the output HTML file.
+ * @returns A promise that resolves when the plot is complete.
+ * @example
+ * ```bash
+ * webrtcperf --plot logs/detailed-stats.csv plot.html
+ * ```
+ */
 export async function plotDetailedStatsDashboard(statsFile: string, outFile = 'plot.html') {
+  log.info(`Plotting detailed stats from ${statsFile} to ${outFile}`)
+
   const rows = await parseStatsFile(statsFile)
   if (rows.length === 0) {
     log.warn('No stats found')
@@ -322,8 +334,16 @@ export async function plotDetailedStatsDashboard(statsFile: string, outFile = 'p
     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 dirName = path.basename(path.dirname(statsFile))
+  let title = dirName
+  let description = ''
+  try {
+    const [_, id, scenario] = dirName.split('_')
+    title = id
+    description = formatThrottleRule(parseThrottleRule(scenario), true, false)
+  } catch (error) {
+    log.debug(`Invalid directory name: ${dirName}`, error)
+  }
 
   const data = `\
 <!DOCTYPE html>
@@ -331,7 +351,7 @@ export async function plotDetailedStatsDashboard(statsFile: string, outFile = 'p
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${id} (${description})</title>
+  <title>${title} (${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>
@@ -347,7 +367,7 @@ export async function plotDetailedStatsDashboard(statsFile: string, outFile = 'p
     <v-app>
       <v-main>
         <v-app-bar color="primary" density="compact">
-          <v-app-bar-title><b>${id}</b> (${description})</v-app-bar-title>
+          <v-app-bar-title><b>${title}</b>${description ? ` (${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>

package/src/rtcstats.ts

@@ -260,7 +260,8 @@ export enum RtcStatsMetricNames {
   videoFirCountSent = 'videoFirCountSent',
   videoPliCountSent = 'videoPliCountSent',
   videoDecodeLatency = 'videoDecodeLatency',
-  //'videoFramesDecoded',
+  videoFramesDecoded = 'videoFramesDecoded',
+  videoFramesDropped = 'videoFramesDropped',
   videoRecvFrames = 'videoRecvFrames',
   videoRecvFps = 'videoRecvFps',
   videoRecvAvgJitterBufferDelay = 'videoRecvAvgJitterBufferDelay',
@@ -285,7 +286,8 @@ export enum RtcStatsMetricNames {
   screenFirCountSent = 'screenFirCountSent',
   screenPliCountSent = 'screenPliCountSent',
   screenDecodeLatency = 'screenDecodeLatency',
-  //'screenFramesDecoded',
+  screenFramesDecoded = 'screenFramesDecoded',
+  screenFramesDropped = 'screenFramesDropped',
   screenRecvFrames = 'screenRecvFrames',
   screenRecvFps = 'screenRecvFps',
   screenRecvAvgJitterBufferDelay = 'screenRecvAvgJitterBufferDelay',
@@ -437,7 +439,8 @@ export function updateRtcStats(
         })
       }
       if (inboundRtp.kind === 'video' && inboundRtp.keyFramesDecoded > 0) {
-        //setStats(stats, prefix + 'FramesDecoded', key, inboundRtp.framesDecoded
+        setStats(stats, (prefix + 'FramesDecoded') as RtcStatsMetricNames, key, inboundRtp.framesDecoded)
+        setStats(stats, (prefix + 'FramesDropped') as RtcStatsMetricNames, key, inboundRtp.framesDropped)
         setStats(stats, (prefix + 'RecvFrames') as RtcStatsMetricNames, key, inboundRtp.framesReceived)
         setStats(stats, (prefix + 'RecvFps') as RtcStatsMetricNames, key, inboundRtp.framesPerSecond)
         setStats(stats, (prefix + 'RecvHeight') as RtcStatsMetricNames, key, inboundRtp.frameHeight)

package/src/session.ts

@@ -43,6 +43,7 @@ import {
   portForwarder,
   resolveIP,
   resolvePackagePath,
+  runShellCommand,
   sha256,
   sleep,
   waitStopProcess,
@@ -147,6 +148,7 @@ export interface SessionParams {
   useFakeMedia: boolean
   enableGpu: string
   enableBrowserLogging: string
+  enableRtpDump: string
   startTimestamp: number
   sessions: number
   tabsPerSession: number
@@ -218,6 +220,7 @@ export class Session extends EventEmitter {
   private readonly useFakeMedia: boolean
   private readonly enableGpu: string
   private readonly enableBrowserLogging: boolean
+  private readonly enableRtpDump: boolean
   private readonly startTimestamp: number
   private readonly sessions: number
   private readonly tabsPerSession: number
@@ -365,6 +368,7 @@ export class Session extends EventEmitter {
     useFakeMedia,
     enableGpu,
     enableBrowserLogging,
+    enableRtpDump,
     startTimestamp,
     sessions,
     tabsPerSession,
@@ -433,6 +437,7 @@ export class Session extends EventEmitter {
     this.useFakeMedia = useFakeMedia
     this.enableGpu = enableGpu
     this.enableBrowserLogging = enabledForSession(this.id, enableBrowserLogging)
+    this.enableRtpDump = enabledForSession(this.id, enableRtpDump)
     this.startTimestamp = startTimestamp || Date.now()
     this.sessions = sessions || 1
     this.tabsPerSession = tabsPerSession || 1
@@ -595,12 +600,15 @@ export class Session extends EventEmitter {
 
     let fieldTrials = this.chromiumFieldTrials || ''
 
-    if (this.enableBrowserLogging && this.pageLogPath) {
+    if (this.pageLogPath && this.enableBrowserLogging) {
       const pageLogDir = path.dirname(this.pageLogPath)
       const eventLogPath = path.resolve(pageLogDir, `webrtc-event-logging-${this.id}`)
       fs.mkdirSync(eventLogPath, { recursive: true })
       args.push('--enable-logging', '--vmodule=*/webrtc/*=5', '--v=0', `--webrtc-event-logging=${eventLogPath}`)
       fieldTrials = 'WebRTC-RtcEventLogNewFormat/Disabled/' + fieldTrials
+      if (this.enableRtpDump) {
+        fieldTrials = 'WebRTC-Debugging-RtpDump/Enabled/' + fieldTrials
+      }
       env.CHROME_LOG_FILE = path.resolve(pageLogDir, `chrome-${this.id}.log`)
     }
 
@@ -1467,6 +1475,26 @@ Object.defineProperty(window.screen.orientation, 'type', { value: 'landscape-pri
       page.once('close', () => throttleNotifier.off('change', onThrottleChange))
     }
 
+    if (this.pageLogPath && this.enableRtpDump) {
+      page.once('close', async () => {
+        const dirPath = path.dirname(this.pageLogPath)
+        const logFilePath = path.join(dirPath, `chrome-${this.id}.log`)
+        if (fs.existsSync(logFilePath)) {
+          const pcapFilePath = path.join(dirPath, `chrome-${this.id}.pcap`)
+          try {
+            await runShellCommand(`\
+grep RTP_DUMP ${logFilePath} | text2pcap -D -u 1000,2000 -t %H:%M:%S.%f - ${pcapFilePath};
+grep -v RTP_DUMP ${logFilePath} > ${logFilePath}.tmp;
+mv ${logFilePath}.tmp ${logFilePath};
+`)
+            log.info(`rtp dump saved to: ${pcapFilePath}`)
+          } catch (err) {
+            log.error(`error converting rtp dump to pcap: ${(err as Error).stack}`)
+          }
+        }
+      })
+    }
+
     log.debug(`Page ${index + 1} "${url}" loaded in ${(Date.now() - pageLoadTime) / 1000}s`)
 
     for (let i = 0; i < this.evaluateAfter.length; i++) {