Propose a change
Name Last commit message Last updated
adom-video Migrate asset from Helium wiki 1mo ago
final-v3.webm Migrate asset from Helium wiki 1mo ago
final.webm Migrate asset from Helium wiki 1mo ago
hero-v3.png Migrate asset from Helium wiki 1mo ago
hero.png Migrate asset from Helium wiki 1mo ago
install.sh Add adompkg installer files 1mo ago
package.json Add adompkg installer files 1mo ago
page.json Remove internal identifiers from page.json 11d ago
README.md Initial commit: app/adom-video 1mo ago
SKILL.md Add adompkg installer files 1mo ago
uninstall.sh Add adompkg installer files 1mo ago

adom-video

Hydrogen-webview video player. Plays .webm / .mp4 from disk with frame-accurate scrub, A-B loop, pixel zoom up to 8×, gallery thumbnails, and frame-extract / trim.

CLI- and HTTP-drivable so Claude can seek, pause, extract-frame, and trim without simulating clicks.

Demo

Player + native controls + custom toolbar

Watch the 6-section feature tour: final.webm

The tour covers:

  1. Player + native controls + custom toolbar — a clip plays with the full HTML5 controls bar (timeline, volume, speed menu, fullscreen, picture-in-picture) AND the custom toolbar for everything the native bar doesn't give you.
  2. Folder gallery — every clip auto-probed for codec, resolution, frame count, recorded-at time parsed from the filename.
  3. Scrub + A-B loop — frame-step with , ., set markers with I O, instant loop fires.
  4. Pixel zoom + pan — zoom up to 8× with pixel-perfect rendering, drag to pan.
  5. Extract frame → reveal in VS Code — files land next to the source clip in extracts/ and auto-reveal in the VS Code Explorer.
  6. CLI + HTTP — every action exposed as a CLI subcommand and an HTTP endpoint.

Why this exists

adom-desktop produces screen and tab recordings as WebM. Until this tool, every demo round-tripped through the desktop ("send the file home, open it manually, scrub manually, screenshot a frame manually"). adom-video play <file> opens a tab next to VS Code, plays in a loop, and exposes every action as a CLI/HTTP call.

Quick use

adom-video play /tmp/recording.webm        # one-clip player
adom-video play /tmp/recordings/           # gallery for the directory
adom-video gallery /tmp/recordings/        # explicit gallery view
adom-video probe /tmp/recording.webm       # ffprobe → JSON
adom-video extract-frame v.webm 3.5 -o frame.png
adom-video trim v.webm 1.0 5.0 -o clip.webm

Extracts and trims land in <clip-folder>/extracts/<stem>-frame-<MMmSSsMMM>.png and <clip-folder>/trims/<stem>-trim-<in>-<out>.<ext> — sortable filenames, sane location, auto-revealed in the VS Code Explorer sidebar (sidebar is forced visible too).

Drive an open player from outside (port auto-discovered via /tmp/adom-video.port)

adom-video seek 12.5      # jump to t=12.5s in the open tab
adom-video pause
adom-video resume
adom-video set-rate 0.5   # half speed
adom-video status         # current state JSON
adom-video stop           # close tab + shut down server

HTTP API

Method · Path Purpose
GET /api/library List clips with metadata + filename hints (rec-desktop-*, rec-tab-*)
GET /api/state Current player state (file, currentTime, paused, rate, in/out points, zoom)
POST /api/seek {t} Jump to time
POST /api/pause {} · POST /api/resume {}
POST /api/rate {rate} 0.25 → 4.0
POST /api/zoom {zoom} 1.0 → 8.0
POST /api/loop {t_in, t_out} Set A-B loop range
POST /api/load {path} Load a different clip into the open player
POST /api/extract-frame {path, t, out?} Write PNG, auto-reveal, return path
POST /api/trim {path, t_in, t_out, output?} Stream-copy webm/mp4, auto-reveal
POST /api/reveal {path} Reveal any path in the VS Code Explorer (forces sidebar visible)
GET /api/console Recent JS console output (forwarded from the UI)
GET /api/thumb?path=&t=&w= JPEG thumbnail (cached)

Keyboard shortcuts

Key Action
Space / K Play / pause
J / L Slow down / speed up (0.25× → 4×)
← / → −5s / +5s · Shift = ±1s · Alt = ±0.1s
, / . Previous / next frame (uses fps from probe)
0–9 Jump to 0%, 10% … 90%
I / O Set A / B loop point · Shift+I/O = clear
+ / − Zoom in/out (1× → 8×) · 0 = reset · drag to pan when zoomed
F Fullscreen
M Mute
G Toggle gallery view
? Show shortcut help

Filename hints

Recordings produced by adom-desktop are auto-detected:

  • rec-desktop-<unix-ms>.webm → tagged desktop, recorded-at parsed from filename
  • rec-tab-<session>-<tab>-<unix-ms>.webm → tagged tab

The Inspector panel surfaces this plus codec / dimensions / FPS / frame count / duration / bit rate / file size / encoder / clickable Folder + Path rows that reveal in the VS Code Explorer.

How the FPS is computed

Chrome MediaRecorder writes r_frame_rate=1000/1 and avg_frame_rate=1000/1 as placeholder values — both useless. adom-video probe falls back to ffprobe -count_packets and divides by duration when the reported FPS is implausible (>120 fps). For typical desktop screen recordings this gives the real capture rate (15–30 fps).

Architecture

  • Rust + tiny_http. Single static binary, ~1.6 MB.
  • HTTP byte-range support — required for <video> element seek (the native scrubber works because of this).
  • ffprobe + ffmpeg must be on PATH.
  • Server writes /tmp/adom-video.port so subcommands find a running instance.
  • Always opens on a non-VS-Code Hydrogen pane — never covers Claude Code chat.
  • Container webview URL uses $VSCODE_PROXY_URI substitution (no localhost: baked in).
  • HTML uses <base href="./"> so relative URLs work in the proxied iframe.
  • Reveal-in-VS-Code via adom-vscode reveal + adom-vscode sidebar show (sidebar forced visible so the highlighted entry is in view).

Brand

Adom dark + teal. Familjen Grotesk (headlines), Satoshi (body), JetBrains Mono (timecode + paths). Monochrome white SVG icons. No emoji.

License

AGPL-3.0-or-later.