skills.rest
decniner
decninerCOMMUNITY
Explore all skills by this author →
GitHub

screenshot-demo-video

Create narrated slideshow demo videos from browser screenshots using ffmpeg and TTS.

Updated Jul 3, 2026
Search Tags:#screenshots#ffmpeg#tts#voiceover#slideshow#demo video#xfade
One-click install
npx skills add https://github.com/decniner/HermesP1 --skill screenshot-demo-video-decniner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screenshot-demo-video
Source: https://github.com/decniner/HermesP1/tree/main/.hermes-backup/skills/media/screenshot-demo-video
Command: npx skills add https://github.com/decniner/HermesP1 --skill screenshot-demo-video-decniner

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When real-time screen recording is unavailable (e.g., the browser runs in a cloud environment), you cannot capture live video of a web app demo. This Skill assembles browser screenshots into a polished narrated video using ffmpeg slideshows with crossfade transitions and TTS voiceover. ## Core Features & Use Cases - Screenshot-to-Video Pipeline: Capture app states with browser_vision, convert stills to MP4 clips, and concatenate them with xfade crossfade transitions. - TTS Narration: Generate voiceover audio with text_to_speech and merge it with the video track using ffmpeg. - Deployment Guidance: Deploy HTML artifacts to public URLs via GitHub and htmlpreview.github.io so the cloud browser can access them. - Use Case: You built an interactive HTML game and need a 15-second narrated demo video for sharing on Discord, but screen recording tools are unavailable in your environment. ## Quick Start Create a narrated demo video of my deployed web app by capturing screenshots of each feature and stitching them together with ffmpeg and a TTS voiceover.

Frequently Asked Questions about screenshot-demo-video

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a demo video from screenshots with ffmpeg?▼

Convert each screenshot to a short MP4 clip using ffmpeg with -loop 1 and a duration, then concatenate the clips with the xfade filter for crossfade transitions. Finally merge a TTS narration audio track with the video using -shortest.

How to record a web app demo when screen recording is unavailable?▼

Capture still screenshots of each app state with a browser vision tool, then assemble them into a video slideshow with ffmpeg. Add crossfade transitions between scenes and generate a TTS voiceover to narrate each feature.

Why does ffmpeg fail with height not divisible by 2?▼

The h.264 codec requires both width and height to be even numbers. An odd dimension like 625 causes silent failure, so add a scale or pad filter such as scale=1264:626 to force even dimensions before encoding.

Can a cloud browser access localhost for capturing screenshots?▼

No, cloud browsers cannot access localhost, file://, or 127.0.0.1 addresses. Deploy the HTML artifact to a public URL first, for example via GitHub and htmlpreview.github.io, before navigating and capturing screenshots.

Can I upload the video directly to YouTube with this workflow?▼

Direct YouTube upload is not supported because it requires OAuth 2.0 interactive authentication. Instead, provide the user with the MP4 file plus pre-written title and description for manual upload at youtube.com/upload.

Related Skills

Explore More Content & Communication Skills→
gptmegptme
15

artifact-publishing

Publish HTML artifacts to web hosting and validate the public URL.

Official
Advanced
potentialIncpotentialInc

remotion-upload

Upload Remotion-rendered MP4 videos to social media platforms via the Upload Posts API.

Official
Advanced
davetodddavetodd

screenshot-app

Capture web application UI screenshots with Playwright CLI.

Community
Basic
GuitarAlchemistGuitarAlchemist

feature-video

Record browser interactions, convert videos with ffmpeg, and embed them in GitHub pull request descriptions.

Official
Intermediate