Was macht Bildschirmaufnahmen & Demos?
Eine skriptgesteuerte Aufnahme ist wiederholbar. Wenn sich die UI ändert, führst du das Skript erneut aus, anstatt von Hand neu aufzunehmen.
Auswahl der Methode
| Situation | Methode |
|---|---|
| Web-App, die im Browser geöffnet werden kann | Playwright-scripted Recording |
| Desktop-App oder Vollbild-Workflow | Betriebssystem-Recorder (OBS Studio, Windows Game Bar, macOS Screenshot) |
| App-Quellcode verfügbar und ein poliertes, ruckelfreies Ergebnis gewünscht | Bildschirme als statische Komponenten in Remotion neu erstellen (siehe remotion-programmatic-video) |
| CLI | Terminal-Recorder (asciinema, VHS) oder eine animierte Terminal-Komponente |
Playwright-Aufnahme (Python)
pip install playwright && playwright install chromium
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
ctx = browser.new_context(
viewport={"width": 1920, "height": 1080},
record_video_dir="recordings/",
record_video_size={"width": 1920, "height": 1080},
)
page = ctx.new_page()
page.goto("https://example.com")
page.wait_for_load_state("networkidle")
page.wait_for_timeout(800) # Viewer lesen lassen
page.get_by_role("button", name="Sign in").click()
page.get_by_label("Email").type("[email protected]", delay=60) # sichtbares Tippen
page.wait_for_timeout(1200)
ctx.close() # Video wird beim Schließen finalisiert
browser.close()
Ausgabe ist WebM. Konvertieren:
ffmpeg -i recordings/xyz.webm -c:v libx264 -crf 18 -pix_fmt yuv420p -r 30 out/demo.mp4
Aufwerten des Aussehens
- Demo-Daten: Verwende einen vorab eingerichteten Demo-Account mit realistischen, nicht sensiblen Daten. Niemals echte Kundendaten, Token oder E-Mails aufnehmen.
- Fenster: Feste 1920x1080 Viewport, Lesezeichenleisten und Benachrichtigungen ausblenden, leichter Zoom (110 bis 125 Prozent), damit Text auf dem Smartphone lesbar ist.
- Tempo: Nach jeder Aktion 0,5 bis 1 Sekunde pausieren. Tippen mit Verzögerung. Keine sofortigen Sprünge.
- Cursor: Playwright zeichnet keinen Cursor. Einen kleinen DOM-Cursor einfügen oder nachträglich (Remotion oder ein Overlay) hinzufügen.
- Determinismus: Auf
expect(locator).to_be_visible()warten anstatt auf feste Wartezeiten, dann bewusste Pausen für Zuschauer einfügen. - Geheimnisse: Felder im Seiten-Skript vor der Aufnahme unscharf stellen oder maskieren (
page.add_style_tag).
Post-Produktion
# Leerlaufzeit schneiden: 12 s bis 41 s behalten
ffmpeg -ss 12 -i demo.mp4 -t 29 -c:v libx264 -crf 18 out/trimmed.mp4
# Langweilige Wartezeiten beschleunigen (z. B. 4x von 20 s bis 30 s) erfordert einen Split; am einfachsten: schneiden, beschleunigen, wieder zusammenfügen
# In einen Bereich zoomen: zuschneiden und skalieren (x:y:w:h in Quell-Pixeln)
ffmpeg -i demo.mp4 -vf "crop=960:540:480:270,scale=1920:1080" out/zoom.mp4
Für flüssige, animierte Zoom-/Pan-Bewegungen, die dem Cursor folgen, Remotion verwenden (interpolate auf scale und translate).
Synchronisation mit Erzählung
- Zuerst das Drehbuch schreiben (
video-planning), Sprachaufnahme erstellen (voiceover-tts). - Bildschirm aufnehmen und dann die Geschwindigkeit pro Szene anpassen, sodass jede Aktion auf ihren Satz fällt. Berechne
speed = recorded_seconds / narration_seconds. - Die
ffmpeg-essentialsGeschwindigkeitsrezepte verwenden oder die Zeitlinie innerhalb der Komposition anpassen.
Checkliste
- Keine persönlichen Daten, API-Schlüssel oder internen URLs sichtbar.
- Text bei 1080p skaliert auf einen Smartphone-Bildschirm lesbar.
- Keine Lade-Spinner länger als 1 Sekunde übrig.
- Audio vom Rechner stummgeschaltet, sofern nicht gewünscht.