exiao/skills

Créateur de Vidéos de Démonstration

Créez des vidéos de démonstration produits soignées en automatisant les interactions navigateur.

Aperçu

1. Planifiez la séquence de la démo (pages, interactions, timing)
2. Enregistrez les images via le screencast Playwright CDP
3. Encodez en vidéo avec FFmpeg

Démarrage Rapide

Prérequis

• Navigateur OpenClaw en cours d'exécution (browser action=start profile=clawd)
• Application accessible via le navigateur (localhost ou à distance)
• FFmpeg installé pour l'encodage

Workflow d'enregistrement

1. Démarrez le navigateur OpenClaw s'il n'est pas en cours
2. Naviguez vers l'application manuellement ou via browser action=open
3. Personnalisez scripts/record-demo.js pour l'application cible
4. Exécutez : node scripts/record-demo.js
5. Encodez : bash scripts/frames-to-video.sh

Planification d'une Démo

Consultez references/demo-planning.md pour des conseils sur :

• La structuration des séquences de démo
• Le timing et le rythme
• Les modèles d'interaction
• Ce qui rend les démos convaincantes

Scripts

scripts/record-demo.js

Script Playwright modèle qui :

• Se connecte au navigateur OpenClaw via CDP
• Démarre la capture par screencast (images JPEG)
• Exécute la séquence de démo (navigation, clics, survols, saisie)
• Sauvegarde les images dans le répertoire de sortie

Personnalisez pour chaque démo :

• Tableau DEMO_SEQUENCES - définissez les pages et interactions
• OUTPUT_DIR - où sauvegarder les images
• FRAME_SKIP - ignorer toutes les N images (plus bas = plus d'images)

scripts/frames-to-video.sh

Script d'encodage FFmpeg avec préréglages :

• mp4 - H.264, bon équilibre qualité/taille (par défaut)
• gif - GIF animé pour intégration
• webm - VP9, fichiers plus petits

Utilisation : ./frames-to-video.sh [répertoire_entrée] [nom_sortie] [format]

Modèles d'Interaction

// Navigation
await page.goto('http://localhost/dashboard');
await page.waitForTimeout(2000);

// Cliquer sur un élément
await page.locator('button:has-text("Create")').click();
await page.waitForTimeout(500);

// Survol (afficher infobulles, états de survol)
await page.locator('.card').first().hover();
await page.waitForTimeout(1000);

// Saisir du texte
await page.locator('input[placeholder="Search"]').fill('query');
await page.waitForTimeout(500);

// Appuyer sur une touche
await page.keyboard.press('Enter');
await page.keyboard.press('Escape');

// Défiler
await page.evaluate(() => window.scrollBy(0, 300));

Conseils

• Timing : 2s au chargement de la page, 0,5-1s entre les interactions, 1,5s pour afficher les résultats
• Saut d'images : Utilisez 3-5 pour une vidéo fluide, 8-10 pour des fichiers plus petits
• Qualité : 85-90 JPEG équilibre taille et clarté
• Résolution : La taille de la fenêtre du navigateur détermine la résolution de sortie
• Boucles : Les GIFs doivent boucler parfaitement - terminez là où vous avez commencé

Pièges

• Captures d'écran vs vidéo : Si l'utilisateur a seulement besoin de voir une fonctionnalité, prenez des captures d'écran en ligne plutôt que d'enregistrer une vidéo complète. Vérifiez d'abord browser action=tabs profile=clawd — si l'onglet de l'application est déjà ouvert, prenez les captures d'écran directement sans sous-agent.
• Limite de contexte : Les boucles d'enregistrement avec beaucoup de captures d'écran consomment rapidement le contexte (limite de 200k tokens). Gardez la portée étroite : enregistrez d'abord toutes les images, puis analysez — n'intercalez jamais la capture d'images avec l'analyse. Si le contexte est serré, écrivez les images sur disque et analysez dans un passage séparé.
• Risque d'agents parallèles : Ne lancez pas plusieurs agents de démonstration simultanément sur le même onglet de navigateur — ils interféreraient avec l'état de navigation des uns et des autres.