Saved video is very different from actual animation

[Liting1]

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