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:

Feature	What it does
Cursor motion + click effects	Ring, star, or glow on every click with optional sound
Keyboard shortcut badges	Shows Ctrl+K, Cmd+S, etc. as video overlays — normal typing is not recorded
Live zoom	Hold left click to zoom into a point, release to return
On-screen annotation	Pen, highlight, circle, rectangle, arrow — the tool panel itself is not recorded
Webcam presenter layer	Position your webcam in any corner, move it during recording with Ctrl+Alt+1/2/3/4
Automatic subtitles	Local Whisper-powered transcription, download SRT or burn into video
MP4 / GIF / WebM export	One recording, multiple output formats

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.