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