getUserMedia() capture window contents only

Viewed 309

Using the Electron implementation of desktopCapturer, I'm attempting to mirror only the contents of an external window in my Electron app. navigator.mediaDevices.getUserMedia looked like the perfect thing to use for this, but it's giving me the window contents and chrome - in addition the theme of the window doesn't match my desktop theme.

Ideally, I just want to display a specified window's content. I don't see any to tell it that I just want window contents, and I dont see any way to crop the stream - but even if there was, since the window themes dont match I don't think I could just specify some static offsets to use.

Is there any way to do this using getUserMedia? Or is there a better option, perhaps FFMPEG? I was hoping to use as little external "tools" as possible, but if thats my only option then oh well :)

Heres the Electron snippet:

const { desktopCapturer } = require('electron')

desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
  for (const source of sources) {
    if (source.name === 'My Window Name') {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: {
            mandatory: {
              chromeMediaSource: 'desktop',
              chromeMediaSourceId: source.id,
              minWidth: 800,
              maxWidth: 800,
              minHeight: 400,
              maxHeight: 400
            }
          }
        })
        handleStream(stream)
      } catch (e) {
        handleError(e)
      }
      return
    }
  }
})

function handleStream (stream) {
  const video = document.querySelector('video')
  video.srcObject = stream
  video.onloadedmetadata = (e) => video.play()
}

Heres some pictures of what I mean by window themes not matching:

The actual window on my desktop: actual

The window as mirrored in my Electron app: mirror

0 Answers
Related