My app records its own tutorials now

说明与用途

使用 headless Chrome、CDP、ElevenLabs 和 ffmpeg 的自动化录制和视频制作工作流，节省手动操作时间。

问题

Creating multiple tutorial videos manually was time‑consuming, error‑prone, and required on‑camera presence.

结果

Eight concise, captioned tutorial videos produced automatically, saving hours of manual effort and ensuring consistency across episodes.

工作流

• 1. Launch headless Chrome pointing at localhost app
• 2. Execute a script that clicks real UI buttons
• 3. Capture each frame via Chrome DevTools Protocol
• 4. Draw a fake cursor element that flashes on clicks
• 5. Send a spoken script to ElevenLabs clone and receive audio + word timings
• 6. Map spoken terms to written tokens (e.g., "localhost three thousand" → "localhost:3000")
• 7. Generate captions that sync to word timings
• 8. Use ffmpeg to stitch frames and audio into MP4
• 9. Add a Digital Craft Workshop card overlay
• 10. Reset any changed configuration after recording

证据

I built a thing that records the app for me.

来源

Chrome films its own frames over the debugging protocol, one image per repaint, lossless, and ffmpeg stitches them into a 1080p video afterward.

来源

ElevenLabs with a clone of mine. When it returns the audio it also hands back the timing of every word.

来源