Refactor screenshare and media watermarking logic

- Remove unnecessary track generator methods in e2e-video-stats.js
- Disable video timestamp watermarking in get-user-media.js
- Enhance screenshare script with improved timestamp and slide handling
- Update session handling for fake media and screenshare configuration

Author: vpalmisano

scripts/e2e-video-stats.js

@@ -151,9 +151,6 @@ webrtcperf.applyVideoTimestampWatermark = mediaStream => {
 
   const trackProcessor = new window.MediaStreamTrackProcessor({ track })
   const trackGenerator = new window.MediaStreamTrackGenerator({ kind: 'video' })
-  trackGenerator.getSettings = () => trackSettings
-  trackGenerator.getConstraints = () => trackConstraints
-  trackGenerator.applyConstraints = async () => {}
   track.addEventListener('ended', () => {
     trackGenerator.close()
     trackProcessor.close()

scripts/get-user-media.js

@@ -238,9 +238,6 @@ if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
     if (webrtcperf.enabledForSession(webrtcperf.params.timestampWatermarkAudio)) {
       mediaStream = webrtcperf.applyAudioTimestampWatermark(mediaStream)
     }
-    if (webrtcperf.enabledForSession(webrtcperf.params.timestampWatermarkVideo)) {
-      mediaStream = webrtcperf.applyVideoTimestampWatermark(mediaStream)
-    }
 
     webrtcperf.collectMediaTracks(mediaStream)
     return mediaStream

scripts/screenshare.js

@@ -15,29 +15,6 @@ webrtcperf.startFakeScreenshare = (
   if (document.querySelector('#webrtcperf-fake-screenshare')) {
     return
   }
-
-  const animateElement = async (el, direction) => {
-    const slideIn = [
-      { transform: 'translateX(100%)', opacity: 0 },
-      { transform: 'translateX(0%)', opacity: 1 },
-    ]
-    const slideOut = [
-      { transform: 'translateX(0%)', opacity: 1 },
-      { transform: 'translateX(-100%)', opacity: 0 },
-    ]
-    return new Promise(resolve => {
-      el.animate(direction === 'in' ? slideIn : slideOut, {
-        duration: animationDuration,
-        iterations: 1,
-        fill: 'forwards',
-      }).addEventListener('finish', () => resolve())
-    })
-  }
-  const applyAnimation = async (el1, el2, delay) => {
-    await Promise.all([animateElement(el1, 'out'), animateElement(el2, 'in')])
-    await webrtcperf.sleep(delay)
-  }
-
   webrtcperf.log(
     `FakeScreenshare start: embed=${embed} slides=${slides} animationDuration=${animationDuration} delay=${delay} width=${width} height=${height}`,
   )
@@ -53,6 +30,7 @@ webrtcperf.startFakeScreenshare = (
     webrtcperf.GET_DISPLAY_MEDIA_CROP = '#webrtcperf-fake-screenshare'
   }
 
+  // Pointer animation.
   if (pointerAnimation) {
     const el = document.createElement('div')
     el.setAttribute(
@@ -74,6 +52,34 @@ webrtcperf.startFakeScreenshare = (
     )
   }
 
+  // Draw overlay with timestamp.
+  let drawTimestamp = null
+  if (webrtcperf.enabledForSession(webrtcperf.params.timestampWatermarkVideo)) {
+    const canvas = document.createElement('canvas')
+    const fontSize = Math.round(height / 18)
+    const textHeight = Math.round(height / 15)
+    canvas.width = width
+    canvas.height = textHeight
+    canvas.setAttribute(
+      'style',
+      `all: unset; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: ${textHeight}px;`,
+    )
+    wrapper.appendChild(canvas)
+    const ctx = canvas.getContext('2d')
+    ctx.font = `${fontSize}px Noto Mono`
+    ctx.textAlign = 'center'
+    const participantNameIndex = parseInt(webrtcperf.getParticipantName().split('-')[1]) || 0
+    drawTimestamp = () => {
+      ctx.fillStyle = 'black'
+      ctx.fillRect(0, 0, width, textHeight)
+      ctx.fillStyle = 'white'
+      const text = `${participantNameIndex}-${Date.now()}`
+      ctx.fillText(text, width / 2, fontSize)
+    }
+  }
+
+  // Slides animation.
+  let advanceSlide = null
   if (embed) {
     const el = document.createElement('iframe')
     el.setAttribute('src', embed)
@@ -82,7 +88,33 @@ webrtcperf.startFakeScreenshare = (
     el.setAttribute('style', 'padding: 0; margin: 0; border: none;')
     el.setAttribute('frameborder', '0')
     wrapper.appendChild(el)
+
+    advanceSlide = async () => {
+      try {
+        await window.keypressText('iframe', ' ') //0x24
+      } catch (e) {
+        console.error(e)
+      }
+    }
   } else {
+    const animateElement = async (el, direction) => {
+      const slideIn = [
+        { transform: 'translateX(100%)', opacity: 0 },
+        { transform: 'translateX(0%)', opacity: 1 },
+      ]
+      const slideOut = [
+        { transform: 'translateX(0%)', opacity: 1 },
+        { transform: 'translateX(-100%)', opacity: 0 },
+      ]
+      return new Promise(resolve => {
+        el.animate(direction === 'in' ? slideIn : slideOut, {
+          duration: animationDuration,
+          iterations: 1,
+          fill: 'forwards',
+        }).addEventListener('finish', () => resolve())
+      })
+    }
+
     const slidesElements = []
     for (let i = 0; i < slides; i++) {
       const img = document.createElement('img')
@@ -99,15 +131,20 @@ webrtcperf.startFakeScreenshare = (
       slidesElements.push(img)
     }
     let cur = 0
-    const loopIteration = async () => {
-      if (!document.querySelector('#webrtcperf-fake-screenshare')) return
+    advanceSlide = async () => {
       const next = cur === slidesElements.length - 1 ? 0 : cur + 1
-      await applyAnimation(slidesElements[cur], slidesElements[next], delay)
+      await Promise.all([animateElement(slidesElements[cur], 'out'), animateElement(slidesElements[next], 'in')])
       cur = next
-      setTimeout(() => loopIteration())
     }
-    loopIteration()
   }
+
+  const loopIteration = async () => {
+    if (!document.querySelector('#webrtcperf-fake-screenshare')) return
+    if (drawTimestamp) drawTimestamp()
+    if (advanceSlide) await advanceSlide()
+    setTimeout(() => loopIteration(), delay)
+  }
+  loopIteration()
 }
 
 webrtcperf.stopFakeScreenshare = () => {

src/session.ts

@@ -776,7 +776,7 @@ try {
   webrtcperf.params = {};
 }
 webrtcperf.GET_DISPLAY_MEDIA_TYPE = "${this.getDisplayMediaType}";
-webrtcperf.USE_FAKE_MEDIA = "${this.useFakeMedia}";
+webrtcperf.USE_FAKE_MEDIA = ${this.useFakeMedia};
   `
 
     if (this.serverPort) {
@@ -1339,7 +1339,7 @@ webrtcperf.VIDEO_URL = "http${this.serverUseHttps ? 's' : ''}://localhost:${this
     await page.exposeFunction('webrtcperf_sdpWrite', (sdp: sdpTransform.SessionDescription) => sdpTransform.write(sdp))
 
     await page.exposeFunction('webrtcperf_startFakeScreenshare', async () => {
-      if (!this.browser || this.getDisplayMediaType === 'monitor') return
+      if (!this.browser) return
       let screensharePage = page
       if (!this.useFakeMedia) {
         if (!this.screensharePage) {
@@ -1348,11 +1348,19 @@ webrtcperf.VIDEO_URL = "http${this.serverUseHttps ? 's' : ''}://localhost:${this
           for (const name of ['scripts/common.js', 'scripts/screenshare.js']) {
             await this.screensharePage.evaluateOnNewDocument(fs.readFileSync(resolvePackagePath(name), 'utf8'))
           }
+          await this.screensharePage.exposeFunction(
+            'keypressText',
+            async (selector: string, text: string, delay = 20) => {
+              await page.type(selector, text, { delay })
+            },
+          )
           await this.screensharePage.goto(
             `http${this.serverUseHttps ? 's' : ''}://localhost:${this.serverPort}/empty-page?auth=${this.serverSecret}&title=webrtcperf-screenshare`,
           )
         }
         screensharePage = this.screensharePage
+      } else if (this.getDisplayMediaType === 'monitor') {
+        return
       }
       await screensharePage.evaluate(() => webrtcperf.startFakeScreenshare())
     })