screen-record：Aufnahme öffentlicher Webseiten (Reel-Material)

Josh 2026-10-11 genehmigt. Verwendung nur für eines: Aufnahme von öffentlichen Webseiten als Video-Material für IG Reels. Der Veröffentlichungsprozess bleibt komplett unverändert (IG/Threads wie gewohnt mit der Box-Browser-Methode); dieses Tool erstellt keine Posts.

Harte Regeln (jedes Mal zu befolgen)

Verwende jedes Mal einen frischen, temporären, nur im Arbeitsspeicher befindlichen Browser (chromium.launch() + newContext(), kein userDataDir).
Niemals auf das bereits angemeldete Box-Browser-Profil verweisen; niemals --extension, attach, CDP/wsEndpoint zum Verbinden mit dem Box-Browser verwenden; niemals Cookies oder storageState laden; niemals --persistent/--profile.
Keine Anmeldung auf irgendeiner Website, keine Texteingabe, kein Absenden von Formularen, keine Posts, keine Kommentare, keine Likes.
Nur öffentliche Seiten aufnehmen (http/https, kein localhost/internes Netz). IG, Threads, FB nur im „nicht angemeldeten“ Zustand für öffentliche Seiten; bei Login-Wänden Quelle wechseln, nicht versuchen, sich anzumelden.
record.mjs hat eingebaute Schutzmechanismen: Spec mit storageState/cookies/userDataDir/profile/cdp/extension/login/password/fill/type wird direkt abgelehnt; alle POST/PUT/PATCH/DELETE-Anfragen werden blockiert (Log zeigt „blocked POST ...“ – normal); das Absenden von Formular-Schaltflächen wird verweigert; nicht-http(s)- oder interne URLs werden abgelehnt.
Nicht record.mjs ändern, um den Schutz zu umgehen. Wenn du wirklich eine Seite nach dem Anmelden benötigst, halte an und frage Josh.

Installierte Abhängigkeiten

Playwright (Node-Bibliothek) 1.64.0: Installiert in node_modules/ (Apache-2.0)
Playwright CLI @playwright/cli 0.1.22: Globaler Befehl playwright-cli (~/.local/bin, Apache-2.0). Standard-Session ist ein In-Memory-Profil; kein --persistent, --profile, attach --extension hinzufügen.
Chromium: npx playwright install chromium (~/.cache/ms-playwright/chromium-1248, chromium_headless_shell-1248)
@playwright/mcp ist nicht installiert (CLI + dieses Skript reichen aus; Microsoft empfiehlt ebenfalls die CLI für Agenten).

Verwendung

cd <SKILLS_DIR>/screen-record
node record.mjs spec.json                 # Ausgabe nach spec.out
node record.mjs spec.json --out /path/x.mp4
./contact_sheet.sh x.mp4 x_sheet.jpg 4 3  # 4x3 Miniaturansichten-Raster; mit Read ansehen

Beispiel: examples/playwright-mcp.json (Testvideo: <YOUR_WORKSPACE>/media-team/03-drafts/screen-record-test/test.mp4, 19.8 Sekunden, 4.1 MB).

spec.json

{
  "url": "https://github.com/microsoft/playwright-mcp",
  "out": "<YOUR_WORKSPACE>/media-team/03-drafts/<Thema>/work/screen/clip01.mp4",
  "viewport": {"width": 720, "height": 1280},
  "outSize": {"width": 1080, "height": 1920},
  "hide": [".cookie-banner"],
  "steps": [
    {"action": "chapter", "title": "Playwright MCP", "description": "github.com/microsoft/playwright-mcp", "ms": 2200},
    {"action": "scroll", "by": 500, "ms": 2000},
    {"action": "scroll", "role": "heading", "name": "Key Features", "ms": 2000},
    {"action": "highlight", "role": "heading", "name": "Key Features", "label": "Key Features", "ms": 2500},
    {"action": "hover", "text": "Getting started"},
    {"action": "click", "text": "Apache-2.0 license"},
    {"action": "goto", "url": "https://playwright.dev"},
    {"action": "wait", "ms": 1000}
  ]
}

Element finden – eine von drei Optionen: selector (CSS), role + name (am stabilsten), text (mit optionalem exact).
scroll: Pixelanzahl (by) oder zu einem Element (to/role/text) (Standardabstand (offset) 25% vom oberen Rand); ms ist die Scroll-Dauer (mit Beschleunigungs-/Verzögerungskurve).
highlight: Gelber Rahmen + optionales Label; nach ms entfernt.
chapter: Playwright-native Kapitelkarte (unscharfer Hintergrund + Titel).
click, hover haben Playwright-native showActions: animierter Cursor + Zielrahmen + Aktionsbeschreibung (mit "showActions": false deaktivierbar).
Weitere Optionen: fps (Standard 30), crf (Standard 23), mobile (Handy-Simulation), colorScheme, locale, tail, keepWebm.

Bildschirmgrößen

Playwrights Screencast zeichnet in CSS-Pixeln auf (deviceScaleFactor hat keinen Einfluss auf das Video). Daher:

Standardmäßig wird mit Viewport 720x1280 aufgezeichnet und dann mit Lanczos auf 1080x1920 vergrößert: Das Layout sieht aus wie auf einem großen Handy, die Schrift ist groß genug, die Qualität ist etwas weich, aber für Reels ausreichend.
Für maximale Schärfe: "viewport": {"width":1080,"height":1920} (Desktop-Layout, Schrift kleiner).
Für horizontale Aufnahme mit anschließendem Zuschnitt auf Hochformat: "viewport": {"width":1280,"height":720}, "cropTo916": true (optional mit "cropX": 200 für den Startpunkt des Zuschnitts); Ausgabe ist dennoch 1080x1920, behält aber nur den mittleren Streifen; meist weniger geeignet als die direkte Hochformat-Viewport-Methode.

Einbinden in das fertige Video

stock-footage-reel: Im entsprechenden Einzelbild (shot) der shots.json schreiben: "pick": {"source":"file","path":"/abs/clip01.mp4","license":"Bildschirmaufnahme von <Seitenname>","author":"<Besitzer der Seite>"}
OpenMontage (über openmontage-house): Als lokales Clip-Material in die Materialliste einfügen oder als Quelle für eine Bildschirm-Demo verwenden.
Hausregeln bleiben bestehen: Hochformat 1080x1920, Sarah-Erklärt-Voiceover, traditionelle chinesische Untertitel + kleine englische Untertitel, B-Schnitt als Vox-ähnliches Cover, IG-Endvideo unter 45 MB.
credits.json einen Eintrag hinzufügen: {"source":"screen-record","credit":"Bildschirmaufnahme von <Seitenname>","url":"<URL>","recorded":"YYYY-MM-DD"}; im Abspann „Bildschirmaufnahme von “ angeben.
Du nimmst die Website einer anderen Person auf: Verwende sie nur als Einführungs-/Kommentarmaterial; nimm keine persönlichen Daten, privaten Nachrichten oder Paywall-Inhalte auf.

bounce12340/josh-video-skills

Was ist josh-video-skills?

In Ihrer bevorzugten KI fragen

Dokumentation