---
title: "Recording the screen with two browser APIs"
description: "getDisplayMedia grabs a stream of the screen, window, or tab; MediaRecorder captures it to a webm you can play back and download. A full screen recorder, no libraries, nothing uploaded."
date: "2026-05-29"
tags: ["javascript", "web-api", "media", "frontend"]
---

A whole screen recorder fits in about a dozen lines of browser API.
[Bilal Hussain](https://x.com/BilliCodes/status/1839521565194547682) put it
together, and it's worth knowing because it runs entirely on the device, no
server, no upload. Try it (desktop Chromium or Firefox):

## Two APIs, three steps

First, `getDisplayMedia` opens the OS picker and returns a stream of whatever
the user selects:

```ts
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
```

Then `MediaRecorder` records that stream into chunks, and on stop you stitch the
chunks into a Blob:

```ts
const chunks = [];
const rec = new MediaRecorder(stream, { mimeType: "video/webm" });
rec.ondataavailable = (e) => e.data.size && chunks.push(e.data);
rec.onstop = () => {
  const url = URL.createObjectURL(new Blob(chunks, { type: "video/webm" }));
  // play it, or set it as an <a download> href
};
rec.start();
```

Point a `<video>` at the stream while recording for a live preview, swap in the
Blob URL when you stop, and you've got record, playback, and download.

## Two things not to forget

Stop the tracks when you're done, or the browser keeps flashing its "you're
sharing your screen" banner long after you've finished:

```ts
stream.getTracks().forEach((t) => t.stop());
```

And listen for the video track's `ended` event. The user can end the share from
the browser's own controls, not just your stop button, and you want to react to
both the same way.

```ts
stream.getVideoTracks()[0].addEventListener("ended", stopRecording);
```

Support is desktop Chromium and Firefox. Mobile browsers don't expose
`getDisplayMedia`, so feature-detect it and hide the button where it's missing.

Inspired by [Bilal Hussain](https://x.com/BilliCodes/status/1839521565194547682).
Grab the component on the [Screen Recorder](/components/screen-recorder) page.