bueno-demo

Vidéos de démonstration avec bueno-demo

bueno-demo enregistre une visite guidée scriptée d'une page web et la transforme en un clip de style Screen Studio. Il y a deux étapes : la capture pilote une vraie fenêtre Chromium et l'enregistre, et le rendu ajoute la caméra, le curseur et les titres.

Configuration, une fois par machine

npm i -D bueno-demo            # ou tout exécuter avec npx bueno-demo
npx playwright install chromium
brew install ffmpeg            # obligatoire ; ajoutez imagemagick pour les affiches WebP

La boucle

1. Écrivez un script, un fichier JSON (voir ci-dessous). Gardez une idée par clip, 10 à 15 secondes.
2. Capture : npx bueno-demo capture demos/<nom>.json out/<nom>
3. Découpage optionnel d'un chargement lent : npx bueno-demo cut out/<nom> <de-s> <à-s>
4. Rendu : npx bueno-demo render out/<nom> out/<nom>/<nom> --gif
5. Regardez-le avant de l'utiliser. Créez une planche contact et vérifiez chaque image : ffmpeg -i out/<nom>/<nom>.mp4 -vf "fps=1,scale=640:-1,tile=3x4" -frames:v 1 sheet.png Si un bug ou une donnée privée apparaît à l'écran, corrigez le script ou découpez-le, puis refaites le rendu.

Scripts

{
  "url": "http://localhost:3000/settings",
  "viewport": [1440, 900],
  "storage": "auth.json",
  "keep": "document.querySelectorAll('[data-user-email]').forEach(e => e.textContent = '[email protected]')",
  "steps": [
    { "scroll": "[data-testid=billing]" },
    { "click": "[data-testid=plan-toggle]", "after": 1200 },
    { "type": "[data-testid=team-name]", "text": "Northwind", "clear": true },
    { "hover": "[data-testid=save]", "zoom": true },
    { "click": "[data-testid=save]", "zoom": false },
    { "wait": 800 }
  ]
}

Étapes, chacune pouvant optionnellement inclure after (ms de pause après) :

• click : glissez vers l'élément et cliquez. zoom: false ignore le zoom de la caméra ; utilisez-le pour un clic qui navigue.
• type : cliquez, puis tapez text (delay ms par touche, par défaut 55 ; clear: true remplace la valeur).
• fill : cliquez, puis définissez text en une fois, pour les champs que la saisie ne peut pas gérer (sélecteurs de date).
• hover : glissez là. zoom: true pointe aussi la caméra.
• upload : glissez vers une zone de dépôt et attachez file (relatif au script) à input.
• press : une touche, comme "Escape".
• scroll : faites défiler l'élément en douceur pour le rendre visible.
• wait : pause, en ms. eval : exécutez du JS dans la page, à l'écran.

Options :

• Connexion : storage pointe vers un fichier d'état de stockage Playwright (enregistrez-en un avec npx playwright codegen --save-storage=auth.json <url>). Ou "cookiesFrom": "agent-browser" emprunte une session agent-browser connectée. Les cookies ne sont jamais affichés.
• Confidentialité : keep est du JS exécuté avant l'enregistrement et toutes les 250 ms pendant celui-ci, pour remplacer les vrais noms et emails par des substituts afin de ne jamais les faire réapparaître lors d'un nouveau rendu. hide ajoute des sélecteurs CSS à masquer (les superpositions de développement de Next.js et Vercel sont déjà masquées ; "hide": false les affiche).
• Hors caméra : setup est du JS exécuté une fois avant l'enregistrement (pour fermer une bannière, par exemple).
• Ressenti : travelMs (durée de déplacement du curseur, par défaut 700), settle (attente après le chargement, par défaut 1500), tail (maintien à la fin, par défaut 1200), cursorStart ([x, y]), reducedMotion: true.
• Chargement : waitUntil (par défaut networkidle). Une page qui diffuse une vidéo ou qui interroge ne devient jamais inactive, donc la capture expire ; définissez "load" et laissez settle gérer le reste.
• Un autre serveur : --base http://localhost:3001 lors de la capture enregistre le même chemin ailleurs.

Sélecteurs : préférez data-testid ou la structure (#title, input[name=amount]) plutôt que le texte visible, afin que les modifications de copie ne cassent pas le script.

Options de rendu

• --zoom 1.6 à quelle distance un clic zoome (1.3 quand deux éléments comptent en même temps).
• --speed 0.9 joue 10 % plus lentement ; --speed 2.5 pour un montage rapide.
• --end 9.8 coupe à cette seconde ; --hold 1.2 fige la dernière image.
• --matte '#fdfaf1' encadre la page comme une fenêtre arrondie sur cette couleur (par défaut bord à bord).
• --title 'Déplacer un événement' --kicker 'Événements' ajoute un titre d'ouverture ; --end-cap ajoute une carte de fin.
• --brand brand.json définit l'apparence du titre et de la carte : ink, paper, accent, displayFont / monoFont ({ "family", "file", "weight" }), logo, footer, kicker. Les chemins sont relatifs au fichier de marque.
• --fit effectue le rendu dans la forme native de la page (portrait pour une vue mobile).
• --gif écrit également un GIF de 960px à 15 ips.

Règles

• N'enregistrez jamais de données réelles de clients. Utilisez des comptes de test et un crochet keep pour tout élément personnel ; vérifiez la planche contact avant de partager.
• Court et mono-objectif. Une fonctionnalité par clip ; réduisez les temps d'attente avec cut.
• Hébergez la vidéo en dehors du dépôt. Validez le script (et une affiche si vos documents en ont besoin) ; mettez les MP4 et les GIF dans votre stockage ou CDN.