Saving animations to video

[i-prikot]

https://jsfiddle.net/i_prikot/o2zmtkfq/

Saving animation to video file using Promise , MediaRecorder and StaticCanvas. On fabric.StaticCanvas transfer the objects from the fabric.Canvas and use the canvas captureStream() to capture video content canvas in real time.

The animation start method must be async. It's easy to do this with a Promise and callback function onComplete from fabric.Object.animate(property, value). We need this so that after the animation has played, we stop recording the video.

The MediaRecorder.ondataavailable event handler handles the dataavailable event, letting you run code in response to Blob data being made available for use. We just have to collect all the parts of the Blob that the MediaRecorder will return and save it to a file.

  function downloadVideo(chunks) {
    const blob = new Blob(chunks, { 'type' : 'video/mp4' });
    const videoURL = URL.createObjectURL(blob);
    const tag = document.createElement('a');
    tag.href = videoURL;
    tag.download = 'sample.mp4';
    document.body.appendChild(tag);
    tag.click();
    document.body.removeChild(tag);
  }

  function enlivenObjects(elements) {
    return new Promise(function (resolve) {    	
      fabric.util.enlivenObjects(elements, function (objects) {
        resolve(objects);
      })
    })
  };
  
  const canvasElement = document.createElement("canvas")
  const staticCanvas = new fabric.StaticCanvas(canvasElement, { 
    width: canvas.width, 
    height: canvas.height, 
    backgroundColor: canvas.backgroundColor,
    skipOffscreen: false
  });

  enlivenObjects(canvas.toObject().objects).then((objects) => {
    staticCanvas.add.apply(staticCanvas, objects);
    const canvasStream = staticCanvas.lowerCanvasEl.captureStream(30);
    const mediaRecorder = new MediaRecorder(canvasStream, {mimeType: 'video/webm'});
    let chunks = [];

    mediaRecorder.onstop = function() {
      downloadVideo(chunks);
      chunks = [];
    };

    mediaRecorder.ondataavailable = function(e) {
      chunks.push(e.data);
    };

    mediaRecorder.start();

    let promises = [];

    staticCanvas.forEachObject(obj => {
      promises.push(obj.play());
    });

    Promise.all(promises).then(() => {
      mediaRecorder.stop();
      saving = false;
      videoBtn.innerText = "Save in video";
    })
  });

Demo

ice_video_20210706-003857.mp4

Final video

sample.mp4

http://fabricjs.com/fabric-intro-part-2#animation
https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream
https://developer.mozilla.org/en-US/docs/Web/API/Blob

[ssubham]

Can the animation of TEXT be saved in Video also?
As I am trying to create Text animation with this animation work and animation is working fine. But, creating video is giving error (Uncaught (in promise) TypeError: t.split is not a function).

While have taken plain Text to create and animate

A help will be great appreciated.

[asturur]

@ssubham , @i-prikot let a lot of resources and examples in his post.
That should be enough to solve your issue.
Where are you stuck at right now?

[ShaMan123]

@i-prikot this is amazing stuff.
I think it should be made an official demo from fabric.js website

[digitalframeph]

very awesome! this is what im looking for, but even if how many times i work around to make it work with animated text, i cant make it working. would you mind share how do you use that with animated text. thanks!

[i-prikot]

Hi. Look at an example https://jsfiddle.net/i_prikot/kq6p39h4/13/ This is a simple example, can serve as a starting point for your code.

[sagarvirani]

Hello @i-prikot. I am relatively new to fabric.js and have a smiliar issue. I have multiple images on a canvas and trying to save them in a single pdf file. I tried to use jspdf from cdn for my problem. When there is a single image it works fine but when there are multiple images on the canvas it throws an error (canvas is tainted). Can you please help me with my problem. Your help would be much appreciated.

[wienans]

hey @i-prikot, thanks for this example. But i am wondering for me the video length is shorter than the real video. The example says in its properties that the video is 0 seconds. Opening it with a video player is giving me a scroll bar of 0-1 seconds and i can not scroll through the whole video only the first second. If i play the video it will show the full 2 seconds of the video. Any idea why this happens i used your example container from your post.