如何使用 captureStream 和 MediaRecorder 将 fabricjs 画布导出为高质量视频

Question

我正在使用以下代码从 fabricjs canvas 导出视频。一切正常，除了质量很差，有时在包含图像时会特别像素化。但是当我在浏览器上运行动画时，一切都很流畅且质量很好，请参见示例照片。请帮忙。谢谢

 var canvasStatic =  document.getElementById('canvas');
     const chunks = []; 
     const stream = canvasStatic.captureStream(30);
     const rec = new MediaRecorder(stream); 
           rec.ondataavailable = e => chunks.push(e.data);
           rec.onstop = e => exportBlob(chunks);
           rec.start();
           setTimeout(()=>rec.stop(), duration); // stop recording in x number of seconds <duration> 



     function exportBlob(blob) {

           /** processing the blob **/
          let blob = new Blob(blob, {type: 'video/mp4'})
            const vid = document.createElement('video');
            vid.src = URL.createObjectURL(blob);
            vid.controls = true;
            vid.autoplay = true;
        
            let a = document.createElement('a');
            a.download = 'title.mp4';
  
          }

我尝试在捕获流上添加参数，因为我相信它是针对 fps 的？但不能解决问题。