Pavan-makwana/My-Agentic-Skills

Paint Frame Reel Renderer

Rendert pixelgenaue 1080×1920 vertikale Videoframes in Headless-Chrome, erstellt ein mikrogesteuertes FFmpeg-Concat-Demuxer-Skript und codiert das finale H.264-MP4 mit 320kbps AAC-Audio.

flowchart TD
    A[Web Canvas UI 1080x1920] --> B[Puppeteer Headless Capture]
    B --> C[Visual Phase Screenshots]
    C --> D[Concat Demuxer Script]
    D --> E[FFmpeg Encoding libx264 + AAC + faststart]
    E --> F[Finished Reel MP4]

Warum Puppeteer + Concat Demuxer?

• Keine ausgelassenen Frames: Vermeidet ausgelassene oder verwackelte Frames, die bei Bildschirmaufnahmen auftreten.
• Mikrosekunden-Präzision: Jeder Wort- oder Frame-Status erhält eine exakte Float-Dauer in Sekunden.
• Turbulenz-Ink-Wiggle: Verwendet SVG feTurbulence und feDisplacementMap mit rotierenden Seeds, um handgezeichnete Marker-Bewegung in statischen Text zu bringen.
• Geschwindigkeit: Die Codierung läuft 3x–6x schneller als eine Echtzeit-Bildschirmaufnahme.

Kernstruktur des Render-Skripts

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

// 1. Puppeteer bei 1080x1920 starten
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. Wort-/Zeilen-Status erfassen
const concatLines = [];
for (const line of linesData) {
  // Screenshot erfassen...
  concatLines.push(`file '${framePath}'`);
  concatLines.push(`duration ${duration.toFixed(3)}`);
}

// 3. Concat Demuxer erfordert Wiederholung des letzten Frames
concatLines.push(concatLines[concatLines.length - 2]);
fs.writeFileSync('concat.txt', concatLines.join('\n'));

// 4. Mit FFmpeg codieren
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
]);

Wichtige Optimierungsregeln

1. Zackige Einblendungen: Einblend-Animationen dürfen bei schnellem Gesang 0,24s nicht überschreiten.
2. Geräte-Skalierungsfaktor: Setze deviceScaleFactor: 1, um die exakte 1080×1920 Auflösung ohne Speicherüberlauf sicherzustellen.
3. +faststart: Immer -movflags +faststart einfügen, damit Reels auf Instagram und Telegram sofort puffern.