open-kbs/skills-demo-video

Vidéo de démo

Produit une vidéo MP4 Full HD qui présente le site ou l'application en ligne du projet : enregistrements d'écran réels, voix off dans la langue de l'utilisateur, sous-titres incrustés, fond musical et un lien de partage. Tout s'exécute dans le conteneur avec agent-browser, ffmpeg et le proxy IA du projet (facturé aux crédits du projet). Résultat typique : 1 à 3 min, 10 à 20 Mo, environ 1 à 2 heures de travail agent. Tous les fichiers de travail se trouvent dans video/ (build/ et out/ restent hors de git).

Quand l'utiliser

• « Fais une vidéo qui montre comment le système fonctionne », promo, pub, démo client
• Une visite guidée pour une offre, une note de version ou une page d'accueil
• Pas pour les enregistrements que l'utilisateur fait lui-même : dans ce cas, rédigez-lui un script de tournage dans docs/demo/script.md (scène, action, texte à dire) plutôt

Pipeline (chaque étape est reprenable : une réexécution ignore les sorties déjà produites)

Étape	Commande	Sortie
0. Configuration	bash .claude/skills/demo-video/setup.sh	ffmpeg, polices de sous-titres, dossiers video/
1. Script	Écrire video/vo/narrator.json et video/scenes.mjs (démarrer à partir de examples/)	le plan
2. Voix off	node .claude/skills/demo-video/tts.mjs video/vo/narrator.json video/build/vo	s01.wav… + s01.txt (ce qui a été dit)
3. Prises	source .claude/skills/demo-video/rec-lib.sh puis take_start, mark, take_stop	video/build/rec/<prise>.mp4 + .marks
4. Cartes	card_take <nom> "file://$PWD/video/cards/<nom>.html?…" <secondes>	video/build/rec/card-<nom>.mp4
5. Sons	node .claude/skills/demo-video/sfx.mjs	video/build/sfx/chime.wav, click.wav
6. Montage	node .claude/skills/demo-video/compose.mjs video/scenes.mjs	video/out/<nom>.mp4 (+ musique si aucune n'est fournie)
7. QA	node .claude/skills/demo-video/listen.mjs video/out/<nom>.mp4 "<question>" et captures d'écran	corrections, puis étape 6 à nouveau
8. Publication	node .claude/skills/demo-video/publish.mjs video/out/<nom>.mp4 --cover 16	clé dans le stockage du projet + image de couverture JPG

(.agents/skills/demo-video/ s'il a été installé avec npx skills add.)

Comment bien faire

D'abord le script. 10 à 15 lignes de narrateur, une idée par ligne, 8 à 15 mots, dans la langue de l'utilisateur. Que des faits : ne jamais revendiquer des chiffres, des clients ou des récompenses que vous ne pouvez pas vérifier dans les propres données du projet. Placez les noms de marque et les acronymes dans pronounce pour qu'ils soient correctement prononcés. Chaque ligne correspond à une scène.

Voix. Le proxy n'a pas de modèle TTS ; tts.mjs utilise le modèle Live (gemini-3.8-live) qui lit chaque ligne textuellement, conserve la meilleure des 3 tentatives en comparant la propre transcription du modèle avec le script (80 % de correspondance des mots) et écrit un fichier WAV par ligne. Voix : Kore, Charon, Puck, Fenrir, Aoede. Une voix pour le narrateur ; une voix différente pour un rôle de « client ». Lisez les fichiers s*.txt après l'exécution et régénérez toute ligne qui diffère (rm son wav et relancez).

Prises. Partez d'un état vierge : nouveau contexte de navigateur, panier vide, aucun brouillon de formulaire sauvegardé (agent-browser eval 'sessionStorage.clear()' et de même pour les clés localStorage que l'application utilise), connecté avant l'enregistrement pour qu'aucun mot de passe ne soit tapé devant la caméra. Tapez avec typeslow, appelez mark <label> avant chaque clic sur lequel le montage coupera, attendez les réponses IA avec wait_gone "<texte de recherche>", ne faites jamais défiler l'élément que vous montrez hors écran. Cliquez par référence d'élément (@e12 depuis snapshot), pas par le texte de l'étiquette. take_start définit la fenêtre d'affichage à 1600×900 (la valeur par défaut est 1280×720, trop petite pour du 1080p) ; une prise par scène. Lorsque le produit a un agent vocal, enregistrez un véritable échange via sa propre API (examples/voice-exchange.mjs) et jouez-le sur une carte plutôt que de le simuler.

Cartes. examples/cards/ contient une intro (numéros animés, logo, pastilles), une carte d'appel vocal et une outro. Copiez dans video/cards/, changez les couleurs, le logo et les textes pour la marque. Passez les timings dans l'URL (?t1=<s>) pour que les animations tombent sur la voix.

Montage (scenes.mjs). Chaque scène est constituée de morceaux d'une prise [prise, entrée, sortie, vitesse, zoom?] plus l'audio ['vo:s01', à]. Accélérez l'attente 2 à 5×, zoomez zoom sur les panneaux avec du petit texte, chapter puce à chaque nouvelle section, cap: 'left' lorsque les sous-titres en bas couvriraient l'interface utilisateur affichée, sfx carillon sur les moments de succès (ajouté au panier, commande passée). Le montage est mis en cache par scène ; seules les scènes modifiées sont ré-rendues.

Audio. Le fond musical est synthétisé par compose.mjs (sans risque de licence) et réduit sous la voix ; définissez music: 'path/to/track.mp3' dans scenes.mjs pour la propre piste de l'utilisateur. La sortie est normalisée à −16 LUFS.

QA avant livraison. listen.mjs envoie le mix à Gemini : demandez des informations sur la diction, les mots mal prononcés, l'équilibre musique-voix, les problèmes et les longs silences. Ensuite, capturez une image par scène en pleine résolution (ffmpeg -ss <t> -i out.mp4 -frames:v 1 f.png) et examinez-la : sous-titres qui chevauchent l'interface utilisateur, texte coupé, mauvais état à l'écran. Corrigez, relancez l'étape 6.

Livrer. Supprimez les commandes/données de test créées par les prises, exécutez agent-browser close --all, commitez les outils et le script video/ (pas build/, out/). Donnez le lien, le chemin local, une courte liste de ce que montre la vidéo, et tout ce que vous avez corrigé dans le produit pendant le tournage (enregistrer un flux de bout en bout trouve généralement de vrais bugs ; corrigez-les, ils affectent de vrais utilisateurs).

Publication

publish.mjs téléverse vers le stockage du projet avec le bon type de contenu (le téléversement de stockage standard sert la vidéo en tant que téléchargement) et affiche l'URL publique : avec "storage" : { "cloudfront" : "media" } dans openkbs.json, le fichier est à <site>/media/<key> une fois que openkbs deploy a configuré ce chemin. Sans stockage sur le CDN, placez le fichier sous site/ et déployez, ou partagez un openkbs storage download. --cover <secondes> téléverse également une image JPG comme vignette.

Prérequis

• Conteneur Studio : ffmpeg (l'installation le met en place), agent-browser, JWT du proxy dans ~/.openkbs/projectJWT. En dehors de Studio, définissez OPENKBS_API_KEY.
• Les polices pour les sous-titres sont téléchargées par setup.sh dans video/build/fonts (Golos Text, Fira Sans Extra Condensed : Latin + Cyrillique, OFL).