Ever wondered how a website can capture your screen without installing anything? It’s all thanks to a set of powerful browser APIs that have matured significantly in recent years.

Let’s break down the technology behind tools like Easy Screen Capture.

The Key APIs

1. getDisplayMedia() — Screen Capture

This is the star of the show. Introduced as part of the Screen Capture API, getDisplayMedia() prompts the user to select a screen, window, or browser tab to share.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true  // Captures tab/system audio
});

The user always sees a permission dialog — no website can secretly record your screen. This is enforced at the browser level and cannot be bypassed.

What you can capture:

• Entire screen
• Specific application window
• Individual browser tab (with optional audio)

2. getUserMedia() — Webcam & Microphone

This older, well-established API captures input from cameras and microphones:

const webcamStream = await navigator.mediaDevices.getUserMedia({
  video: { width: 320, height: 240, facingMode: 'user' },
  audio: true
});

3. MediaRecorder — Recording the Stream

Once you have media streams, MediaRecorder encodes them into a file:

const recorder = new MediaRecorder(stream, {
  mimeType: 'video/webm;codecs=vp9,opus'
});

recorder.ondataavailable = (event) => {
  chunks.push(event.data);
};

recorder.start(1000); // Collect data every second

Combining Multiple Sources

The real magic happens when you combine these APIs. Here’s the challenge: MediaRecorder takes a single MediaStream, but you might have video from the screen AND the webcam, plus audio from the mic AND the system.

Video Compositing with Canvas

To overlay a webcam feed on top of screen capture, you use an HTML Canvas as a compositor:

1. Draw the screen capture to the canvas each frame
2. Draw the webcam feed as a smaller picture-in-picture overlay
3. Capture the canvas output as a new MediaStream

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Draw both sources
ctx.drawImage(screenVideo, 0, 0, width, height);
ctx.drawImage(webcamVideo, pipX, pipY, pipWidth, pipHeight);

// Capture canvas as stream
const compositeStream = canvas.captureStream(30);

Audio Mixing with AudioContext

For audio, the Web Audio API lets you mix multiple sources:

const audioCtx = new AudioContext();
const destination = audioCtx.createMediaStreamDestination();

// Connect mic
const micSource = audioCtx.createMediaStreamSource(micStream);
micSource.connect(destination);

// Connect system audio
const sysSource = audioCtx.createMediaStreamSource(systemStream);
sysSource.connect(destination);

// destination.stream now contains mixed audio

Browser Support

These APIs are well-supported in modern browsers:

Feature	Chrome	Edge	Firefox	Safari
getDisplayMedia	✅ 72+	✅ 79+	✅ 66+	✅ 13+
getUserMedia	✅ 53+	✅ 12+	✅ 36+	✅ 11+
MediaRecorder	✅ 47+	✅ 79+	✅ 25+	✅ 14.1+
System Audio	✅	✅	❌	❌

System audio capture is currently limited to Chromium-based browsers when sharing a tab.

Security & Privacy

These APIs were designed with privacy as a priority:

• User consent required: Every capture requires explicit user permission
• Visual indicator: Browsers show a persistent indicator when screen sharing is active
• No silent capture: There’s no way to start recording without the user knowing
• Page-level only: Permissions don’t persist across page reloads

This is why client-side screen recorders are inherently more private than alternatives that process video on remote servers.

The Future

Upcoming browser features will make screen recording even better:

• WebCodecs: Lower-level access to video encoding for better performance
• Insertable Streams: Real-time video processing before encoding
• Region Capture: Capture a specific portion of a tab

The web platform continues to close the gap with native applications, making tools like Easy Screen Capture possible without leaving your browser.

Try it yourself →