Was macht Auto Demo Producer?

Professionelle, vertonte Videodemos von JEDER Webanwendung — automatisch.

Pipeline-Übersicht

Benutzerkontext → Drehbuch → Folien → TTS-Sprachausgabe → Browseraufnahme → Finales MP4

Drei Phasen, vollständig automatisiert:

Sprachausgabe — edge-tts (kostenloses Microsoft Neural TTS) generiert Audio pro Szene
Aufnahme — Playwright steuert headless Chromium mit Videoaufzeichnung
Zusammenbau — ffmpeg fügt Video + Audio zu einer optimierten MP4-Datei zusammen

Wann aktivieren

Benutzer bittet um „Demo erstellen“, „Walkthrough aufnehmen“, „Video-Demo machen“
Benutzer gibt eine URL + Beschreibung an, was gezeigt werden soll
Benutzer wünscht einen automatisierten Screencast mit Voiceover

Schritt-für-Schritt-Workflow

Schritt 1: Kontext erfragen

Fragen Sie den Benutzer nach:

Ziel-URL — die Web-App, die demonstriert werden soll (z. B. https://myapp.azurewebsites.net)
Was gezeigt werden soll — Hauptfunktionen, Benutzerabläufe oder Szenarien
Zielgruppe — wer wird zusehen? (Führungskräfte, Entwickler, Kunden)
Zieldauer — wie lang soll die Demo sein? (1-5 Min. typisch)
Stimmenpräferenz — Sprache und Geschlecht (Standard: en-US-JennyNeural)
Branding — Produktname, Untertitel, Organisation, Akzentfarbe für Intro/Outro

Schritt 2: Demo-Drehbuch erstellen

Erstellen Sie eine demo_script.md in diesem Format:

# Demo: {Produktname}

## intro | 5
> slide intro
Willkommen zur Demo von Produktname. Heute gehen wir die wichtigsten Funktionen durch.

## login | 8
> goto {base_url}
> fill Username [email protected]
> fill Password ****
> click button Anmelden
Hier melden wir uns mit unseren Demo-Zugangsdaten in der Anwendung an.

## dashboard | 10
> wait 2
> scroll down 300
Das Dashboard zeigt eine Echtzeitübersicht aller aktiven Elemente.

## feature_one | 12
> click link Funktion Eins
> wait 1
> scroll down 200
Lassen Sie uns Funktion Eins erkunden, mit der Sie Workflows erstellen und verwalten können.

## outro | 5
> slide outro
Vielen Dank fürs Zuschauen! Besuchen Sie uns auf contoso.com für weitere Informationen.

Formatregeln für das Drehbuch:

## Szenen-ID | min_dauer_in_sekunden — Szenenüberschrift
> aktion argumente... — Playwright-Aktionen (siehe Aktionsreferenz unten)
Einfache Textzeilen = Sprachausgabe (vom TTS gesprochen)
Die Sprachausgabe bestimmt die tatsächliche Szenendauer (auf die Audiolänge aufgefüllt)

Schritt 3: Folien generieren

Führen Sie den Folien-Generator aus, um Intro/Outro-HTML-Dateien zu erstellen:

python generate_slides.py `
    --title "Produktname" `
    --subtitle "Ihr Slogan hier" `
    --org "Contoso" `
    --badge "Powered by Azure" `
    --accent "#60a5fa" `
    --out-dir ./slides

Schritt 4: Abhängigkeiten installieren

pip install edge-tts playwright
playwright install chromium
# Stellen Sie sicher, dass ffmpeg verfügbar ist:
# Windows: winget install Gyan.FFmpeg
# macOS: brew install ffmpeg
# Linux: sudo apt install ffmpeg

Schritt 5: Rekorder ausführen

python record_demo.py `
    --script demo_script.md `
    --base-url "https://myapp.azurewebsites.net" `
    --voice en-US-JennyNeural `
    --slides-dir ./slides `
    --output demo_final.mp4

Zusätzliche Optionen:

--resolution 1280x720 für kleinere Dateigröße
--var project_id=abc123 für benutzerdefinierte Variablen im Drehbuch
--var [email protected] für parametrisierte Abläufe

Schritt 6: Überprüfen und iterieren

Nach der Aufnahme das Ausgabevideo überprüfen. Übliche Anpassungen:

Zu schnell? min_duration in Szenenüberschriften erhöhen
Falsches Timing? > wait N-Aktionen zwischen Schritten einfügen
Schritte fehlen? Weitere Szenen zum Drehbuch hinzufügen
Falsche Stimme? Eine andere edge-tts-Stimme ausprobieren

Aktionsreferenz

Aktion	Syntax	Beschreibung
`goto`	`> goto https://url.com`	Zu URL navigieren
`slide`	`> slide intro`	HTML-Folie aus dem Folienverzeichnis anzeigen
`click`	`> click link Linktext`	Link per Text klicken
`click`	`> click button Buttontext`	Button per Text klicken
`click`	`> click text Beliebiger Text`	Beliebiges Element per Text klicken
`fill`	`> fill Label wert`	Formular-Textfeld ausfüllen
`type`	`> type #selektor wert`	Wert per CSS-Selektor in Element eingeben
`hover`	`> hover Elementtext`	Über Element schweben
`select`	`> select Label Option`	Dropdown-Option auswählen
`scroll`	`> scroll down 300`	Nach unten scrollen (in Pixeln)
`scroll`	`> scroll up 200`	Nach oben scrollen (in Pixeln)
`wait`	`> wait 2`	N Sekunden pausieren
`screenshot`	`> screenshot name.png`	Screenshot speichern

Stimmenauswahl

Beliebte edge-tts-Stimmen (alle kostenlos, kein API-Key nötig):

Stimme	Sprache	Stil
`en-US-JennyNeural`	Englisch (US)	Warm, gesprächig
`en-US-GuyNeural`	Englisch (US)	Professionell, klar
`en-US-AriaNeural`	Englisch (US)	Natürlich, vielseitig
`en-GB-SoniaNeural`	Englisch (UK)	Gepflegt, professionell
`it-IT-IsabellaNeural`	Italienisch	Natürlich, klar
`de-DE-KatjaNeural`	Deutsch	Professionell
`fr-FR-DeniseNeural`	Französisch	Elegant
`es-ES-ElviraNeural`	Spanisch	Klar
`ja-JP-NanamiNeural`	Japanisch	Natürlich
`zh-CN-XiaoxiaoNeural`	Chinesisch	Vielseitig

Vollständige Liste: edge-tts --list-voices

Variablen

Verwenden Sie {variablenname} in Drehbüchern. Integriert:

{base_url} — gesetzt über --base-url-Argument

Benutzerdefinierte Variablen über --var schlüssel=wert:

> goto {base_url}/projects/{project_id}
> fill Suche {search_term}

Ausgabe

Der Skill produziert:

demo_final.mp4 — H.264-Video, AAC-Audio, weboptimiert (faststart)
Auflösung: 1920×1080 (Standard) oder benutzerdefiniert
Qualität: CRF 18 (hohe Qualität), AAC 192kbps

Tipps für großartige Demos

Erst das Drehbuch — Schreiben Sie die Sprachausgabe vor den Aktionen. Die Geschichte bestimmt das Tempo.
Kurze Szenen — 8-15 Sekunden pro Szene. Halten Sie es knackig.
Großzügige Wartezeiten — Fügen Sie > wait 1-2 nach Navigationen ein, um visuelle Luft zu lassen.
Sprachausgabe an Aktion anpassen — Beschreiben Sie, was auf dem Bildschirm passiert, während es passiert.
Intro/Outro-Folien — Verwenden Sie sie immer für eine professionelle Note.
Inkrementell testen — Nehmen Sie zuerst eine Szene auf, um das Timing zu prüfen, dann fügen Sie weitere hinzu.
Markenkonsistenz — Die Farben der Intro/Outro-Folien MÜSSEN zur Markenpalette des PoC passen (aus dem threadlight-design-Querschnittsmuster 1). Verwenden Sie keine blauen/lila Standardverläufe für einen Kunden mit roter Marke. Kopieren Sie die CSS-Custom-Properties aus dem demo-deck.html des PoC in die HTML-Folien-Dateien.
Untertitel — Erstellen Sie eine WebVTT-Datei aus dem Sprachausgabetext. Verwenden Sie NICHT externes <track src="file.vtt"> — Edge blockiert CORS auf dem file://-Protokoll. Betten Sie stattdessen das VTT inline als JS-Blob-URL ein: var blob = new Blob([vttData], {type:'text/vtt'}); track.src = URL.createObjectURL(blob); und fügen Sie das <track>-Element dynamisch hinzu. Zeitstempel MÜSSEN im Format HH:MM:SS.mmm vorliegen (nicht MM:SS.mm — Edge lehnt dies ab).
In Deck einbetten — Wenn der PoC ein demo-deck.html liefert, betten Sie das Video als Fallback auf der Live-Demo-Holding-Karte ein. Richten Sie einen V-Tastenschalter ein: Drücken Sie V, um das Video inline auf der .is-cue-Folie abzuspielen, drücken Sie V erneut, um es zu stoppen. Fügen Sie eine sichtbare Steuerleiste hinzu (Play/Pause-Button + klickbare Fortschrittsleiste + Zeitanzeige), damit der Präsentator nicht nur auf Tastenkombinationen angewiesen ist. Auto-Stopp bei ended-Ereignis. Der Fallback-Hinweis („V-Taste für voraufgezeichneten Fallback“) wird unter dem Cue-Text mit geringer Deckkraft angezeigt.

Aufnahme von Agenten-Demos (kampferprobtes Muster)

Dieser Abschnitt wurde aus 6 fehlgeschlagenen Aufnahmeversuchen auf einem Foundry-gehosteten Agenten-PoC extrahiert. Die unten stehenden Muster sind der einzige Ansatz, der zuverlässig ein ansehbares Video liefert, wenn die Antwortzeit des Agenten unvorhersehbar ist (10–50 Sekunden).

Das Problem

KI-Agenten-Demos sind nicht in Echtzeit aufnehmbar. Der Agent benötigt 10–50 Sekunden für eine Antwort. Wenn Sie den Browser kontinuierlich aufnehmen und vorab generierte Sprachausgabe überlagern, beschreibt die Stimme die Antwort, während der Bildschirm noch „Wird bearbeitet...“ anzeigt. Keine noch so aufwändige Nachbearbeitung durch Beschleunigung oder Audio-Verschiebung behebt dies zuverlässig — die beiden Zeitachsen sind grundsätzlich desynchronisiert.

Die Lösung: Screenshot-pro-Szene-Sprungschnitte

Zeigen Sie „Wird bearbeitet...“ niemals im Video. Schneiden Sie von „Frage eingegeben“ direkt zu „Antwort gerendert“. Die Wartezeit findet zwischen den Screenshots außerhalb der Kamera statt.

Workflow pro Szene:

Prompt eingeben → Screenshot des eingegebenen Zustands (Sprecher stellt die Frage über diesen Frame)
Auf „Fragen“ klicken → Polling, bis die Antwort vollständig gerendert ist (außerhalb der Kamera — keine Aufnahme)
Screenshot der fertigen Antwort (Sprecher beschreibt die Antwort über diesen Frame)
Segment erstellen: Standbild + passender Sprachausgabe-Audioclip (exakte Längenübereinstimmung)
Alle Segmente verketten: Intro → K1Eingegeben → K1Fertig → K2Eingegeben → K2Fertig → … → Outro

Intelligentes Warten — „erscheint → verschwindet“-Polling:

# Phase 1: Warten, bis der Ladeindikator ERSCHEINT (bestätigt, dass der API-Aufruf gestartet wurde)
for _ in range(30):
    if await page.evaluate("() => !!document.body.innerText.match(/Working/)"):
        break
    await page.wait_for_timeout(500)

# Phase 2: Warten, bis der Ladeindikator VERSCHWINDET (bestätigt, dass die Antwort gerendert wurde)
for _ in range(120):
    if not await page.evaluate("() => !!document.body.innerText.match(/Working/)"):
        break
    await page.wait_for_timeout(1000)
await page.wait_for_timeout(2000)  # DOM setzen lassen

Passen Sie den Regex (/Working/) an den Ladeindikator des jeweiligen Arbeitsbereichs an. Das 2-Phasen-Muster verhindert den häufigen Fehler, dass das Skript prüft, bevor „Wird bearbeitet...“ überhaupt erscheint, und sofort fortfährt.

Segment aus einem Standbild + Audio erstellen:

def make_segment(image_path, audio_path, output_path):
    audio_dur = ffprobe_duration(audio_path)
    subprocess.run([
        "ffmpeg", "-y",
        "-loop", "1", "-i", str(image_path),
        "-i", str(audio_path),
        "-c:v", "libx264", "-preset", "fast", "-crf", "18",
        "-c:a", "aac", "-b:a", "192k",
        "-t", str(audio_dur),
        "-pix_fmt", "yuv420p",
        "-movflags", "+faststart", str(output_path),
    ], check=True)

Die Dauer jedes Segments entspricht seiner Sprachausgabe-Audiodauer — der Sprecher beschreibt immer das, was auf dem Bildschirm zu sehen ist.

Anti-Patterns (aus 6 fehlgeschlagenen Aufnahmeversuchen auf einem Foundry-gehosteten Agenten-PoC)

❌ Ansatz	Warum er scheitert
Kontinuierlich aufnehmen + Audio nachträglich überlagern	Audio- und Videospuren stimmen nie überein — Sprecher spricht über Quellen, während der Bildschirm „Wird bearbeitet...“ zeigt
Videoabschnitte mit „Wird bearbeitet...“ per `setpts` beschleunigen	Sieht ruckelig aus; Beschleunigungsfaktor hängt von unvorhersehbarer Agenten-Antwortzeit ab
Feste `> wait 35`-Timer im Drehbuch	Agenten-Antwortzeit beträgt 10–50s; feste Timer kappen entweder Antworten oder verschwenden 30s mit dem Anzeigen von nichts
Video + Audio gleichzeitig in Echtzeit aufnehmen	Playwright kann kein Systemaudio aufnehmen; headless Chromium hat kein Audiogerät
Nachbearbeitung mit Audio-Shift-Erkennung	Zu fehleranfällig; Text „Wird bearbeitet...“ erscheint im DOM, aber visuelle Lade-Spinner variieren pro Arbeitsbereich

Stimmenauswahl für Agenten-Demos

Verwenden Sie eine britische Stimme (en-GB-SoniaNeural) für PoCs mit britischem Publikum — sie liest natürlich im Demo-Tempo und entspricht dem professionellen Register. Vermeiden Sie US- Casual-Stimmen für Demos in regulierten Branchen (FSI, Telekom, Gesundheitswesen).

Dateipfade

Wenn das Skript als globaler Copilot-CLI-Skill aktiviert ist, befinden sich die Skripte unter:

~/.copilot/skills/auto-demo-producer/scripts/record_demo.py
~/.copilot/skills/auto-demo-producer/scripts/generate_slides.py

Kopieren Sie sie vor der Ausführung in Ihr Projektverzeichnis, oder referenzieren Sie sie direkt.

Voraussetzungen

Python 3.10+ mit pip
edge-tts — pip install edge-tts (kostenloses Microsoft Neural TTS)
Playwright — pip install playwright && playwright install chromium
ffmpeg — Systembinary (siehe Installationsbefehle oben)

Auto Demo Producer

Was ist Auto Demo Producer?

In Ihrer bevorzugten KI fragen

Dokumentation