Pavan-makwana/My-Agentic-Skills

Paint Frame Reel Renderer

Renderiza quadros de vídeo verticais pixel-perfeitos em 1080x1920 no Chrome headless, cria um script de demuxer de concatenação FFmpeg com microtempo e codifica o MP4 final em H.264 com áudio AAC 320kbps.

flowchart TD
    A[Interface Canvas Web 1080x1920] --> B[Captura Headless Puppeteer]
    B --> C[Capturas de Tela de Fase Visual]
    C --> D[Script Demuxer de Concatenação]
    D --> E[Codificação FFmpeg libx264 + AAC + faststart]
    E --> F[Reel MP4 Finalizado]

Por que Puppeteer + Demuxer de Concatenação?

• Zero Quadros Perdidos: Elimina quadros perdidos e tremulação de gravação de tela.
• Precisão de Microssegundos: Cada palavra ou estado de quadro recebe uma duração float exata em segundos.
• Ondulação por Turbulência: Usa feTurbulence e feDisplacementMap do SVG com sementes rotativas para dar vida de marcador desenhada à mão ao texto estático.
• Velocidade: A codificação roda a 3x–6x a velocidade real em comparação com gravação de tela 1x.

Estrutura do Script de Renderização Principal

const puppeteer = require('puppeteer-core');
const { spawnSync } = require('child_process');

// 1. Iniciar Puppeteer em 1080x1920
const browser = await puppeteer.launch({
  executablePath: CHROME_PATH,
  args: ['--no-sandbox', '--disable-gpu']
});
const page = await browser.newPage();
await page.setViewport({ width: 1080, height: 1920, deviceScaleFactor: 1 });
await page.goto('file:///' + HTML_PATH);

// 2. Capturar Estados de Palavras / Linhas
const concatLines = [];
for (const line of linesData) {
  // Capturar screenshot...
  concatLines.push(`file '${framePath}'`);
  concatLines.push(`duration ${duration.toFixed(3)}`);
}

// 3. Requisito do Demuxer de Concatenação (repetir último quadro)
concatLines.push(concatLines[concatLines.length - 2]);
fs.writeFileSync('concat.txt', concatLines.join('\n'));

// 4. Codificar com FFmpeg
spawnSync(FFMPEG_PATH, [
  '-f', 'concat', '-safe', '0', '-i', 'concat.txt',
  '-ss', String(audioStartOffset),
  '-i', songAudioPath,
  '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-r', '30',
  '-c:a', 'aac', '-b:a', '320k',
  '-shortest', '-movflags', '+faststart',
  '-y', outputMp4Path
]);

Principais Regras de Otimização

1. Revelações Rápidas: Animações de revelação não devem exceder 0,24s durante canto rápido.
2. Fator de Escala do Dispositivo: Defina deviceScaleFactor: 1 para garantir resolução exata de 1080x1920 sem inchaço de memória.
3. +faststart: Inclua sempre -movflags +faststart para que os reels tenham buffer instantâneo no Instagram e Telegram.