Very fast playback of the rendered html file in Puppeteer

Viewed 125

I want to convert an existing html file to a video file.

To do this, I use puppeteer and an algorithm I wrote takes screenshots and converts them to video with ffmpeg.

This system works, but the resulting video plays the 6-second animation in the HTML file in 1 second.

I couldn't find a reason why.

const { spawn } = require('child_process');
const puppeteer = require('puppeteer');

const myFunc = async () => {

    const browser = await puppeteer.launch(
        {
            headless: true
        }
    );

    const page = await browser.newPage();

    await page.goto(`file:${path.join(__dirname, 'index.html')}`,
        {
            waitUntil: 'networkidle0'
        });

    const args = [
        '-y', '-f',
        'image2pipe', '-r',
        '24', '-i',
        '-', '-c:v',
        'libvpx', '-auto-alt-ref',
        '0', '-pix_fmt',
        'yuva420p', '-metadata:s:v:0',
        'alpha_mode="1"', 'output3.webm'
    ];
    const ffmpeg = spawn('ffmpeg', args);

    const closed = new Promise((resolve, reject) => {
        ffmpeg.on('error', reject);
        ffmpeg.on('close', resolve);
    });

    for (let i = 1; i <= 24 * 6; i++) { // 6 Seconds
        let screenshot = await page.screenshot({ omitBackground: true });

        await write(ffmpeg.stdin, screenshot);
    }

    ffmpeg.stdin.end();

    await closed;
}

const write = (stream, buffer) =>
    new Promise((resolve, reject) => {
        stream.write(buffer, error => {
            if (error) reject(error);
            else resolve();
        });
    });
0 Answers
Related