Paint Frame Reel Renderer

Que fait Paint Frame Reel Renderer ?

Affiche des trames vidéo verticales pixel-parfaites en 1080x1920 dans Chrome headless, construit un script de démultiplexage concat FFmpeg minuté et encode le fichier MP4 H.264 final avec audio AAC 320 kbps.

flowchart TD
    A[Interface Canvas Web 1080x1920] --> B[Capture Headless Puppeteer]
    B --> C[Captures d'écran des phases visuelles]
    C --> D[Script Concat Demuxer]
    D --> E[Encodage FFmpeg libx264 + AAC + faststart]
    E --> F[Reel MP4 terminé]

Pourquoi Puppeteer + Concat Demuxer ?

• Zéro image perdue : Élimine les images perdues et les à-coups de l'enregistrement d'écran.
• Précision microseconde : Chaque mot ou état de trame reçoit une durée flottante exacte en secondes.
• Ondulation d'encre turbulente : Utilise les filtres SVG feTurbulence et feDisplacementMap avec des graines rotatives pour donner une vie de marqueur dessiné à la main au texte statique.
• Vitesse : L'encodage s'exécute à une vitesse 3x à 6x par rapport à l'enregistrement d'écran en temps réel.

Structure du script de rendu principal

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

// 1. Lancer Puppeteer en 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. Capturer les états de mots/lignes
const concatLines = [];
for (const line of linesData) {
  // Capture d'écran...
  concatLines.push(`file '${framePath}'`);
  concatLines.push(`duration ${duration.toFixed(3)}`);
}

// 3. Exigence du démultiplexeur concat (répéter la dernière image)
concatLines.push(concatLines[concatLines.length - 2]);
fs.writeFileSync('concat.txt', concatLines.join('\n'));

// 4. Encoder avec 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
]);

Règles d'optimisation clés

1. Dévoilements rapides : Les animations de dévoilement ne doivent pas dépasser 0,24 s pendant un chant rapide.
2. Facteur d'échelle de l'appareil : Définir deviceScaleFactor : 1 pour garantir une résolution exacte 1080x1920 sans gonflement de mémoire.
3. +faststart : Toujours inclure -movflags +faststart pour que les reels soient mis en mémoire tampon instantanément sur Instagram et Telegram.