Communitygithub.com

openvidstudio

Utilisez quand l'utilisateur souhaite une vidéo de démonstration, une vidéo de lancement, une screencast ou une présentation produit pour un projet logiciel, ou dit « faire une vidéo de démo », « enregistrer une démo », « vidéo pour mon repo », « montrer mon projet », ou mentionne openvidstudio. Pilote le serveur MCP openvidstudio pour capturer une application réelle en cours d'exécution et générer une vidéo de démonstration cinématographique. Pas pour éditer des séquences existantes.

Qu'est-ce que openvidstudio ?

openvidstudio est un outil de capture d'écran et de génération de vidéo de démonstration conçu spécifiquement pour créer des vidéos de démonstration produit à partir d'applications logicielles réelles. Contrairement aux approches qui utilisent des animations génériques ou des maquettes, openvidstudio capture directement l'interface utilisateur fonctionnelle du projet, garantissant que chaque image provient du produit réel. Il s'appuie sur le serveur MCP openvidstudio pour orchestrer un pipeline complet : lancement de l'application, planification des séquences, capture d'écran, rédaction de narration, génération de voix off, composition vidéo et rendu final. Le pipeline inclut des étapes de validation (pré-vérification des dépendances, validation des mouvements, contrôle qualité des images) pour garantir un résultat professionnel. openvidstudio prend en charge les applications basées sur Node.js, ffmpeg, Playwright Chromium, et fonctionne comme un skill pour les assistants IA comme Claude Code. Il est particulièrement utile pour les développeurs qui souhaitent créer rapidement des vidéos de démonstration pour des dépôts GitHub, des lancements de produits ou des présentations, sans avoir à maîtriser un logiciel de montage vidéo.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AnayDhawan/openvidstudio/tree/main/.agents/skills/openvidstudio

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait openvidstudio ?

Construisez une vidéo de démonstration à partir de l'application réelle d'un projet. Chaque écran provient du produit réel ; rien n'est généré.

Avant toute chose

Exécutez preflight. Il vérifie node, ffmpeg, Chromium de Playwright, si l'application répond réellement et si un moteur de narration existe. Chaque échec nomme le correctif. Ignorer cette étape signifie qu'une dépendance manquante apparaît après un long rendu.

Si les outils ne sont pas enregistrés, le serveur n'est pas installé. Dirigez l'utilisateur vers cette configuration dans son fichier MCP, puis redémarrez le client :

{ "mcpServers": { "openvidstudio": { "command": "npx", "args": ["-y", "@openvidstudio/mcp-server"] } } }

L'ordre

preflight -> extract_brand -> plan_beats -> [write VO] -> validate_beats -> APPROVAL GATE
  -> write_beats_file -> capture_screenshot -> scaffold_scene -> validate_scenes
  -> [plan_sound_effects] -> generate_narration -> stitch_composition -> contact_sheet
  -> render_video -> qc_extract_frames

1. Collecte

Élaborez-le avant de demander. La demande habituelle est « fais une vidéo de démo de ce projet » et rien d'autre. C'est tout le brief, et c'est suffisant.

Commencez par lire le dépôt plutôt que d'interviewer l'utilisateur :

  • README.md indique ce qu'est le produit et souvent ce qui est important à son sujet
  • les scripts package.json indiquent comment le démarrer, et le script de développement donne généralement le port
  • les routes ou pages indiquent ce qu'il y a à filmer

Ensuite, démarrez l'application vous-même et confirmez qu'elle répond. Ne demandez pas à l'utilisateur une URL qu'il doit rechercher ; trouvez la commande de développement, exécutez-la et vérifiez-la. Ne demandez que si le démarrage nécessite quelque chose que vous ne pouvez pas savoir, comme un fichier .env manquant ou une base de données qui n'est pas active.

Ce qui vaut vraiment la peine d'être demandé, car le dépôt ne peut pas le dire :

  • combien de temps la vidéo doit durer
  • quelles deux ou trois choses elle doit montrer, si le dépôt en a plusieurs
  • à qui elle s'adresse, un visiteur de la page d'accueil ou quelqu'un qui installe déjà

Une question à la fois, et uniquement des questions auxquelles le dépôt ne peut pas répondre. Un mur de six questions au début est le moyen le plus rapide de donner l'impression que c'est du travail. docs/PLANNING.md contient l'arbre de décision complet si un cas n'est pas clair.

Terminez le travail en montrant le résultat : le chemin du fichier mp4, sa durée et une contact_sheet ou quelques images de qc_extract_frames. Un rendu que personne ne regarde n'est pas une vidéo livrée.

1b. Portez la marque du dépôt

extract_brand avec sourceRepo défini sur le dépôt filmé. Il lit les blocs @theme de Tailwind v4 et les propriétés personnalisées :root, choisit les polices dans les imports next/font, copie le meilleur logo qu'il trouve et écrit src/brand.ts.

Exécutez-le avant scaffold_scene. Une vidéo thématisée après coup signifie un nouveau scaffolding.

Vérifiez la liste unresolved qu'il renvoie et remplissez tout ce qui compte à la main. Il ne signale que ce qu'il peut réellement trouver plutôt que d'inventer une couleur plausible, donc un jeton non résolu est une véritable lacune, pas un échec.

