Screen Recorder Studio

Record your screen from inside Visual Studio Code, or grab a quick screenshot. Save locally as MP4 / PNG, capture microphone and system audio, annotate while recording — no cloud service, account, or sign-up.

Free. Local. No sign-up. No cloud. Record. Snip. Annotate. Ship.

Windows 10 v2004+ unlocks the native red-border overlay, ZoomIt annotation, and screenshots; on macOS / Linux recording still works through the browser (the Windows-native overlays silently no-op). Browsers older than the versions above save as WebM — which plays in every modern browser, VLC, and QuickTime 10.7+.

▶ Watch on YouTube

@LynxDIScreenRecorder

Features

• Start from VS Code: install the extension, open the Screen Recorder Studio icon in the activity bar, and click Open recording control panel to launch the recorder in your browser.
• One-keystroke recording: the Start recording button is auto-focused on page load — press Enter, pick a source, you're rolling.
• Screen, window, or tab capture: choose an entire screen, a single window, or a Chrome tab from the browser's screen picker. A 3-2-1 countdown plays, then recording begins.
• MIC card doubles as the mic toggle: a single click on the MIC card in the header turns the microphone on or off. The card shows MIC ON (green) or MIC OFF (muted) at a glance, with live audio levels animating when on.
• Always-visible audio meters in the header: System and Mic meter cards live next to the Start button — always rendered so you can see both channels and which are live, with peak-dB readouts that flag clipping before it ruins a take.
• Audio visualizers: choose bars, wave, mirror, dots, or ring (the picker lives in the Settings drawer). Selection persists across reloads.
• Slide-out drawers: a thin icon rail on the left edge of the page opens Settings (capture / audio / output) or Hotkeys (the full annotation cheat sheet with color-coded badges and shape icons) on demand. State remembers across sessions; Esc closes.
• Recording countdown and red border: a 3-2-1 countdown gives you a moment to get ready, then a pulsing red border marks the captured monitor while recording.
• Click effects: left, right, and middle clicks pulse in different colors so viewers can see exactly when and where you clicked.
• Built-in annotation on Windows: ZoomIt-style hotkeys let you zoom, draw, highlight, type, erase, and undo during the recording without a separate app. The on-page Hotkeys drawer reads with shape icons and color-coded R G B Y O P badges so the legend doesn't compete with the recording.
• Local auto-save: clips save to your Videos folder by default, or to the folder you configure in VS Code settings.
• Screenshots — region or per-monitor full-screen: a Screenshot section in the sidebar gives you a Region drag-rectangle button plus one button per attached monitor (auto-detected: Display 1, Display 2, …, plus All monitors for the full virtual desktop on multi-monitor setups). PNGs land in ~/Pictures/Screenshots/ and show up in the same recordings manager alongside videos. Windows-only.
• Recordings manager: browse every saved clip and screenshot in a searchable VS Code editor tab with type / filename / path / size / duration / date. Play, reveal, delete, or clear the list from one place.
• Export to animated GIF: turn any recorded video into a shareable GIF straight from the recordings manager — each video row has a GIF button with an inline progress bar. The GIF saves next to the source video and joins the list automatically. By default it matches the recording's native resolution and frame rate for the sharpest result; resolution, frame rate, and color quality are all configurable in settings. GIF export is the only feature that needs FFmpeg — recording and screenshots work without it. If FFmpeg isn't found, the sidebar and recordings manager show a warning banner with a one-click installer, install commands, and a Re-check button. If FFmpeg isn't on your PATH (e.g. a portable install), point the screenRecorder.ffmpegPath setting at the executable.

Commands

