App-Trainingsvideo erstellen

Was macht App-Trainingsvideo erstellen?

Erstelle ein professionelles Trainingsvideo einer echten Anwendung. Das Video ist etwa 1920 × 1080 H.264 mit AAC-Sprachausgabe. Jeder gesprochene Satz wird untertitelt, jedes Kapitel beginnt mit einer Karte, und lange Wartezeiten werden herausgeschnitten. Es ist reproduzierbar: Wenn sich die Benutzeroberfläche ändert, reicht es aus, die Aufnahme und das Rendern erneut auszuführen, und das Video ist wieder aktuell.

So funktioniert es:

1. Ein Storyboard enthält den Sprechtext, die Kapitel und das Branding.
2. narrate.py spricht jeden Abschnitt mit der Offline-Stimme Kokoro: kein Cloud-Dienst, kein Konto, keine Kosten.
3. Ein Capture-Skript steuert die echte App mit Playwright (echte Mausbewegungen, sichtbarer Cursor und Klickwellen). Es zeichnet die Screencast-Frames von Chrome auf und hält jeden Abschnitt, bis seine Sprachausgabe beendet ist.
4. render.py setzt die Clips, Karten, die Untertitel-Leiste und die lautheitsnormalisierte Tonspur zusammen.
5. review.py überprüft das Ergebnis und erstellt ein Kontaktblatt, das man sich ansieht, bevor etwas veröffentlicht wird.

Die Skripte befinden sich im Ordner scripts/ neben dieser Datei. Lese references/storyboard.md, bevor du den Sprechtext schreibst, und references/capture-guide.md, bevor du das Capture-Skript schreibst. Beide enthalten Lektionen, die die üblichen Neuaufnahmen verhindern.

0. Einmalige Einrichtung

bash <skill>/scripts/setup.sh

Dies erstellt ~/.cache/app-training-video/ (überschreibbar mit TRAINING_VIDEO_HOME) mit:

• einer privaten Python 3.10–3.13-Umgebung mit festgelegten Paketen;
• dem Kokoro-Sprachmodell (~350 MB) und der Schriftart Inter, SHA-256-geprüft;
• Chromium.

Führe jedes Skript mit dem Python dieser Umgebung aus (PY=~/.cache/app-training-video/venv/bin/python) und übergib den Storyboard-Pfad. Wenn die Modelldateien bereits irgendwo existieren, führe zuerst MODEL_SOURCE=<dir> aus, um sie wiederzuverwenden. ffmpeg wird mitgeliefert (imageio-ffmpeg); es wird nichts systemweit installiert.

1. App und Zielgruppe verstehen

Bevor du etwas schreibst, verwende die App selbst (oder lies ihre Benutzeranleitung) und finde heraus:

• Wer zuschaut: Neukunden, Außendienstmitarbeiter, interne Benutzer.
• Der eine Workflow, den sie beherrschen müssen: vom Input zum Ergebnis.
• Welche Demodaten sicher gezeigt werden können.
• Wie die App in einem sauberen Zustand gestartet wird: URL oder Startbefehl, plus ein frischer Datenordner oder Demo-Konto.
• Branding: Firmenname, Produktname, Version, Logo-PNG, Akzentfarbe, Kontaktzeilen für das Outro.

Frage den Benutzer nach allem, was du nicht finden kannst. Sechs bis sieben Minuten sind angemessen für einen vollständigen Workflow, und 60–90 Sekunden für eine einzelne Funktion.

2. Storyboard schreiben

Kopiere assets/storyboard.example.json neben das Projekt als storyboard.json und befolge beim Schreiben references/storyboard.md. Kurz gefasst:

• 10–35 Sekunden Sprache pro Segment;
• Kapitel "n · Titel", mit card: "chapter" beim ersten Segment jedes Kapitels;
• intro- und outro-Karten;
• Akronyme werden für die Stimme buchstabiert, mit caption_replacements, die die geschriebene Form wiederherstellen.

