In-Browser Screen Recording: How the Screen Capture API and MediaRecorder Actually Work

Need to record a 60-second software bug demonstration or video tutorial? Until recently, that meant downloading a 200MB desktop application, granting scary administrative kernel permissions, or suffering through predatory free trials that slap an ugly watermark across your video. Today, the native HTML5 Screen Capture API does it directly inside Chrome, Edge, and Firefox with zero downloads.

1. The End of Heavy Screen Capture Software and Watermark Scams

Modern browser runtimes feature hardware-accelerated video capture directly built into the OS display compositor. Through standardized W3C browser APIs, web applications can request secure screen captures at Full HD (1080p) or 4K resolution at 60 FPS, with zero external binaries or system extensions.

2. Behind getDisplayMedia(): Frame Rates, Cursor Tracks & Audio Mixing

Screen recording begins with a single modern browser API invocation:

const displayStream = await navigator.mediaDevices.getDisplayMedia({
  video: {
    frameRate: { ideal: 60, max: 60 },
    displaySurface: "monitor", // 'monitor', 'window', or 'browser'
    cursor: "always",          // Capture system mouse pointer
  },
  audio: true, // Capture system audio
});

When invoked, the operating system renders an interactive dialog allowing the user to select an entire desktop display, a specific application window, or a single browser tab. The web application receives an isolated MediaStream object.

3. Handling the MediaStream: Chunked Blobs, VP8/VP9, and WebM Buffers

Once you have an active MediaStream, the browser's native MediaRecorder engine encodes incoming video and audio tracks in real time:

const mimeType = MediaRecorder.isTypeSupported("video/webm;codecs=vp9,opus")
  ? "video/webm;codecs=vp9,opus"
  : "video/webm";

const recorder = new MediaRecorder(displayStream, { mimeType });
const recordedChunks: Blob[] = [];

recorder.ondataavailable = (event) => {
  if (event.data && event.data.size > 0) {
    recordedChunks.push(event.data);
  }
};

recorder.onstop = () => {
  const completeBlob = new Blob(recordedChunks, { type: mimeType });
  const downloadUrl = URL.createObjectURL(completeBlob);
  // Download video file immediately...
};

recorder.start(1000); // Emit chunk every 1,000 ms

4. Picture-in-Picture: Overlaying Your Camera Stream on Video Canvases

Want a round face-cam webcam overlay in the corner of your screen recording? The browser achieves this without native plugins using an off-screen HTML5 Canvas:

1. Request screen capture via getDisplayMedia().
2. Request microphone and camera access via getUserMedia({ video: true, audio: true }).
3. Create an off-screen canvas (e.g. 1920x1080) and draw the screen video track into the background on every animation frame.
4. Draw a circular clipped sub-path in the bottom-right corner and render the webcam video stream inside it.
5. Capture the composite stream from the canvas via canvas.captureStream(60) and feed it directly into the MediaRecorder!

5. Instant In-Browser Export: Zero Upload Bandwidth, Zero Paywalls

Unlike cloud recording extensions that force you to upload 500MB video recordings to their cloud servers before granting a download link, in-browser recorders save video bytes directly into local RAM. When you click Stop, the file downloads immediately to your computer—safe, private, and instantaneous.