I built a screen recorder that turns raw captures into finished video stories — no install, no backend

Every product demo I recorded looked the same: a raw screen capture, no cursor highlights, no click effects, no way to show keyboard shortcuts. I would record, then spend time in an editor adding zoom, annotations, and subtitles. For a 2-minute demo.

So I built LivCapture — a browser-based screen recorder that combines cursor effects, click storytelling, keyboard shortcut badges, live zoom, webcam overlay, annotation, and Whisper-powered subtitles into a single recording. No install. No backend for the recording itself. Everything runs in the browser.

The problem

Most online screen recorders do one thing: capture your screen and hand you a WebM file. That is it. The result:

• Viewers cannot see where you are clicking


• Keyboard shortcuts are invisible (press Ctrl+K — but nobody sees it)


• No zoom into important moments


• Subtitles require a separate tool


• Webcam is an afterthought, stuck in one corner

For product demos, support videos, and training content, raw capture is not enough. You need a finished video — one that guides the viewer attention.

What LivCapture does differently

LivCapture does not just record. It layers presentation effects on top of the capture while you record:

The technical stack

Everything runs client-side. No server processes the video.

Browser (Chrome / Edge / Firefox)



getDisplayMedia()  -> screen stream

getUserMedia()     -> webcam + mic

MediaRecorder      -> encode

Whisper (local)    -> subtitles

Canvas overlay     -> effects

FFmpeg.wasm        -> MP4/GIF export

How cursor and click effects work

The core challenge: getDisplayMedia() gives you a raw video stream. There is no metadata about where the cursor is or when clicks happen.

LivCapture solves this with LivCapture Helper — a companion Chrome extension that captures cursor coordinates, click events, and keyboard shortcuts at the OS level with accurate screen mapping. The recorder then overlays effects on a canvas in real-time.

// Simplified: overlay effects on canvas during recording

const canvas = document.createElement("canvas");

const ctx = canvas.getContext("2d");

const videoTrack = screenStream.getVideoTracks()[0];



// Helper extension sends cursor position via postMessage

window.addEventListener("message", (e) => {

  if (e.data.type === "cursor") {

    cursorPos = { x: e.data.x, y: e.data.y };

  }

  if (e.data.type === "click") {

    clickEffects.push({ x: e.data.x, y: e.data.y, time: Date.now() });

  }

  if (e.data.type === "shortcut") {

    shortcutBadges.push({ keys: e.data.keys, time: Date.now() });

  }

});



// Render loop: draw video frame + effects

function renderFrame() {

  ctx.drawImage(videoElement, 0, 0);

  drawClickEffects(ctx, clickEffects);

  drawShortcutBadges(ctx, shortcutBadges);

  drawCursor(ctx, cursorPos);

  requestAnimationFrame(renderFrame);

}

Keyboard shortcut detection

We only show shortcuts that use modifier keys (Ctrl, Cmd, Alt, Shift). Regular typing is never captured — this is a screen recorder, not a keylogger.

document.addEventListener("keydown", (e) => {

  if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) {

    const parts = [];

    if (e.ctrlKey) parts.push("Ctrl");

    if (e.metaKey) parts.push("Cmd");

    if (e.altKey) parts.push("Alt");

    if (e.shiftKey) parts.push("Shift");

    parts.push(e.key.toUpperCase());



    shortcutBadges.push({

      keys: parts.join("+"),

      timestamp: performance.now()

    });

  }

});

Whisper subtitles — locally

Subtitles run through Whisper, but the model runs locally in the browser. No audio leaves the device. After recording stops, the user can:

1. Download the SRT file


2. Burn subtitles directly into the final video


3. Edit the transcript before rendering

Export pipeline

Recording stops

    |

    v

WebM (raw) -> Preview

    |

    v

+--------------+--------------+--------------+

|  MP4 export  |  GIF export  |  WebM export |

|  (FFmpeg     |  (FFmpeg     |  (native     |

|   .wasm)     |   .wasm)     |   MediaRecorder)|

+--------------+--------------+--------------+

The LivCapture Helper extension

The extension is optional but recommended. Without it, LivCapture still records — but cursor effects, click highlights, keyboard badges, and live zoom will not have accurate coordinates.

Without Helper:

- Screen recording

- Webcam overlay

- Microphone + system audio

- Annotation

- Whisper subtitles

- No cursor effects (no coordinate data)

- No click effects (no click detection)

- No keyboard shortcut badges

- No live zoom



With Helper:

- Everything above, plus:

- Accurate cursor motion

- Click effects with sound

- Keyboard shortcut badges

- Long-press zoom during recording

Who is using it

• 
  SaaS teams — product demos and feature walkthroughs


• 
  Support teams — bug reports and workflow recordings


• 
  Educators — training, onboarding, and how-to videos


• 
  LivChart users — turning data analysis into narrated video reports

LivCapture is part of the LivChart ecosystem. LivChart analyzes Excel, CSV, and SQL data with natural language prompts and creates dashboards. LivCapture turns those analyses into videos customers and teams can follow.

What is next

We are working on:

• 
  Google Drive / Dropbox integration — save recordings directly to your cloud storage and share via link


• 
  Embed SDK — a script tag that drops LivCapture recorder into any web app


• 
  Desktop app (Electron) — system-wide recording without browser limitations


• 
  Help desk mode — metadata capture (browser, OS, URL, console logs) for support tickets

Try it

Open livcapture.com, hit Start recording, and pick a recording source. That is it. No signup required for recordings up to 5 minutes.

Install the LivCapture Helper Chrome extension for the full experience — cursor effects, click storytelling, and keyboard shortcut badges.

LivCapture is built by Liv Yazılım, a software and consulting company based in Istanbul. We also build LivChart, an AI-powered data analysis platform.

If you found this interesting, we are live on Product Hunt — we would love your support.