Zeige den Sprechtext dem Benutzer vor der Aufnahme: Es ist billig, ihn jetzt zu ändern, und teuer später.

3. Sprachausgabe erstellen

$PY <skill>/scripts/narrate.py storyboard.json

Es gibt die Länge jedes Segments aus. Es spricht nur Segmente neu, deren Text sich geändert hat. Höre dir ein oder zwei WAVs in video-build/audio/ an, falls die Aussprache wichtig ist, passe die Schreibweise an und führe es erneut aus.

4. Capture-Skript schreiben und ausführen

Kopiere scripts/capture_template.py als capture.py neben das Storyboard, setze den Pfad zum scripts/-Ordner des Skills und schreibe einen with rec.segment('<id>'):-Block pro gefilmtem Segment in Storyboard-Reihenfolge. Darin führst du genau das aus, was der Sprechtext beschreibt:

• rec.click, rec.hover, rec.type, rec.drag, rec.scroll, rec.park;
• rec.cut() um alles Langsame herum, wobei auf ein sichtbares Ergebnis gewartet wird.

Der Recorder verweigert einen nicht leeren Ordner frames/, sodass alte Frames niemals eingemischt werden.

$PY capture.py storyboard.json

Jedes Segment gibt seine gefilmte Länge im Vergleich zur Sprachlänge aus. Der Lauf schlägt fehl (Status incomplete) beim ersten defekten Schritt, einem Seitenfehler oder einem Segment, das nicht gefilmt wurde. Korrigiere den Schritt, leere video-build/frames/ und führe es erneut aus.

5. Rendern und überprüfen

$PY <skill>/scripts/render.py storyboard.json
$PY <skill>/scripts/review.py storyboard.json

Ausgabe im Build-Ordner:

• <output_name>.mp4
• .srt-Untertitel
• -chapters.txt (in eine YouTube-Beschreibung einfügen)
• -poster.jpg
• -timeline.json
• -review.jpg: ein Standbild pro Segment.

Öffne das Kontaktblatt und sieh es dir an und überprüfe stichprobenartig die MP4-Datei. Achte auf:

• den richtigen Bildschirm in jedem Segment;
• keine Fehlerbanner, leeren Diagramme oder störende Dialoge;
• dass der Cursor nie das verdeckt, was gerade erklärt wird;
• Untertitel, die korrekt lesbar sind.

Selektoren können übereinstimmen, während der Bildschirm falsch ist. Daher ist dieser Blick erforderlich, bevor du das Video als fertig bezeichnest.

6. Ausliefern

Gib dem Benutzer die MP4, die SRT (die meisten Player laden sie automatisch, wenn die Namen übereinstimmen) und die Kapitelliste. Erwähne die Länge und die Größe. Zum Veröffentlichen lädst du die MP4 und SRT zusammen hoch. Behalte storyboard.json und capture.py beim Projekt: Nach der nächsten UI-Änderung führst du die Schritte 4–5 (und Schritt 3, falls sich der Wortlaut geändert hat) erneut aus.

Fehlerbehebung

Symptom	Lösung
Need Python 3.10–3.13	Installiere python3.12 oder setze PYTHON= vor dem Ausführen von setup.sh
launch() timeout, obwohl die App gestartet ist	Die App puffert ihre Ausgabe: Führe Python-Server mit python -u aus oder überprüfe den ready-Regex
Chromium startet unter Linux nicht	$PY -m playwright install --with-deps chromium
Locator timeout oder findet zwei Elemente	Beschränke ihn auf eine Region oder verwende get_by_role mit exact=True (siehe Capture-Guide)
Segment viel länger als die Sprachausgabe	Etwas Langsames ist nicht in rec.cut() eingeschlossen
Falsche Aussprache	Ändere die Schreibweise in speech, füge eine caption_replacements-Regel hinzu, führe narrate.py erneut aus
Untertitel nicht synchron	Der Untertitel-Timing folgt der Sprachlänge: Kürze lange Sätze oder teile das Segment