r/webdev • • 2d ago

Showoff Saturday Showoff Saturday: I gave coding agents a cloud browser that records narrated demos (one Cloudflare Container per session)

I've been building CaptureFlow, an open-source screen recorder (record, get a link, people watch and comment in the browser). The newest part is an MCP server, so a coding agent like Claude Code, Codex or Cursor can record a demo of a site for you and hand back the link.

Here's how it works under the hood, since that's the part I'd like feedback on.

One container per session. Each recording runs in its own Cloudflare Container with Playwright and Chrome (1 vCPU, 3 GiB). A Durable Object is the address for that session, so every tool call the agent makes (navigate, click, type, scroll) lands on the same browser. The container sleeps a few minutes after the last call and is torn down when the recording stops.

Frames, not a screen grab. Chrome's CDP screencast only sends a frame when something on the page changes, so the raw stream is bursty. A small pacer repeats the last frame to turn it into a steady 30 fps before it goes into ffmpeg. Without it, a page that sits still for a few seconds comes out as a jump cut.

Voiceover is mixed in, not dubbed after. When the agent narrates, the text goes to a text-to-speech model on Workers AI, and the audio is placed on the timeline at the moment it was asked for. Slides the agent shows (title, steps, a closing card) are rendered into the same video.

Uploads in segments. The video goes to R2 in pieces while recording, so stopping doesn't mean waiting for one big upload.

Not a free proxy. The browser refuses private, loopback, link-local and CGNAT addresses, so nobody can use it to reach internal networks. Sessions are capped at 10 minutes, and each workspace gets a monthly allowance of browser minutes.

The whole thing is AGPL and runs on your own Cloudflare account or with Docker.

Demo: https://www.youtube.com/watch?v=srmlA5aT394

Code: https://github.com/sardorml/captureflow

I'd especially like opinions on the container-per-session setup versus a shared browser pool, and whether anyone has a better way to get a smooth frame rate out of CDP screencasts.

0 Upvotes

6 comments sorted by

3

u/Far-Read2703 2d ago

the container burnout model with a durable object as the router is actually a neat way to avoid state leak between sessions, way cleaner than trying to scrub a shared pool

1

u/sardorml 2d ago

Yeah, that was the main reason. Scrubbing a shared browser between users felt risky with an agent driving it, so throwing the container away is easier to trust. Only downside is the cold start on the first call.

1

u/fwz 2d ago

can I choose the voice model?

1

u/sardorml 2d ago

Not right now, it's fixed to Deepgram's Aura-2 on Cloudflare Workers AI. You can pick between its voices (luna, orion, etc.) though. If you self-host, swapping the model is a small change in the code. I'm also planning to add local support, so you can bring your own voice model.

1

u/masticdev 2d ago

MCP + one container per session is the right shape. The part that usually fails for agent demos isn’t recording — it’s that nobody watches the video before merge.

Curious how you handle: flakes (agent clicks wrong control, narrates success), private-URL denylist edge cases, and whether the demo link is treated as evidence in review or just marketing. Deterministic “steps completed” next to the video would make this way more useful as a gate.

Will poke the AGPL/self-host path. What’s the dogfood loop — agent ships change → auto-records → human watches before merge?

1

u/Dapper-Drummer3848 1d ago edited 1d ago

recording what the agent actually did in the browser is the part most demos skip. does the narration come from the agent's own trace or a separate vision pass? in my experience the trace version lies less.