• Screen Recorder: New Recording: opens the recording control panel in your default browser.
• Screen Recorder: Take Screenshot - Region: drag a rectangle to capture; saves the PNG to ~/Pictures/Screenshots/.
• Screen Recorder: Take Screenshot - Full screen: captures a full monitor (the one your cursor is on, unless the sidebar's per-monitor buttons are used). Quick-pick appears for multi-monitor setups when invoked via the Command Palette.
• Screen Recorder: Manage Recordings: opens the recordings manager in a full VS Code editor tab.
• Screen Recorder: Check / Install FFmpeg: re-detects FFmpeg (picking up a just-finished install without a restart) and reports where it was found, or offers to install it. FFmpeg is only needed for GIF export.

Recording Flow

1. Open the Screen Recorder Studio view from the VS Code activity bar.
2. Click Open recording control panel — the recorder launches in your default browser.
3. (Optional) Click the ⚙ Settings icon on the left edge to adjust resolution, frame rate, bitrate, or pick a microphone. Defaults (1080p / 30 fps / 8 Mb/s) fit most cases.
4. Click the MIC card in the header to turn the mic on. Speak briefly to confirm the meter animates — verifying audio before recording is much faster than discovering a dead mic mid-take.
5. Press Enter (or click Start recording in the header). The browser's source picker opens — choose an entire screen, a window, or a tab. If you want playback audio, enable Share system audio in the picker (Tab and Entire Screen modes only).
6. A 3-2-1 countdown plays, then recording begins. A pulsing red border marks the captured monitor.
7. On Windows, mid-recording you can press Ctrl+1 to zoom or Ctrl+2 to draw — see the Windows Annotation Hotkeys section below. The ⌨ Hotkeys drawer on the recording page shows the full reference.
8. Click Stop recording when finished. The clip auto-saves locally and appears in the recordings manager.

Screenshot Flow

The sidebar's Screenshot section auto-detects every attached display and renders one button per monitor.

1. Open the Screen Recorder Studio view from the VS Code activity bar.
2. Click Region to drag a rectangle, or pick a specific display button (Display 1, Display 2, …, All monitors).
3. Region mode dims the screen, drag to select, release to capture. Esc cancels at any point.
4. The PNG saves to ~/Pictures/Screenshots/screen-shot-<timestamp>.png (configurable via screenRecorder.snip.autoSaveDir).
5. The new image appears in the recordings manager with a 🖼 Image type tag — clicking the filename opens it in your OS default image viewer.

Screenshots are Windows-only on this build (the underlying WinForms overlay relies on Win32 APIs). macOS / Linux silently no-op the same way the live annotator does.

Playing back recordings

Recordings save as MP4 (H.264 / AAC) on every modern browser. The file plays with full seek in:

• The extension's in-page preview (after a recording stops, the player below the page lets you scrub the just-recorded clip).
• Any browser (Chrome, Edge, Firefox, Safari).
• VLC — recommended for desktop playback; handles every variant of MP4 / WebM the recorder produces.
• The Windows 11 Media Player app (the new one).
• QuickTime 10.7+, and every NLE editor (DaVinci Resolve, Premiere, Final Cut, ScreenFlow, etc.).

Classic Windows Media Player on Windows 10 can play recordings but its seek bar may misbehave (the file format browsers produce is a streaming variant WMP doesn't fully understand). Open the recording in VLC or any browser tab for working seek.

Windows Annotation Hotkeys

The ZoomIt-style annotator is available on Windows. Quick reference below; the recording page's ⌨ Hotkeys drawer shows the same list with shape icons next to each action and color-coded R / G / B / Y / O / P badges that match the pen colors.

Mode entry

• Ctrl+1: zoom around the cursor.
• Ctrl+2: enter draw mode.
• Esc: exit current mode.

Zoom

• wheel · ↑ / ↓: zoom in / out.
• mouse · Shift+arrows: pan.
• left-click: draw on zoom.
• right-click: back to zoom-only.

Draw

• left-drag: freehand stroke.
• right-click: cancel current stroke.
• hold Shift while dragging: straight line.
• hold Ctrl while dragging: rectangle.
• hold Tab while dragging: ellipse.
• hold Ctrl+Shift while dragging: arrow.
• Ctrl+wheel · ↑ / ↓: pen size.
• Ctrl+Z: undo.
• E: erase all annotations.

Color

• R / G / B: red / green / blue pen.
• Y / O / P: yellow / orange / pink pen.
• Shift + color key: translucent highlight.

Text

• T: type text (left aligned).
• Shift+T: type text (right aligned).
• click · Enter: commit.
• Bksp · Esc: backspace / wipe / exit.
• Ctrl+wheel: font size.

If Ctrl+1 or Ctrl+2 are already taken, the extension can fall back to Ctrl+Alt+1 and Ctrl+Alt+2.

Settings

Open VS Code's Settings and search for Screen Recorder. Every setting listed here is a durable default — most also have an in-page control on the recording surface that overrides them for the current session.

Capture

• Auto-save folder — where recordings drop when "Save automatically" is on. Empty defaults to your Videos folder.
• Mix in microphone — start with the MIC card already on (skipping the click-to-enable step).
• Resolution — Native, 720p, 1080p (default), or 1440p. The browser downscales the source if it's higher; never upscales.
• Frame rate — 24, 30 (default), or 60 fps.
• Bitrate — 1 to 25 Mb/s. Default is 8 Mb/s, which matches YouTube's recommended 1080p / 30 fps upload bitrate.
• Hide overlay from recording — keeps the red border visible on your screen but hidden from the recorded video. Windows 10 v2004+.
• Save automatically — skip the Save dialog after each recording.
• Preferred mic — which microphone to pre-select. Easiest way to set: open the Settings drawer on the recording page, pick a mic, and click Save as default.

Appearance

• Theme — Auto (follows your OS), Dark, or Light for the recording page.
• Audio visualizer — Bars, Wave, Mirror, Dots, or Ring (default) for the audio meters.
• Cursor highlight — semi-transparent halo following the cursor during recording, so viewers can see where you're pointing. Hidden automatically during zoom / draw modes (which have their own cursor indicator). Windows-only.

Annotator (Windows-only)

• Fallback hotkeys — use Ctrl+Alt+1 / Ctrl+Alt+2 if the default Ctrl+1 / Ctrl+2 are taken by another app.
• Default pen color — Red, Green, Blue, Yellow, Orange, or Pink.
• Default pen size — 1 to 32 pixels.
• Default font size — 8 to 96 points (used in text-annotation mode).

Screenshot (Windows-only)

• Auto-save folder — where screenshots drop. Empty defaults to ~/Pictures/Screenshots. Independent of the recording folder so screenshots and videos stay separate.
• Format — PNG (lossless, default) or JPEG (smaller file).
• JPEG quality — 60 to 100 (only used when format is JPEG).
• Copy to clipboard — also push the captured image to the system clipboard so you can paste into Slack / Figma / docs immediately.
• Magnifier — show a 9x pixel-loupe at the cursor during region selection for pixel-perfect drag bounds.

Privacy

The extension makes zero automated outbound network calls — everything it does runs locally on your machine. There's no telemetry, no analytics, no update pings, no cloud, no account, no sign-up.

Recordings stay on your disk. The extension never uploads them to any service and never makes service calls to process your video.

The single external URL referenced anywhere in the codebase is https://www.lynxdi.com/, which only opens when you click the "Built by Lynx Data Insight" watermark in the corner of the recording page (or the "More from Lynx DI" footer link in the sidebar) — at which point your browser handles the navigation, not the extension.

Under the hood: VS Code's built-in webview can't access screen-capture APIs, so the extension runs a small loopback HTTP server (127.0.0.1 only, no LAN exposure) and opens the recording page in your default browser. Every request is gated by a per-session 32-byte token with constant-time comparison; filenames are sanitized against path traversal and Windows reserved names; auto-save folders are validated for traversal and writability before use.

More from Lynx DI

Visit https://www.lynxdi.com/ to see more products.