Video key frames' quality is worse than the quality of regular frames

Question

What I'm doing:

1. get the image by file picker;
2. draw it on canvas in a loop using requestAnimationFrame;
3. record canvas by canvas.captureStream(30) + MediaRecorder.

The problem is that the keyframes of the recorded video (every 2 seconds) have worse quality than regular frames of the same video. So it flickers for a split second every 2 seconds of the video.

_mediaRecorder = new MediaRecorder(canvasMediStream, {
    mimeType: 'video/webm;codecs:h264',
    videoKeyFrameIntervalDuration: 2000
});

Video file: https://drive.google.com/file/d/146coILTmdTdPTfPCDmDN8SnD5BtX5GCA/view?usp=sharing

The regular frame:

Keyframe: