use ElementCapture browser feature

Author: vpalmisano

scripts/get-user-media.js

@@ -53,12 +53,19 @@ async function applyGetDisplayMediaCrop(mediaStream) {
   if (!window.GET_DISPLAY_MEDIA_CROP) {
     return
   }
-  const area = document.querySelector(window.GET_DISPLAY_MEDIA_CROP)
+  const element = document.querySelector(window.GET_DISPLAY_MEDIA_CROP)
   const videoTrack = mediaStream.getVideoTracks()[0]
-  if (area && videoTrack && videoTrack.cropTo) {
-    log(`applyGetDisplayMediaCrop to "${window.GET_DISPLAY_MEDIA_CROP}"`)
-    const cropTarget = await window.CropTarget.fromElement(area)
-    await videoTrack.cropTo(cropTarget)
+  if (element && videoTrack) {
+    if ('RestrictionTarget' in window && 'fromElement' in window.RestrictionTarget) {
+      log(`applyGetDisplayMediaCrop with RestrictionTarget to "${window.GET_DISPLAY_MEDIA_CROP}"`)
+      const restrictionTarget = await window.RestrictionTarget.fromElement(element)
+      await videoTrack.restrictTo(restrictionTarget)
+    } else {
+      log(`applyGetDisplayMediaCrop to "${window.GET_DISPLAY_MEDIA_CROP}"`)
+      element.style.zIndex = 99999
+      const cropTarget = await window.CropTarget.fromElement(element)
+      await videoTrack.cropTo(cropTarget)
+    }
   }
 }
 

scripts/screenshare.js

@@ -39,9 +39,10 @@ webrtcperf.setupFakeScreenshare = ({
   wrapper.setAttribute('id', 'webrtcperf-fake-screenshare')
   wrapper.setAttribute(
     'style',
-    'position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99999; background-color: black;',
+    'position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; background-color: black; isolation: isolate; transform-style: flat;',
   )
   document.body.appendChild(wrapper)
+  window.GET_DISPLAY_MEDIA_CROP = '#webrtcperf-fake-screenshare'
 
   let running = true
   let timeout = 0

src/session.ts

@@ -568,6 +568,7 @@ export class Session extends EventEmitter {
       // '--auto-select-desktop-capture-source=Entire screen',
       // `--auto-select-tab-capture-source-by-title=about:blank`,
       `--remote-debugging-port=${this.debuggingPort ? this.debuggingPort + this.id : 0}`,
+      '--enable-features=VaapiVideoDecoder,VaapiVideoEncoder,VaapiVideoDecodeLinuxGL,ElementCapture',
     ]
 
     // 'WebRTC-VP8ConferenceTemporalLayers/2',
@@ -595,7 +596,6 @@ export class Session extends EventEmitter {
 
     if (this.enableGpu) {
       args.push(
-        '--enable-features=VaapiVideoDecoder,VaapiVideoEncoder,VaapiVideoDecodeLinuxGL',
         '--ignore-gpu-blocklist',
         '--enable-gpu-rasterization',
         '--enable-zero-copy',