How to save animation fabricjs in a video file?

Question

I have animated objects on the canvas. Can I save the animation, for example in the GIF or MP4? As an option to do save the animation frame by frame in the image using Fabric on Node.js Then merge pictures with ffmpeg

score 2 · Answer 1 · answered Nov 21 '18 at 09:56

Interesting question, although off-top and to broad and I would expect it to be closed (and a complete answer is not possible) You best bet would be to try and build something and ask for help when you get stuck.

fabric.js objects on a canvas are rendered to the canvas which is effectively a image and with animation, this image is just updated constantly...

you could try and take snapshots of the canvas and collate those on the server to try and create a gif or video

I have also just found this: How to save canvas animation as gif or webm? which might help

Thank. In the last link there is a very interesting library ccapture.js — user2306100, Nov 21 '18 at 10:15

score 0 · Answer 2 · answered May 15 '20 at 18:55

You can try MediaRecorder API like this

        var srcImg = "demo.png";
        var canvas = new fabric.Canvas('c');
        var canvas_to_capture = $('canvas#c')[0];
        var fps = 30, mediaRecorder;

        function create_stream(){
                var canvasStream = canvas_to_capture.captureStream(fps);
                //create media recorder from the MediaStream object
                mediaRecorder = new MediaRecorder(canvasStream);
                var chunks = [];
                mediaRecorder.ondataavailable = function(e) {
                    chunks.push(e.data);
                };
                //create dynamic video tag to 
                mediaRecorder.onstop = function(e) {
                    var blob = new Blob(chunks, { 'type' : 'video/mp4' });
                    chunks = [];
                    var videoURL = URL.createObjectURL(blob);
                    var tag = document.createElement('a');
                    tag.href = videoURL;
                    tag.download = 'sample.mp4';
                    document.body.appendChild(tag);
                    tag.click();
                    document.body.removeChild(tag);
                };
                //build the data chunk
                mediaRecorder.ondataavailable = function(e) {
                    chunks.push(e.data);
                };
                //start recording
                mediaRecorder.start();

        }

        function roll(){
            create_stream();
            fabric.Image.fromURL(srcImg, function (oImg) {
                canvas.add(oImg);
                oImg.set('left',0);
                oImg.set('top', 100);
                oImg.scale(.25);
                canvas.renderAll();

                // and then, we can animate the image    
                oImg.animate('left', 200, {
                    onChange: canvas.renderAll.bind(canvas),
                    onComplete: function(){
                        mediaRecorder.stop();
                    },
                });
            });
        }

<html>
    <canvas id="c" width="300" height="300"></canvas>
    <button onclick="roll()">Get</button>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</html>

How to save animation fabricjs in a video file?

2 Answers2