How to Record Your Screen in the Browser (No Software Needed)

Quick scenario: your coworker finds a weird bug and asks you to record it. Or you need to make a 30-second tutorial showing someone how to use a feature. In the old days, you would download OBS, spend 10 minutes configuring it, realize the audio is not working, troubleshoot that, and by then you have forgotten what you were trying to record.

Here is the modern alternative: just do it right in your browser. No software to install, no extensions to add, no account to create. Your browser already has a screen recording API built in. Let me show you how it works.

What Your Browser Can Capture

When you start a screen recording, the browser gives you three choices through its native permission dialog:

• Entire screen: Everything on one monitor — all windows, taskbar, desktop wallpaper, the works.
• Application window: Just one specific window (VS Code, Figma, etc.). Other windows are not captured even if they overlap.
• Browser tab: Just the contents of one browser tab. Perfect for web app demos.

The Two APIs That Make It Work

1. getDisplayMedia (Start Capturing)

This API prompts the user to pick what to share and returns a video stream:

async function startCapture() {
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: {
      width: { ideal: 1920 },
      height: { ideal: 1080 },
      frameRate: { ideal: 30 }
    },
    audio: true  // request tab/system audio
  });
  return stream;
}

The audio: true option captures tab audio (like a YouTube video playing). System-wide audio depends on your OS — macOS does not support it through the browser, unfortunately.

2. MediaRecorder (Save It)

Once you have the video stream, MediaRecorder turns it into a downloadable file:

function recordStream(stream) {
  const chunks = [];
  const recorder = new MediaRecorder(stream, {
    mimeType: 'video/webm;codecs=vp9'
  });

  recorder.ondataavailable = (e) => {
    if (e.data.size > 0) chunks.push(e.data);
  };

  recorder.onstop = () => {
    const blob = new Blob(chunks, { type: 'video/webm' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'recording.webm';
    a.click();
    URL.revokeObjectURL(url);
  };

  recorder.start(1000); // 1-second chunks
  return recorder;
}

A Complete Working Example

Here is a minimal but fully functional screen recorder in about 50 lines of JavaScript. This is essentially what our tool does under the hood:

let mediaRecorder;
let recordedChunks = [];

document.getElementById('start').addEventListener('click', async () => {
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: { frameRate: { ideal: 30 } },
    audio: true
  });

  recordedChunks = [];
  mediaRecorder = new MediaRecorder(stream, {
    mimeType: getSupportedMimeType()
  });

  mediaRecorder.ondataavailable = (e) => {
    if (e.data.size > 0) recordedChunks.push(e.data);
  };

  mediaRecorder.onstop = () => {
    const blob = new Blob(recordedChunks, { type: mediaRecorder.mimeType });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `recording-${Date.now()}.webm`;
    a.click();
  };

  // Auto-stop when user clicks browser's "Stop sharing" button
  stream.getVideoTracks()[0].onended = () => {
    if (mediaRecorder.state !== 'inactive') mediaRecorder.stop();
  };

  mediaRecorder.start(1000);
});

document.getElementById('stop').addEventListener('click', () => {
  mediaRecorder.stop();
  mediaRecorder.stream.getTracks().forEach(t => t.stop());
});

function getSupportedMimeType() {
  const types = [
    'video/webm;codecs=vp9,opus',
    'video/webm;codecs=vp8,opus',
    'video/webm',
    'video/mp4'
  ];
  return types.find(t => MediaRecorder.isTypeSupported(t)) || '';
}

Adding Microphone Audio (Voiceovers)

Want to narrate while recording? You need to merge the screen stream with a microphone stream:

async function getScreenWithMicrophone() {
  const screenStream = await navigator.mediaDevices.getDisplayMedia({
    video: true, audio: true
  });

  const micStream = await navigator.mediaDevices.getUserMedia({
    audio: { echoCancellation: true, noiseSuppression: true }
  });

  // Merge audio tracks
  const audioContext = new AudioContext();
  const destination = audioContext.createMediaStreamDestination();

  if (screenStream.getAudioTracks().length > 0) {
    const systemSource = audioContext.createMediaStreamSource(screenStream);
    systemSource.connect(destination);
  }

  const micSource = audioContext.createMediaStreamSource(micStream);
  micSource.connect(destination);

  return new MediaStream([
    ...screenStream.getVideoTracks(),
    ...destination.stream.getAudioTracks()
  ]);
}

Format Support Across Browsers

Need MP4 for social media or PowerPoint? Record as WebM first, then convert with FFmpeg or an online converter.

Tips for Better Recordings

• 30 fps is plenty. 60 fps doubles file size and is only worth it for fast-moving content.
• Record at native resolution for maximum sharpness. You can always downscale later.
• Close heavy tabs. Screen recording is CPU-intensive. Fewer tabs = smoother recording.
• Keep it short. A 1080p WebM recording is roughly 100-200 MB per minute. Record what you need and trim the rest.
• Use 1-second chunks in recorder.start(1000) for smoother memory usage on long recordings.

Common Use Cases

• Bug reports: Record the steps to reproduce. A 10-second video beats a 500-word description every time.
• Quick tutorials: Show a colleague how something works without scheduling a meeting.
• Presentations: Record a web app demo to embed in slides.
• User testing: Capture how people interact with your product (with their permission, of course).
• Content creation: Record browser-based content for YouTube or social media.

Browser-based screen recording has come a long way. For quick demos, bug reports, and tutorials, it completely eliminates the need for separate software. The API is simple, the quality is solid, and — best of all — everything stays right on your machine.