bounce12340/josh-video-skills: Grabación de pantalla de páginas…

screen-record: Grabación de pantalla de páginas web públicas (para Reels)

Josh 2026-10-11 Aprobado para instalación. El único propósito es grabar la interacción con páginas web públicas para usarlas como material de video para IG Reels. El flujo de publicación no cambia en absoluto (IG/Threads siguen usando el método del navegador box), esta herramienta no toca la publicación.

Reglas estrictas (a cumplir siempre)

1. Usar siempre un navegador nuevo, temporal, solo en memoria (chromium.launch() + newContext(), sin userDataDir).
2. Nunca apuntar al perfil de navegador ya iniciado en box; nunca usar --extension, attach, CDP/wsEndpoint para conectar al navegador box; nunca cargar cookies o storageState; no usar --persistent/--profile.
3. No iniciar sesión en ningún sitio, no ingresar texto, no enviar formularios, no publicar, no comentar, no dar "me gusta".
4. Grabar solo páginas públicas (http/https, no localhost/red interna). IG, Threads, FB solo se pueden ver en estado "no iniciado sesión"; si aparece un muro de inicio de sesión, cambiar de fuente, no intentar iniciar sesión.
5. record.mjs tiene protecciones integradas: si el spec contiene campos como storageState/cookies/userDataDir/profile/cdp/extension/login/password/fill/type, se rechaza directamente; todas las solicitudes POST/PUT/PATCH/DELETE se bloquean (en el log aparecerá blocked POST ..., es normal); se rechaza hacer clic en botones de envío de formularios; las URLs que no sean http(s) o sean de red interna se rechazan.
6. No modificar record.mjs para evadir las protecciones. Si realmente se necesita una pantalla después de iniciar sesión, detenerse y preguntar a Josh.

Instalado

• Playwright (librería Node) 1.64.0: Instalado en la carpeta node_modules/ (Apache-2.0)
• Playwright CLI @playwright/cli 0.1.22: Comando global playwright-cli (~/.local/bin, Apache-2.0). La sesión predeterminada es un perfil en memoria, se puede usar temporalmente para ver páginas o capturas de pantalla; no agregar --persistent, --profile, attach --extension.
• Chromium: npx playwright install chromium (~/.cache/ms-playwright/chromium-1248, chromium_headless_shell-1248)
• No se ha instalado @playwright/mcp (la CLI + este script es suficiente; Microsoft también recomienda usar la CLI para agentes).

Uso

cd <RUTA_SKILLS>/screen-record
node record.mjs spec.json                 # Salida a spec.out
node record.mjs spec.json --out /ruta/x.mp4
./contact_sheet.sh x.mp4 x_sheet.jpg 4 3  # Hoja de contactos 4x3, usar con Read

Ejemplo: examples/playwright-mcp.json (video de prueba: <TU_WORKSPACE>/media-team/03-drafts/screen-record-test/test.mp4, 19.8 segundos, 4.1 MB).

spec.json

{
  "url": "https://github.com/microsoft/playwright-mcp",
  "out": "<TU_WORKSPACE>/media-team/03-drafts/<TEMA>/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}
  ]
}

• Para encontrar elementos, elegir uno de tres: selector (CSS), role + name (el más estable), text (se puede añadir exact).
• scroll: by píxeles, o usar to/role/text para desplazarse a un elemento (offset por defecto está a 25% del borde superior), ms tiempo de desplazamiento (ease-in-out).
• highlight: Marco amarillo + etiqueta opcional, se elimina después de ms.
• chapter: Tarjeta de capítulo nativa de Playwright (fondo difuminado + título).
• click, hover tienen showActions nativo de Playwright: cursor animado + contorno del objetivo + descripción de la acción (se puede desactivar con "showActions": false).
• Otras opciones: fps (por defecto 30), crf (por defecto 23), mobile (simulación de móvil), colorScheme, locale, tail, keepWebm.

Tamaño de pantalla

La grabación de pantalla (screencast) de Playwright usa píxeles CSS (deviceScaleFactor no se refleja en el video), por lo tanto:

• Por defecto, se graba con viewport 720x1280 y luego se amplía con lanczos a 1080x1920: la apariencia es como un teléfono grande, las letras son lo suficientemente grandes, la calidad es ligeramente suave pero suficiente para Reels.
• Para máxima nitidez: "viewport": {"width":1080,"height":1920} (diseño de escritorio, letras más pequeñas).
• Para grabar en horizontal y luego recortar a vertical: "viewport": {"width":1280,"height":720}, "cropTo916": true (se puede añadir "cropX": 200 para especificar el punto de inicio del recorte), la salida sigue siendo 1080x1920, pero solo se conserva la franja central, generalmente no es tan bueno como usar directamente un viewport vertical.

Integración en el video final

• stock-footage-reel: En shots.json, escribir para esa toma: "pick": {"source":"file","path":"/abs/clip01.mp4","license":"Grabación de pantalla de <sitio>","author":"<propietario del sitio>"}
• OpenMontage (a través de openmontage-house): Como material local (local clip) agregarlo a la lista de materiales, o como fuente de grabación real en el flujo screen-demo.
• Las reglas de la casa se mantienen: vertical 1080x1920, narración de Sarah Explains, subtítulos principales en chino tradicional + inglés pequeño, portada de Vox con recorte B, video final de IG de menos de 45 MB.
• Agregar una entrada en credits.json: {"source":"screen-record","credit":"Grabación de pantalla de <sitio>","url":"<URL>","recorded":"YYYY-MM-DD"}; en los créditos finales escribir "Grabación de pantalla de ".
• Se está grabando el sitio web de otra persona: usar solo como material de presentación/revisión, no grabar contenido con datos personales, mensajes privados o contenido de pago.