Screen Capture API, explained
A documentation walkthrough of the MDN guide to the Screen Capture API: what getDisplayMedia returns, why the browser owns the picker, the async snippet to copy, and how to treat constraints.
- The brief
- “Walk through the MDN guide and explain how getDisplayMedia works.”
- Recorded
- MDN Web Docs
- Length
- 1:16
Made by SayScreen from the brief above. Nothing was edited afterwards. Download the mp4.
What the voice says
The narration, written by the app after reading the page. Each line is one beat of the video; the camera and pointer follow it.
- 01
By the end of this you'll know exactly which call starts a screen recording in the browser, and what you can tune about it.
- 02
This is MDN's guide to the Screen Capture API. It's the piece that lets a page record a screen, a window, or a single tab, with the user's permission.
- 03
Everything here funnels into one method. Capturing screen contents explains that getDisplayMedia hands you back a MediaStream, same shape as a webcam stream.
- 04
The important bit is that the browser owns the picker. You can't silently grab a screen, the user chooses the surface every time.
- 05
Next up, the async await version. This is the snippet you'll actually copy into your code.
- 06
Note it's wrapped in try catch. If someone cancels the picker, that rejects, and unhandled it looks like your feature just broke.
- 07
Now the part worth reading twice. Options and constraints covers the object you pass into that call.
- 08
This is where you ask for a specific display surface, cap the frame rate, or hint at resolution. They're requests, not guarantees.
- 09
The browser can quietly hand you a different resolution than the one you asked for, so always read back what you actually got with getSettings before you size your recorder or your video element.
- 10
That's the core of it. One call, a permission prompt you don't control, and constraints you treat as suggestions.
