Criador de Vídeos de Demonstração

O que Criador de Vídeos de Demonstração faz?

Crie vídeos de demonstração de produtos polidos automatizando interações no navegador.

Visão Geral

1. Planeje a sequência da demo (páginas, interações, tempo)
2. Grave quadros usando o screencast CDP do Playwright
3. Codifique para vídeo com FFmpeg

Início Rápido

Pré-requisitos

• Navegador OpenClaw em execução (browser action=start profile=clawd)
• Aplicativo acessível via navegador (localhost ou remoto)
• FFmpeg instalado para codificação

Fluxo de Gravação

1. Inicie o navegador OpenClaw se não estiver em execução
2. Navegue até o aplicativo manualmente ou via browser action=open
3. Personalize scripts/record-demo.js para o aplicativo alvo
4. Execute: node scripts/record-demo.js
5. Codifique: bash scripts/frames-to-video.sh

Planejando uma Demonstração

Consulte references/demo-planning.md para orientação sobre:

• Estruturação de sequências de demonstração
• Tempo e ritmo
• Padrões de interação
• O que torna as demos cativantes

Scripts

scripts/record-demo.js

Script Playwright modelo que:

• Conecta ao navegador OpenClaw via CDP
• Inicia a captura de screencast (quadros JPEG)
• Executa a sequência da demo (navegação, cliques, hover, digitação)
• Salva os quadros no diretório de saída

Personalize para cada demo:

• Array DEMO_SEQUENCES - defina páginas e interações
• OUTPUT_DIR - onde salvar os quadros
• FRAME_SKIP - pular a cada N quadros (menor = mais quadros)

scripts/frames-to-video.sh

Script de codificação FFmpeg com predefinições:

• mp4 - H.264, bom equilíbrio qualidade/tamanho (padrão)
• gif - GIF animado para incorporação
• webm - VP9, arquivos menores

Uso: ./frames-to-video.sh [diretorio_entrada] [nome_saida] [formato]

Padrões de Interação

// Navegação
await page.goto('http://localhost/dashboard');
await page.waitForTimeout(2000);

// Clicar em elemento
await page.locator('button:has-text("Criar")').click();
await page.waitForTimeout(500);

// Hover (mostrar dicas, estados de hover)
await page.locator('.card').first().hover();
await page.waitForTimeout(1000);

// Digitar texto
await page.locator('input[placeholder="Pesquisar"]').fill('consulta');
await page.waitForTimeout(500);

// Pressionar tecla
await page.keyboard.press('Enter');
await page.keyboard.press('Escape');

// Rolar
await page.evaluate(() => window.scrollBy(0, 300));

Dicas

• Tempo: 2s no carregamento da página, 0,5-1s entre interações, 1,5s para mostrar resultados
• Pular quadros: Use 3-5 para vídeo suave, 8-10 para arquivos menores
• Qualidade: 85-90 de qualidade JPEG equilibra tamanho e clareza
• Resolução: O tamanho da janela do navegador determina a resolução de saída
• Loops: GIFs devem fazer loop perfeitamente - termine onde começou

Armadilhas

• Screenshots vs vídeo: Se o usuário só precisa ver um recurso, tire screenshots inline em vez de gravar um vídeo completo. Verifique browser action=tabs profile=clawd primeiro — se a aba do aplicativo já estiver aberta, capture screenshots diretamente sem um subagente.
• Limite de contexto: Loops de gravação com muitos screenshots consomem contexto rapidamente (limite de 200 mil tokens). Mantenha o escopo limitado: grave todos os quadros primeiro, depois analise — nunca intercale a captura de quadros com análise. Se o contexto estiver apertado, escreva os quadros no disco e analise em uma passagem separada.
• Risco de agente paralelo: Não inicie múltiplos agentes de demo concorrentemente na mesma aba do navegador — eles interferirão no estado de navegação uns dos outros.