getDisplayMedia vs. getUserMedia

I’ve been messing around with the browser API navigator.mediaDevices.getDisplayMedia(). The question I hoped to answer: can I capture the content in some computer display surface and push it through the same sorts of process that I use with .getUserMedia()?

I tested on Google Chrome 84.

Answer: yes.

It has some quirks.

  1. It doesn’t need, and indeed rejects, elaborate constraints.  { video: true } does the trick.
  2. It only works in a context where it was invoked from a user action.
  3. It presents a nice permission dialog with three tabs: screen, window, and Chrome tab. The user chooses one to send.
  4. When things are changing on the chosen screen, window, or tab, .getDisplayMedia() pushes changes through to its consumers: MediaRecorder and / or a <video> HTML5 element. When things stop changing, it stops pushing things through. Any outbound webm data stream temporarily stops flowing. Even the user’s cursor moving around the window is enough change to keep the data stream flowing.

Leave a Comment