Une règle que cela impose aux scènes écrites à la main : lisez les jetons à l'intérieur du composant, pas à la portée du module. applyBrand mute les objets de jetons partagés, donc const MONO = \"${font.mono}"`en haut d'un fichier capture la valeur par défaut et ne voit jamais la marque. UtilisezmonoStack()etuiStack()` à la place.

2. Planifiez les séquences

plan_beats avec la durée cible et les fonctionnalités. Il renvoie un squelette contigu avec une méthode de capture et un budget de mots par séquence.

Écrivez la narration selon ce budget. validate_beats applique un minimum et un maximum stricts de 2,3 à 2,9 mots par seconde par séquence, donc une ligne peut être rejetée pour être trop clairsemée. Écrire selon le nombre indiqué évite l'aller-retour.

Chaque séquence screenshot a également besoin de visual.url et visual.interactions (un tableau, éventuellement vide). Aucun autre document ne l'indique clairement à l'avance.

3. Le point de validation

Montrez à l'utilisateur le fichier de séquences complet, pas un résumé, et attendez un « oui » explicite. Rien n'est écrit sur le disque avant cela. C'est une règle de protocole, pas une suggestion, et c'est le point où une vidéo erronée coûte une phrase au lieu d'une heure.

Ensuite, write_beats_file.

4. Capture

capture_screenshot par séquence de capture d'écran. Il compense un désync de zoom Chrome par origine qui autrement produit des captures petites, floues ou mal cadrées.

Passez une interaction wait si la page a des animations d'entrée, sinon la capture les surprend en plein vol et semble cassée plutôt que manifestement erronée.

5. Scènes

scaffold_scene par séquence. Il émet une scène qui se rend telle quelle, en utilisant sa propre copie et durée de la séquence. Modifiez le contenu ; ne reconstruisez pas la structure.

Ensuite, validate_scenes. Il détecte l'échec qui se rend avec succès et est simplement faux : le contenu disposé à la pleine largeur de la scène est recadré une fois que la caméra fait un zoom avant, car la zone visible est la scène divisée par l'échelle de la caméra. Il signale également les caméras statiques, les ressources manquantes et les séquences sans narration.

Lisez docs/API.md pour les props. Ne lisez pas le code source de la bibliothèque.

6. Narration

generate_narration. Il écrit un clip par séquence où stitch_composition regarde, et limite l'étirement temporel à une plage qui reste naturelle plutôt que d'adapter les clips aux séquences à tout prix. Quand il dit qu'une séquence ne rentre pas, corrigez le script ou la durée de la séquence ; n'étirez pas davantage.

6b. Son, seulement si les éléments intégrés ne couvrent pas le besoin

Le pack synthétisé contient déjà des clics, des frappes, une cloche, un bip, un son de succès, un whoosh et un fond musical, et il ne comporte aucun droit tiers car ffmpeg le génère. Préférez-le.

Si la vidéo a réellement besoin d'autre chose, demandez à l'utilisateur quels sons il souhaite, puis plan_sound_effects avec une entrée par son. Il vous indique quelles demandes sont déjà couvertes par les éléments intégrés et renvoie un lien de recherche Pixabay plus un chemin de sauvegarde exact pour le reste.

Il ne télécharge pas depuis Pixabay, et vous non plus. Les conditions d'utilisation de Pixabay interdisent la collecte automatisée et indiquent que l'API est destinée aux requêtes humaines réelles, et ils ne publient aucun point de terminaison d'effets sonores. L'utilisateur télécharge ; vous vérifiez. Appelez à nouveau l'outil avec verify: true par la suite pour confirmer que chaque fichier est un vrai fichier audio et normaliser les formats.

provider: "freesound" récupère automatiquement à la place, mais uniquement avec le jeton API propre à l'utilisateur, et chaque clip utilisé est enregistré dans ATTRIBUTION.md. Tout ce qui se trouve dans ce fichier doit apparaître dans la description de la vidéo, sinon la licence est violée.

La musique est l'exception à tout cela. find_music_bed recherche dans deux catalogues CC0 du domaine public (~9 400 pistes) et import_music_bed découpe, fond et égalise le volume de celle que l'utilisateur choisit dans public/audio/music-bed.mp3. Rien là-dedans n'a besoin de crédits. La compétence bgmusic contient les détails ; utilisez-la lorsque les fonds synthétisés sont trop simples pour un lancement ou une pièce promotionnelle.

7. Assemblez et vérifiez

stitch_composition, puis contact_sheet avant le rendu. La contact sheet est constituée de deux images par séquence dans une seule image et ne prend qu'une fraction d'un rendu complet, ce qui est important car une vidéo de cinq minutes représente 9 000 images.

render_video avec draft: true d'abord. Pleine qualité seulement une fois que le brouillon semble correct.

Ensuite, qc_extract_frames et parcourez la liste de contrôle de docs/PIPELINE.md.

Règles qui font échouer le QC

Extrait de docs/STYLE.md, reformulé car ce sont celles qui sont le plus souvent enfreintes :

  • Pas d'assouplissement linéaire. Utilisez les préréglages E.*.
  • Chaque scène à l'intérieur de CinematicScene.
  • Le mouvement ne s'arrête jamais. Une image statique est un échec.
  • Pas de tirets cadratins, à l'écran ou dans la narration.
  • Les sous-titres vont dans overlay, pas dans children, sinon ils dérivent hors de l'écran lorsque la caméra bouge.
  • Captures d'écran uniquement à l'intérieur de BrowserFrame. Les enregistrements et les clips IA ne doivent pas l'être, sinon les séquences générées acquièrent la signature visuelle d'une capture réelle.

Ce qu'il ne faut pas prétendre

L'interface utilisateur réelle du produit, qu'elle soit rendue par le DOM, capturée d'écran ou enregistrée, est la vérité de référence. Les clips générés par IA ne sont que de l'ambiance et ne portent jamais de texte produit. Si la narration affirme quelque chose, le visuel doit le montrer ; s'il ne le peut pas, réécrivez la ligne.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

Skills associés