@vpalmisano/webrtcperf 4.1.7 → 4.1.10

package/src/config.ts

@@ -3,11 +3,14 @@ import { ipaddress, url } from 'convict-format-with-validator'
 import { existsSync } from 'fs'
 import os from 'os'
 import { join } from 'path'
+import json5 from 'json5'
+import yaml from 'yaml'
+import toml from 'toml'
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const puppeteer = require('puppeteer-core')
 
-import { logger } from './utils'
+import { downloadUrl, logger } from './utils'
 const log = logger('webrtcperf:config')
 
 const float = {
@@ -47,6 +50,12 @@ const index = {
 
 addFormats({ ipaddress, url, float, index })
 
+convict.addParser([
+  { extension: 'json', parse: json5.parse },
+  { extension: ['yml', 'yaml'], parse: yaml.parse },
+  { extension: 'toml', parse: toml.parse },
+])
+
 // config schema
 const configSchema = convict({
   url: {
@@ -70,9 +79,16 @@ session, \`$i\` the tab absolute index.`,
   },
   customUrlHandler: {
     doc: `This argument specifies the file path for the custom page URL handler that will be exported by default. \
-The custom page URL handler allows you to define custom URLs that can be used to open your application, \
-and provides the following variables for customization: \`$p\`: the process pid, \`$s\`: the session index, \
-\`$S\`: the total sessions, \`$t\`: the tab index, \`$T\`: the total tabs per session, \`$i\`: the tab absolute index.
+The custom page URL handler allows you to define custom URLs that can be used to open your application. \
+The handler function will be called with the following variables: \
+- sessions: the total number of sessions; \
+- tabsPerSession: the total number of tabs per session; \
+- id: the session global index (0-indexed); \
+- index: the tab global index (0-indexed); \
+- tabIndex: the tab index in the current session (0-indexed); \
+- pid: the process pid; \
+- env: the environment variables object; \
+- params: the script parameters object. \
 You can use these variables to create custom URL schemes that suit your application's needs.`,
     format: String,
     default: '',
@@ -183,8 +199,8 @@ seconds.`,
   },
   randomAudioPeriod: {
     doc: `If not zero, it specifies the maximum period in seconds after which \
-a new random active tab is selected, enabling the getUserMedia audio tracks in \
-that tab and disabling all of the other tabs.`,
+a new random active session is selected, enabling the getUserMedia audio tracks in \
+that session and disabling all of the others.`,
     format: 'nat',
     default: 0,
     env: 'RANDOM_AUDIO_PERIOD',
@@ -199,10 +215,11 @@ the selected audio will be activated (value: 0-100).`,
     arg: 'random-audio-probability',
   },
   randomAudioRange: {
-    doc: `When using random audio period, it defines the number of pages \
-to be included into the random selection.`,
-    format: 'nat',
-    default: 0,
+    doc: `When using random audio period, it defines the session indexes \
+to be included into the random selection (default: include all the sessions).`,
+    format: 'index',
+    default: 'true',
+    nullable: true,
     env: 'RANDOM_AUDIO_RANGE',
     arg: 'random-audio-range',
   },
@@ -274,12 +291,13 @@ The total decoders count is stored into the virtual file \`/dev/shm/chromium-vid
     env: 'MAX_VIDEO_DECODERS',
     arg: 'max-video-decoders',
   },
-  maxVideoDecodersAt: {
-    doc: `Applies the maxVideoDecoders option starting from this session \`ID\`.`,
-    format: Number,
-    default: -1,
-    env: 'MAX_VIDEO_DECODERS_AT',
-    arg: 'max-video-decoders-at',
+  maxVideoDecodersRange: {
+    doc: `It applies the max video decoders option to the sessions included into this list (default: include all the sessions)`,
+    format: 'index',
+    default: 'true',
+    nullable: true,
+    env: 'MAX_VIDEO_DECODERS_RANGE',
+    arg: 'max-video-decoders-range',
   },
   incognito: {
     doc: `Runs the browser in incognito mode.`,
@@ -289,13 +307,12 @@ The total decoders count is stored into the virtual file \`/dev/shm/chromium-vid
     arg: 'incognito',
   },
   display: {
-    doc: `If unset, the browser will run in headless mode.
+    doc: `If unset, the browser will run in headless mode, otherwise it will run in normal windowed mode.
 When running on MacOS or Windows, set it to any not-empty string.
 On Linux, set it to a valid X server \`DISPLAY\` string (e.g. \`:0\`).`,
     format: String,
     default: '',
     nullable: true,
-    env: 'DISPLAY',
     arg: 'display',
   },
   /* audioRedForOpus: {
@@ -337,7 +354,7 @@ calculated using \`Date.now()\``,
   enableDetailedStats: {
     doc: `If detailed participant metrics values should be collected.`,
     format: 'index',
-    default: '',
+    default: '0-24',
     nullable: true,
     env: 'ENABLE_DETAILED_STATS',
     arg: 'enable-detailed-stats',
@@ -358,7 +375,7 @@ calculated using \`Date.now()\``,
   },
   pageLogFilter: {
     doc: `If set, only the logs with the matching text will be printed \
-on console. Regexp string allowed.`,
+on the console. Regexp string allowed.`,
     format: String,
     default: '',
     nullable: true,
@@ -366,17 +383,25 @@ on console. Regexp string allowed.`,
     arg: 'page-log-filter',
   },
   pageLogPath: {
-    doc: `If set, page console logs will be saved on the selected file path.`,
+    doc: `If set, the page console logs will be saved on the selected file path.`,
     format: String,
     default: '',
     nullable: true,
     env: 'PAGE_LOG_PATH',
     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. `,
+    format: 'index',
+    nullable: true,
+    default: '',
+    env: 'ENABLE_BROWSER_LOGGING',
+    arg: 'enable-browser-logging',
+  },
   userAgent: {
     doc: `The user agent override.`,
     format: String,
-    default: '',
+    default: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36',
     nullable: true,
     env: 'USER_AGENT',
     arg: 'user-agent',
@@ -445,14 +470,6 @@ use the host X server instance.`,
     env: 'ENABLE_GPU',
     arg: 'enable-gpu',
   },
-  enableBrowserLogging: {
-    doc: `It enables the Chromium browser logging for the specified session indexes.`,
-    format: 'index',
-    nullable: true,
-    default: '',
-    env: 'ENABLE_BROWSER_LOGGING',
-    arg: 'enable-browser-logging',
-  },
   blockedUrls: {
     doc: `A comma-separated list of request URLs that will be automatically \
 blocked.`,
@@ -846,15 +863,30 @@ export type Config = typeof _schemaProperties
  * Loads the config object.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function loadConfig(filePath?: string, values?: any): Config {
-  if (filePath && existsSync(filePath)) {
-    log.debug(`Loading config from ${filePath}`)
-    configSchema.loadFile(filePath)
+export async function loadConfig(filePath?: string, values?: any): Promise<Config> {
+  if (filePath) {
+    if (filePath.startsWith('http')) {
+      log.debug(`Loading config from url: ${filePath}`)
+      const res = await downloadUrl(filePath)
+      if (!res?.data) {
+        throw new Error(`Failed to download configuration from: ${filePath}`)
+      }
+      const values =
+        res.contentType === 'application/x-yaml'
+          ? yaml.parse(res.data)
+          : res.contentType === 'application/toml'
+            ? toml.parse(res.data)
+            : json5.parse(res.data)
+      configSchema.load(values)
+    } else if (existsSync(filePath)) {
+      log.debug(`Loading config from local file: ${filePath}`)
+      configSchema.loadFile(filePath)
+    }
   } else if (values) {
     log.debug('Loading config from values.')
     configSchema.load(values)
   } else {
-    log.debug('Using default values.')
+    log.debug('Loading config from default values.')
     configSchema.load({})
   }
 

package/src/server.ts

@@ -119,14 +119,14 @@ export class Server {
         log.error(`mkdir ${this.serverData} error: ${err.message}`)
       })
       this.app.get('/data', this.getDataArchive.bind(this))
-      this.app.get('/data/*', this.getData.bind(this))
+      this.app.get('/data/:path', this.getData.bind(this))
     }
     if (this.videoCachePath) {
       log.debug(`using videoCachePath: ${this.videoCachePath}`)
       fs.promises.mkdir(this.videoCachePath, { recursive: true }).catch(err => {
         log.error(`mkdir ${this.videoCachePath} error: ${err.message}`)
       })
-      this.app.get('/cache/*', this.getCache.bind(this))
+      this.app.get('/cache/:path', this.getCache.bind(this))
     }
 
     this.app.use((err: Error, req: express.Request, res: express.Response, next: express.NextFunction) => {
@@ -429,7 +429,7 @@ export class Server {
    * content in tar.gz format.
    */
   private getData(req: express.Request, res: express.Response, next: express.NextFunction): void {
-    const paramPath = path.normalize(req.params[0]).replace(/^(\.\.(\/|\\|$))+/, '')
+    const paramPath = path.normalize(req.params.path).replace(/^(\.\.(\/|\\|$))+/, '')
     log.debug(`GET /data/${paramPath}`, req.query)
     const fpath = path.resolve(this.serverData, paramPath)
     if (!fs.existsSync(fpath)) {
@@ -453,7 +453,7 @@ export class Server {
   }
 
   private getCache(req: express.Request, res: express.Response, next: express.NextFunction): void {
-    const paramPath = path.normalize(req.params[0]).replace(/^(\.\.(\/|\\|$))+/, '')
+    const paramPath = path.normalize(req.params.path).replace(/^(\.\.(\/|\\|$))+/, '')
     log.debug(`GET /cache/${paramPath}`, req.query)
     const fpath = path.resolve(this.videoCachePath, paramPath)
     if (!fs.existsSync(fpath)) {

package/src/session.ts

@@ -15,6 +15,7 @@ import puppeteer, {
   CDPSession,
   CookieParam,
   ElementHandle,
+  ImageFormat,
   KeyInput,
   Metrics,
   Page,
@@ -176,7 +177,7 @@ export interface SessionParams {
   debuggingAddress: string
   randomAudioPeriod: number
   maxVideoDecoders: number
-  maxVideoDecodersAt: number
+  maxVideoDecodersRange: string
   incognito: boolean
   serverPort: number
   serverSecret: string
@@ -260,7 +261,7 @@ export class Session extends EventEmitter {
   private readonly debuggingAddress: string
   private readonly randomAudioPeriod: number
   private readonly maxVideoDecoders: number
-  private readonly maxVideoDecodersAt: number
+  private readonly maxVideoDecodersRange: string
   private readonly incognito: boolean
   private readonly serverPort: number
   private readonly serverSecret: string
@@ -390,7 +391,7 @@ export class Session extends EventEmitter {
     debuggingAddress,
     randomAudioPeriod,
     maxVideoDecoders,
-    maxVideoDecodersAt,
+    maxVideoDecodersRange,
     incognito,
     serverPort,
     serverSecret,
@@ -464,7 +465,7 @@ export class Session extends EventEmitter {
     this.userAgent = userAgent
     this.randomAudioPeriod = randomAudioPeriod
     this.maxVideoDecoders = maxVideoDecoders
-    this.maxVideoDecodersAt = maxVideoDecodersAt
+    this.maxVideoDecodersRange = maxVideoDecodersRange
     this.incognito = incognito
     this.serverPort = serverPort
     this.serverSecret = serverSecret
@@ -596,7 +597,7 @@ export class Session extends EventEmitter {
       env.CHROME_LOG_FILE = path.resolve(pageLogDir, `chrome-${this.id}.log`)
     }
 
-    if (this.maxVideoDecoders !== -1 && this.id >= this.maxVideoDecodersAt) {
+    if (this.maxVideoDecoders !== -1 && enabledForSession(this.id, this.maxVideoDecodersRange)) {
       fieldTrials = `WebRTC-MaxVideoDecoders/${this.maxVideoDecoders}/` + fieldTrials
     }
     if (fieldTrials.length) {
@@ -1921,7 +1922,7 @@ webrtcperf.config.AUDIO_URL = "http${this.serverUseHttps ? 's' : ''}://localhost
     if (!page) {
       throw new Error(`Page ${index} not found`)
     }
-    const filePath = `/tmp/screenshot-${index}.${format}`
+    const filePath = `/tmp/screenshot-${index}.${format}` as `${string}.${ImageFormat}`
     await page.screenshot({
       path: filePath,
       fullPage: true,

package/src/stats.ts

@@ -795,10 +795,12 @@ export class Stats extends events.EventEmitter {
     this.collectedStatsConfig.pages = 0
     this.collectedStatsConfig.startTime = this.startTimestamp
     // Reset collectedStats object.
-    Object.values(this.collectedStats).forEach(stats => {
+    const prevByParticipantAndTrackStats = {} as Record<string, Set<string>>
+    Object.entries(this.collectedStats).forEach(([name, stats]) => {
       stats.all.reset()
       Object.values(stats.byHost).forEach(s => s.reset())
       Object.values(stats.byCodec).forEach(s => s.reset())
+      prevByParticipantAndTrackStats[name] = new Set(Object.keys(stats.byParticipantAndTrack))
       stats.byParticipantAndTrack = {}
     })
     for (const [sessionId, session] of this.sessions.entries()) {
@@ -812,6 +814,7 @@ export class Stats extends events.EventEmitter {
         //log.log(name, obj)
         try {
           const collectedStats = this.collectedStats[name]
+          const prevByParticipantAndTrack = prevByParticipantAndTrackStats[name]
           if (typeof obj === 'number' && isFinite(obj)) {
             collectedStats.all.push(obj)
           } else {
@@ -828,7 +831,9 @@ export class Stats extends events.EventEmitter {
                 stats.push(value)
                 // Push participant and track values.
                 if (enabledForSession(sessionId, this.enableDetailedStats) && participantName) {
-                  collectedStats.byParticipantAndTrack[`${participantName}:${trackId || ''}`] = value
+                  const label = `${participantName}:${trackId || ''}`
+                  collectedStats.byParticipantAndTrack[label] = value
+                  prevByParticipantAndTrack.delete(label)
                 }
               } else if (typeof value === 'string') {
                 // Codec stats.
@@ -869,6 +874,7 @@ export class Stats extends events.EventEmitter {
           return
         }
         const collectedStats = this.collectedStats[name]
+        const prevByParticipantAndTrack = prevByParticipantAndTrackStats[name]
         collectedStats.all.push(stats.all)
         Object.entries(stats.byHost).forEach(([host, values]) => {
           if (!collectedStats.byHost[host]) {
@@ -884,6 +890,7 @@ export class Stats extends events.EventEmitter {
         })
         Object.entries(stats.byParticipantAndTrack).forEach(([label, value]) => {
           collectedStats.byParticipantAndTrack[label] = value
+          prevByParticipantAndTrack.delete(label)
         })
       })
     }
@@ -930,7 +937,7 @@ export class Stats extends events.EventEmitter {
     await Promise.allSettled([
       this.writeStats(),
       this.writeDetailedStats(),
-      this.sendToPushGateway(),
+      this.sendToPushGateway(prevByParticipantAndTrackStats),
       this.writeAlertRulesReport(),
     ])
   }
@@ -1062,7 +1069,7 @@ export class Stats extends events.EventEmitter {
   /**
    * sendToPushGateway
    */
-  async sendToPushGateway(): Promise<void> {
+  async sendToPushGateway(removedByParticipantAndTrackStats: Record<string, Set<string>>): Promise<void> {
     if (!this.gateway || !this.running) {
       return
     }
@@ -1109,6 +1116,20 @@ export class Stats extends events.EventEmitter {
         })
       }
 
+      // Remove metrics for removed participants and tracks.
+      const removedByParticipantAndTrack = removedByParticipantAndTrackStats[name]
+      if (removedByParticipantAndTrack) {
+        for (const label of removedByParticipantAndTrack) {
+          const [participantName, trackId] = label.split(':', 2)
+          metric.value?.remove({
+            participantName,
+            trackId,
+            datetime,
+            ...this.customMetricsLabels,
+          })
+        }
+      }
+
       // Set alerts metrics.
       if (this.alertRules && this.alertRules[name]) {
         const rule = this.alertRules[name]

package/src/utils.ts

@@ -20,7 +20,7 @@ import os, { networkInterfaces } from 'os'
 import path, { dirname } from 'path'
 import pidtree from 'pidtree'
 import pidusage from 'pidusage'
-import puppeteer, { Page } from 'puppeteer-core'
+import puppeteer, { ImageFormat, Page } from 'puppeteer-core'
 
 import { Session } from './session'
 
@@ -255,7 +255,7 @@ export function startRandomActivateAudio(
   sessions: Map<number, Session>,
   randomAudioPeriod: number,
   randomAudioProbability: number,
-  randomAudioRange: number,
+  randomAudioRange: string,
 ): void {
   if (randomActivateAudioRunning) return
   randomActivateAudioRunning = true
@@ -272,13 +272,13 @@ export function stopRandomActivateAudio(): void {
  * @param sessions The sessions Map
  * @param randomAudioPeriod If set, the function will be called in loop
  * @param randomAudioProbability The activation probability
- * @param randomAudioRange The number of pages to include into the automation
+ * @param randomAudioRange The page indexes to include into the automation
  */
 export async function randomActivateAudio(
   sessions: Map<number, Session>,
   randomAudioPeriod: number,
   randomAudioProbability: number,
-  randomAudioRange: number,
+  randomAudioRange: string,
 ): Promise<void> {
   if (!randomAudioPeriod || !randomActivateAudioRunning) {
     return
@@ -287,13 +287,9 @@ export async function randomActivateAudio(
     let pages: (Page | null)[] = []
     for (const session of sessions.values()) {
       const sessionPages = [...session.pages.values()]
-      if (randomAudioRange) {
-        if (session.id > randomAudioRange) {
-          break
-        }
-        sessionPages.splice(randomAudioRange - session.id)
+      if (enabledForSession(session.id, randomAudioRange)) {
+        pages = pages.concat(sessionPages)
       }
-      pages = pages.concat(sessionPages)
     }
     // Remove pages with no audio tracks.
     for (const [i, page] of pages.entries()) {
@@ -380,6 +376,8 @@ export interface DownloadData {
   end: number
   /** Total returned size. */
   total: number
+  /** Content type. */
+  contentType: string
 }
 
 /**
@@ -452,12 +450,13 @@ export async function downloadUrl(
   } else {
     /* log.debug(`downloadUrl ${response.data.length} bytes, headers=${
       JSON.stringify(response.headers)}`); */
+    const contentType = response.headers['content-type']
     let start = 0
     let end = 0
     let total = 0
     if (response.headers['content-range']) {
-      log.debug(`downloadUrl ${response.data.length} bytes, content-range=${response.headers['content-range']}`)
       const contentRange = response.headers['content-range'].split('/')
+      log.debug(`downloadUrl ${response.data.length} bytes, contentType=${contentType}, contentRange=${contentRange}`)
       const rangeParts = contentRange[0].split('-')
       total = parseInt(contentRange[1])
       if (rangeParts.length === 2) {
@@ -475,6 +474,7 @@ export async function downloadUrl(
       start,
       end,
       total,
+      contentType,
     }
   }
 }
@@ -613,7 +613,7 @@ SIGNALS.forEach(event =>
 export async function checkChromeExecutable(): Promise<string> {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
   const { loadConfig } = require('./config')
-  const config = loadConfig()
+  const config = await loadConfig()
   const cacheDir = path.join(os.homedir(), '.webrtcperf/chrome')
 
   const fixSemVer = (v: string) => v.split('.').slice(0, 3).join('.')
@@ -1037,7 +1037,8 @@ export async function pageScreenshot(
     if (!element) {
       throw new Error(`pageScreenshot selector "${selector}" not found`)
     }
-    await element.screenshot({ path: filePath })
+    const path = filePath as `${string}.${ImageFormat}`
+    await element.screenshot({ path })
   } catch (err) {
     log.error(`pageScreenshot error: ${(err as Error).message}`)
   } finally {

package/src/vmaf.ts

@@ -587,8 +587,19 @@ ${splitFilter(['ref_vmaf', 'ref_psnr', preview ? 'ref_preview' : ''])};\
 }
 
 async function writeGraph(vmafLogPath: string) {
+  const {
+    CategoryScale,
+    Chart,
+    LinearScale,
+    LineController,
+    LineElement,
+    PointElement,
+    Legend,
+    Title,
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+  } = require('chart.js')
   // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const { ChartJSNodeCanvas } = require('chartjs-node-canvas')
+  const { Canvas } = require('skia-canvas')
 
   const vmafLog = JSON.parse(await fs.promises.readFile(vmafLogPath, 'utf-8')) as {
     frames: {
@@ -625,13 +636,9 @@ async function writeGraph(vmafLogPath: string) {
     )
     .map(d => ({ x: d.x, y: d.y / d.count }))
 
-  const chartJSNodeCanvas = new ChartJSNodeCanvas({
-    width: 1280,
-    height: 720,
-    backgroundColour: 'white',
-  })
-
-  const buffer = await chartJSNodeCanvas.renderToBuffer({
+  Chart.register([CategoryScale, LineController, LineElement, LinearScale, PointElement, Legend, Title])
+  const canvas = new Canvas(1280, 720)
+  const chart = new Chart(canvas, {
     type: 'line',
     data: {
       labels: data.map(d => d.x),
@@ -652,7 +659,7 @@ async function writeGraph(vmafLogPath: string) {
       plugins: {
         title: {
           display: true,
-          text: path.basename(vmafLogPath).replace('.vmaf.json', '').replace(/_/g, ' '),
+          text: path.basename(path.dirname(vmafLogPath)).replace(/_/g, ' '),
         },
       },
       scales: {
@@ -663,8 +670,8 @@ async function writeGraph(vmafLogPath: string) {
       },
     },
   })
-
-  await fs.promises.writeFile(fpath, buffer)
+  await canvas.saveAs(fpath, { format: 'png', matte: 'white' })
+  chart.destroy()
 }
 
 interface Crop {