exiao/skills

Demo Video Creator

Erstellen Sie ansprechende Produkt-Demo-Videos durch Automatisierung von Browser-Interaktionen.

Überblick

1. Planen Sie die Demo-Sequenz (Seiten, Interaktionen, Timing)
2. Aufnehmen Sie Bilder mit Playwright CDP Screencast
3. Kodieren Sie das Video mit FFmpeg

Schnellstart

Voraussetzungen

• OpenClaw-Browser läuft (browser action=start profile=clawd)
• App über Browser erreichbar (localhost oder remote)
• FFmpeg installiert für die Kodierung

Aufnahme-Workflow

1. Starten Sie den OpenClaw-Browser, falls er nicht läuft
2. Navigieren Sie manuell oder mit browser action=open zur App
3. Passen Sie scripts/record-demo.js für die Ziel-App an
4. Führen Sie aus: node scripts/record-demo.js
5. Kodieren Sie: bash scripts/frames-to-video.sh

Planung einer Demo

Siehe references/demo-planning.md für Anleitungen zu:

• Strukturierung von Demo-Sequenzen
• Timing und Rhythmus
• Interaktionsmustern
• Was Demos überzeugend macht

Skripte

scripts/record-demo.js

Vorlagen-Playwright-Skript, das:

• Über CDP eine Verbindung zum OpenClaw-Browser herstellt
• Screencast-Aufnahme startet (JPEG-Bilder)
• Die Demo-Sequenz ausführt (Navigation, Klicks, Hover, Tippen)
• Bilder im Ausgabeverzeichnis speichert

Für jede Demo anpassen:

• DEMO_SEQUENCES Array – Seiten und Interaktionen definieren
• OUTPUT_DIR – wo Bilder gespeichert werden
• FRAME_SKIP – jedes N-te Bild überspringen (niedriger = mehr Bilder)

scripts/frames-to-video.sh

FFmpeg-Kodierungsskript mit Voreinstellungen:

• mp4 – H.264, gutes Qualitäts-/Größenverhältnis (Standard)
• gif – Animiertes GIF zum Einbetten
• webm – VP9, kleinere Dateien

Verwendung: ./frames-to-video.sh [input_dir] [output_name] [format]

Interaktionsmuster

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

// Element anklicken
await page.locator('button:has-text("Create")').click();
await page.waitForTimeout(500);

// Hover (Tooltips, Hover-Zustände anzeigen)
await page.locator('.card').first().hover();
await page.waitForTimeout(1000);

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

// Taste drücken
await page.keyboard.press('Enter');
await page.keyboard.press('Escape');

// Scrollen
await page.evaluate(() => window.scrollBy(0, 300));

Tipps

• Timing: 2s beim Seitenladen, 0,5-1s zwischen Interaktionen, 1,5s zum Anzeigen von Ergebnissen
• Bildüberspringen: Verwenden Sie 3-5 für flüssiges Video, 8-10 für kleinere Dateien
• Qualität: 85-90 JPEG-Qualität bietet ein gutes Gleichgewicht zwischen Größe und Klarheit
• Auflösung: Die Fenstergröße des Browsers bestimmt die Ausgabeauflösung
• Schleifen: GIFs sollten nahtlos wiederholt werden – enden Sie dort, wo Sie begonnen haben

Fallstricke

• Screenshots vs. Video: Wenn der Benutzer nur eine Funktion sehen muss, machen Sie Screenshots inline, anstatt ein ganzes Video aufzunehmen. Überprüfen Sie zuerst browser action=tabs profile=clawd – wenn der App-Tab bereits geöffnet ist, machen Sie direkt Screenshots, ohne einen Sub-Agenten zu verwenden.
• Kontextgrenze: Screenshot-intensive Aufnahmeschleifen verbrauchen schnell Kontext (200k-Token-Grenze). Halten Sie den Umfang gering: Nehmen Sie zuerst alle Bilder auf, analysieren Sie dann – unterbrechen Sie niemals die Bildaufnahme mit der Analyse. Wenn der Kontext knapp ist, schreiben Sie die Bilder auf die Festplatte und analysieren Sie sie in einem separaten Durchlauf.
• Parallel-Agenten-Risiko: Starten Sie nicht mehrere Demo-Agenten gleichzeitig gegen denselben Browser-Tab – sie beeinträchtigen gegenseitig ihren Navigationszustand.