在 Puppeteer 中非常快速地播放渲染的 html 文件

Question

我想将现有的 html 文件转换为视频文件。

为此，我使用 puppeteer 和我编写的算法获取屏幕截图并使用 ffmpeg 将其转换为视频。

该系统有效，但生成的视频在 1 秒内播放 HTML 文件中的 6 秒动画。

我找不到原因。

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();
        });
    });