simplify fake screenshare option

Author: vpalmisano

scripts/common.js

@@ -1,5 +1,4 @@
-// Global namespace.
-const webrtcperf = {}
+/* global webrtcperf */
 
 // Capture console messages in a serialized format.
 webrtcperf.safeStringify = obj => {
@@ -422,8 +421,6 @@ webrtcperf.enabledForSession = value => {
 // Common page actions
 let actionsStarted = false
 
-webrtcperf.elapsedTime = () => Date.now() - window.WEBRTC_PERF_START_TIMESTAMP
-
 webrtcperf.setupActions = async () => {
   if (!window.PARAMS?.actions || actionsStarted) {
     return

scripts/get-user-media.js

@@ -50,18 +50,16 @@ function overrideGetDisplayMedia(constraints) {
 }
 
 async function applyGetDisplayMediaCrop(mediaStream) {
-  if (!window.GET_DISPLAY_MEDIA_CROP) {
-    return
-  }
-  const element = document.querySelector(window.GET_DISPLAY_MEDIA_CROP)
+  if (!webrtcperf.GET_DISPLAY_MEDIA_CROP) return
+  const element = document.querySelector(webrtcperf.GET_DISPLAY_MEDIA_CROP)
   const videoTrack = mediaStream.getVideoTracks()[0]
   if (element && videoTrack) {
     if ('RestrictionTarget' in window && 'fromElement' in window.RestrictionTarget) {
-      log(`applyGetDisplayMediaCrop with RestrictionTarget to "${window.GET_DISPLAY_MEDIA_CROP}"`)
+      log(`applyGetDisplayMediaCrop with RestrictionTarget to "${webrtcperf.GET_DISPLAY_MEDIA_CROP}"`)
       const restrictionTarget = await window.RestrictionTarget.fromElement(element)
       await videoTrack.restrictTo(restrictionTarget)
     } else {
-      log(`applyGetDisplayMediaCrop to "${window.GET_DISPLAY_MEDIA_CROP}"`)
+      log(`applyGetDisplayMediaCrop to "${webrtcperf.GET_DISPLAY_MEDIA_CROP}"`)
       element.style.zIndex = 99999
       const cropTarget = await window.CropTarget.fromElement(element)
       await videoTrack.cropTo(cropTarget)
@@ -194,7 +192,7 @@ if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
   navigator.mediaDevices.getDisplayMedia = async function (constraints, ...args) {
     log(`getDisplayMedia:`, JSON.stringify(constraints, null, 2))
     let stopFakeScreenshare = null
-    if (window.PARAMS?.fakeScreenshare) {
+    if (webrtcperf.GET_DISPLAY_MEDIA_TYPE === 'browser') {
       stopFakeScreenshare = await webrtcperf.setupFakeScreenshare(window.PARAMS?.fakeScreenshare)
     }
     overrideGetDisplayMedia(constraints)

scripts/peer-connection.js

@@ -307,10 +307,11 @@ window.RTCPeerConnection = function (conf, options) {
       webrtcperf
         .waitTrackMedia(receiver.track)
         .then(({ now }) => {
+          const t = webrtcperf.elapsedTime / 1000
           if (receiver.track.kind === 'video') {
-            webrtcperf.videoStartFrameDelayStats.push(now, (now - window.WEBRTC_PERF_START_TIMESTAMP) / 1000)
+            webrtcperf.videoStartFrameDelayStats.push(now, t)
           } else if (receiver.track.kind === 'audio') {
-            webrtcperf.audioStartFrameDelayStats.push(now, (now - window.WEBRTC_PERF_START_TIMESTAMP) / 1000)
+            webrtcperf.audioStartFrameDelayStats.push(now, t)
           }
         })
         .catch(err => log(`waitTrackMedia error: ${err.message}`))

scripts/screenshare.js

@@ -3,7 +3,7 @@
 webrtcperf.setupFakeScreenshare = ({
   embed = '',
   slides = 4,
-  delay = 15000,
+  delay = 5000,
   animationDuration = 1000,
   width = 1920,
   height = 1080,
@@ -42,7 +42,7 @@ webrtcperf.setupFakeScreenshare = ({
     `all: unset; position: fixed; top: 0; left: 0; width: ${width}px; height: ${height}px; z-index: -1; background-color: black; isolation: isolate; transform-style: flat;`,
   )
   document.body.appendChild(wrapper)
-  window.GET_DISPLAY_MEDIA_CROP = '#webrtcperf-fake-screenshare'
+  webrtcperf.GET_DISPLAY_MEDIA_CROP = '#webrtcperf-fake-screenshare'
 
   let running = true
   let timeout = 0

src/config.ts

@@ -428,14 +428,6 @@ e.g. \`{"video": {"width": 360, "height": 640}}\``,
     env: 'GET_DISPLAY_MEDIA_TYPE',
     arg: 'get-display-media-type',
   },
-  getDisplayMediaCrop: {
-    doc: `An HTML selector used for cropping the \`getDisplayMedia\` video track.`,
-    format: String,
-    nullable: true,
-    default: '',
-    env: 'GET_DISPLAY_MEDIA_CROP',
-    arg: 'get-display-media-crop',
-  },
   localStorage: {
     doc: `A JSON string with the \`localStorage\` object to be set on page \
 load.`,

src/session.ts

@@ -150,7 +150,6 @@ export interface SessionParams {
   disabledVideoCodecs: string
   getDisplayMediaOverride: string
   getDisplayMediaType: string
-  getDisplayMediaCrop: string
   localStorage: string
   clearCookies: boolean
   scriptPath: string
@@ -222,7 +221,6 @@ export class Session extends EventEmitter {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private readonly getDisplayMediaOverride: any | null
   private readonly getDisplayMediaType: string
-  private readonly getDisplayMediaCrop: string | null
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private readonly localStorage?: any
   private readonly clearCookies: boolean
@@ -355,7 +353,6 @@ export class Session extends EventEmitter {
     disabledVideoCodecs,
     getDisplayMediaOverride,
     getDisplayMediaType,
-    getDisplayMediaCrop,
     localStorage,
     clearCookies,
     scriptPath,
@@ -444,7 +441,6 @@ export class Session extends EventEmitter {
       this.disabledVideoCodecs = []
     }
     this.getDisplayMediaType = getDisplayMediaType
-    this.getDisplayMediaCrop = getDisplayMediaCrop
     if (localStorage) {
       try {
         this.localStorage = JSON5.parse(localStorage)
@@ -840,7 +836,8 @@ export class Session extends EventEmitter {
 
     // Export config to page.
     let cmd = `\
-window.WEBRTC_PERF_START_TIMESTAMP = ${this.startTimestamp};
+webrtcperf = {};
+webrtcperf.elapsedTime = () => Date.now() - ${this.startTimestamp};
 window.WEBRTC_PERF_URL = "${hideAuth(url)}";
 window.WEBRTC_PERF_SESSION = ${this.id};
 window.WEBRTC_PERF_TAB_INDEX = ${tabIndex};
@@ -854,6 +851,7 @@ window.RANDOM_AUDIO_PERIOD = ${this.randomAudioPeriod};
 try {
   window.PARAMS = JSON.parse('${JSON.stringify(this.scriptParams)}' || '{}');
 } catch (err) {}
+webrtcperf.GET_DISPLAY_MEDIA_TYPE = "${this.getDisplayMediaType}";
 `
 
     if (this.serverPort) {
@@ -881,11 +879,6 @@ window.SERVER_USE_HTTPS = ${this.serverUseHttps};
       )}');\n`
     }
 
-    if (this.getDisplayMediaCrop) {
-      log.debug('Using getDisplayMedia crop:', this.getDisplayMediaCrop)
-      cmd += `window.GET_DISPLAY_MEDIA_CROP = "${this.getDisplayMediaCrop}";\n`
-    }
-
     if (this.localStorage) {
       log.debug('Using localStorage:', this.localStorage)
       Object.entries(this.localStorage).map(([key, value]) => {