Gravação de Tela e Demonstrações
Uma gravação scriptada é repetível. Quando a interface do usuário muda, você executa o script novamente em vez de regravar manualmente.
Escolha o método
| Situação | Método |
|---|---|
| Aplicação web que pode ser aberta em um navegador | Gravação scriptada com Playwright |
| Aplicação desktop ou fluxo de trabalho em tela cheia | Gravador do SO (OBS Studio, Windows Game Bar, macOS Screenshot) |
| Código fonte da aplicação está disponível e deseja-se um resultado polido e sem glitches | Reconstruir telas como componentes estáticos no Remotion (veja remotion-programmatic-video) |
| CLI | Gravador de terminal (asciinema, VHS) ou um componente de terminal animado |
Gravação com Playwright (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) # deixe o espectador ler
page.get_by_role("button", name="Sign in").click()
page.get_by_label("Email").type("[email protected]", delay=60) # digitação visível
page.wait_for_timeout(1200)
ctx.close() # vídeo é finalizado ao fechar
browser.close()
A saída é WebM. Converta:
ffmpeg -i recordings/xyz.webm -c:v libx264 -crf 18 -pix_fmt yuv420p -r 30 out/demo.mp4
Deixe com boa aparência
- Dados de demonstração: use uma conta demo pré-estabelecida com dados realistas e não sensíveis. Nunca grave dados reais de clientes, tokens ou e-mails.
- Janela: viewport fixo 1920x1080, esconda barras de favoritos e notificações, zoom leve (110 a 125 por cento) para que o texto seja legível em um celular.
- Ritmo: pause de 0,5 a 1 segundo após cada ação. Digite com um atraso. Evite saltos instantâneos.
- Cursor: Playwright não desenha um cursor. Injete um cursor pequeno no DOM ou adicione um na pós-produção (Remotion ou uma sobreposição).
- Determinismo: aguarde por
expect(locator).to_be_visible()em vez de tempos fixos de espera, depois adicione pausas intencionais para os espectadores. - Segredos: desfoque ou mascare campos no script da página (
page.add_style_tag) antes de gravar.
Pós-produção
# Corte tempo morto: mantenha de 12 s a 41 s
ffmpeg -ss 12 -i demo.mp4 -t 29 -c:v libx264 -crf 18 out/trimmed.mp4
# Acelere esperas enfadonhas (ex.: 4x de 20 s a 30 s) precisa de divisão; o mais simples é cortar, acelerar, reunir
# Zoom em uma região: recorte e depois redimensione (x:y:w:h em pixels da fonte)
ffmpeg -i demo.mp4 -vf "crop=960:540:480:270,scale=1920:1080" out/zoom.mp4
Para zoom/pan animado suave seguindo o cursor, use Remotion (interpolate em scale e translate).
Sincronizar com narração
- Escreva o roteiro primeiro (
video-planning), grave a narração (voiceover-tts). - Grave a tela, depois ajuste a velocidade por cena para que cada ação corresponda à sua frase. Calcule
velocidade = segundos_gravados / segundos_narração. - Use receitas de velocidade no
ffmpeg-essentialsou reajuste dentro da composição.
Lista de verificação
- Nenhum dado pessoal, chaves de API ou URLs internas visíveis.
- Texto legível em 1080p quando redimensionado para tela de celular.
- Nenhum spinner de carregamento com mais de 1 segundo restante.
- Áudio da máquina mudo, a menos que desejado.