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.

Источник