Saved video is very different from actual animation
Liting1 opened this issue · 0 comments
Liting1 commented
I tried to draw the animation using Canvas and save it by converting it to MP4.
But the saved MP4 is too different from the actual animation
node: 12.20.2
node-canvas: 2.8.0
ffmpeg-stream: 0.7.0
const converterInput = converter.createInputStream({ f: "image2pipe", r: 20 });
converter.createOutputToFile("out.mp4", {
vcodec: "libx264",
pix_fmt: "yuv420p",
});
const convertingFinished = converter.run();
let i = 0;
let timer = null;
const keyframes = () => {
console.log(i);
const canvas = this.scene.snapshot();
const stream = canvas.createJPEGStream({quality: 1, progressive: false, chromaSubsampling: true});
stream.on('end', () => {
i++;
if(i>= 150) {
clearTimeout(timer);
converterInput.end();
} else {
timer = setTimeout(keyframes, 1000 / 20);
}
console.log('end');
});
stream.pipe(converterInput, {end: false}).on('error', (err) => {
if(err) console.log(err);
});
}
keyframes();
await convertingFinished
}```
Hope to be able to optimize repair。thank you