CODEWITHSUNDEEP
javascriptfabricjsmediarecordercapturestream
DigitalFrame
DigitalFrame

Reputation: 11

How to export fabricjs canvas to high quality video using captureStream and MediaRecorder

I am exporting a video from fabricjs canvas using the following code. everything is working except the quality is very poor and sometimes pixelated specially when it contains images. but when i run the animation on browser everything is smooth and in a good quality, see example photo. please help. thanks

exported video

browser animation

 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';
  
          }

I try adding parameter on the capturestream as i believe it is for fps? but dint solve the problem.

Upvotes: 1

Views: 443

Answers (0)

Related Questions