screen-record: Gravação de Operações em Páginas Web Públicas (Material para Reels)

Josh, aprovado para instalação em 2026-10-11. Único propósito: gravar a tela de páginas web públicas para uso como material de vídeo para IG Reels. O fluxo de postagem permanece inalterado (IG / Threads usando o método do box browser); esta ferramenta não publica nada.

Regras rígidas (cumprir sempre)

Use sempre um navegador novo, temporário e apenas em memória (chromium.launch() + newContext(), sem userDataDir).
Nunca aponte para o perfil de navegador logado do box; nunca use --extension, attach, CDP / wsEndpoint para conectar ao box; nunca carregue cookies ou storageState; nunca use --persistent / --profile.
Não faça login em nenhum site, não digite texto, não envie formulários, não publique, não comente, não curta.
Grave apenas páginas públicas (http/https, não localhost / intranet). IG, Threads, FB apenas no estado "não logado" e apenas páginas públicas; se encontrar muro de login, mude de fonte, não tente fazer login.
O record.mjs tem proteção embutida: se a especificação contiver storageState / cookies / userDataDir / profile / cdp / extension / login / password / fill / type, é rejeitado automaticamente; todas as requisições POST / PUT / PATCH / DELETE são bloqueadas (o log mostrará blocked POST ..., o que é normal); botões de envio de formulários não podem ser clicados; URLs não http(s) ou de intranet são recusados.
Não modifique o record.mjs para contornar as proteções. Se realmente precisar de uma tela após login, pare e pergunte ao Josh.

Instalado

Playwright (biblioteca Node.js) 1.64.0: instalado na pasta node_modules/ (Apache-2.0)
Playwright CLI @playwright/cli 0.1.22: comando global playwright-cli (~/.local/bin, Apache-2.0). A sessão padrão é um perfil em memória, pode ser usado temporariamente para ver páginas e fazer capturas de tela; não use --persistent, --profile, attach --extension.
Chromium: npx playwright install chromium (~/.cache/ms-playwright/chromium-1248, chromium_headless_shell-1248)
@playwright/mcp não está instalado (CLI + este script é suficiente; a Microsoft também recomenda CLI para agentes).

Uso

cd <SKILLS_DIR>/screen-record
node record.mjs spec.json                 # saída em spec.out
node record.mjs spec.json --out /caminho/x.mp4
./contact_sheet.sh x.mp4 x_sheet.jpg 4 3  # mosaico 4x3, usar com Read

Exemplo: examples/playwright-mcp.json (vídeo de teste: <SEU_WORKSPACE>/media-team/03-drafts/screen-record-test/test.mp4, 19,8 seg, 4,1 MB).

spec.json

{
  "url": "https://github.com/microsoft/playwright-mcp",
  "out": "<SEU_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}
  ]
}

Três formas de localizar um elemento: selector (CSS), role + name (mais estável), text (pode usar exact).
scroll: por by pixels, ou use to / role / text para rolar até um elemento (offset padrão 25% do topo), ms duração da rolagem (easing in-out).
highlight: moldura amarela + rótulo opcional, removido após ms.
chapter: card de capítulo nativo do Playwright (fundo desfocado + título).
click, hover têm showActions nativo do Playwright: cursor animado + contorno do alvo + descrição da ação (desativar com "showActions": false).
Outras opções: fps (padrão 30), crf (padrão 23), mobile (emulação de celular), colorScheme, locale, tail, keepWebm.

Dimensões da tela

O screencast do Playwright grava em pixels CSS (deviceScaleFactor não afeta o vídeo), então:

Padrão: viewport 720x1280, depois ampliado para 1080x1920 com lanczos: aparência de smartphone grande, letras legíveis, qualidade um pouco suave mas suficiente para Reels.
Para máxima nitidez: "viewport": {"width":1080,"height":1920} (layout de desktop, letras menores).
Para gravar na horizontal e depois cortar para vertical: "viewport": {"width":1280,"height":720}, "cropTo916": true (pode usar "cropX": 200 para definir o ponto de corte), saída ainda 1080x1920, mas apenas a faixa central; geralmente não é tão bom quanto usar viewport vertical diretamente.

Inserir no vídeo final

stock-footage-reel: no shots.json, escreva para a tomada: "pick": {"source":"file","path":"/abs/clip01.mp4","license":"Gravação de tela de <site>","author":"<proprietário do site>"}
OpenMontage (via openmontage-house): use como clipe local (local clip) na lista de materiais, ou como fonte de gravação real no fluxo screen-demo.
Regras da casa permanecem: vertical 1080x1920, narração Sarah Explains, legendas principais em chinês tradicional + inglês pequeno, capa Vox do B clip, vídeo IG com menos de 45 MB.
Adicione uma entrada no credits.json: {"source":"screen-record","credit":"Gravação de tela de <site>","url":"<URL>","recorded":"AAAA-MM-DD"}; nos créditos finais, escreva "Gravação de tela de ".
Como está gravando o site de outra pessoa: use apenas como material de apresentação / crítica; não grave conteúdo com dados pessoais, mensagens privadas ou paywall.

bounce12340/josh-video-skills

O que é josh-video-skills?

Perguntar na sua IA favorita

Documentação