Record and share the screen from the browser — getDisplayMedia, and why Electron does the picker differently

A standalone companion to my FieldKit PWA series. In part 3 I covered capturing the camera and mic with getUserMedia; this is its sibling — capturing the screen with getDisplayMedia. It didn't belong in a field-notes app, so here it gets its own post — with a working recorder you can drop into any page, and a look at how the same job works in Electron.

The camera's sibling API

If you've used getUserMedia to grab a webcam stream, you already know 90% of screen capture. navigator.mediaDevices.getDisplayMedia() returns a MediaStream exactly like getUserMedia does — it just captures a screen, window, or browser tab instead of a camera. Feed that stream into MediaRecorder (same as part 3) and you have a screen recorder in a few dozen lines. No extension, no native host, no plugin.

Here's the whole capture call:

const stream = await navigator.mediaDevices.getDisplayMedia({