How to export fabricJS canvas in video format like mp4 with sound? [duplicate]

问题

I'm trying to create an app using fabricJS which would allow the user to add a video on the canvas and some texts on it. I have achieved this till adding video & texts on the canvas. but I can't get any idea to export the canvas to mp4 format.

The expected output is like, video is playing in background and there is a text on the video at a speific position.

is there any solution that can help me to achieve this?

There's a video added on the canvas, I want to export this canvas including the sound of video.

here is the snippet

$(document).ready(function() {

    canvas = new fabric.Canvas('c');
    canvas.setWidth(480);
    canvas.setHeight(360);

    var video1El = document.getElementById('video1');
    var video1 = new fabric.Image(video1El, {
      left: 0,
      top: 0
    });

    canvas.add(video1);
    video1El.load();

    $(document.body).on('click', '#play' ,function(){
     var iText = new fabric.IText("sample text", {
                fill: 'red',
                fontSize: 60,
                left: 10,
                top: 10
            })
            canvas.add(iText);
        video1El.play();
    });
    
    $(document.body).on('click', '#exportvideo' ,function(){
     //code to export canvas as video
    });

    fabric.util.requestAnimFrame(function render() {
      canvas.renderAll();
      fabric.util.requestAnimFrame(render);
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>
<button id="play">play</button>
<button id="exportvideo">Export as video</button>
<canvas id="c" width="300" height="300"></canvas>
<video crossorigin="anonymous" id="video1" style="display: none" class="canvas-img" width="480" height="360">
  <source id="video_src1" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

回答1:

A quick search engine consultation helps a lot.

You will have to capture a lot of pictures frame by frame and glue them back together into a video.
You also will have to add the original audiotrack of the source video to your new video.

some search results that may help you out:
one two three four

来源：https://stackoverflow.com/questions/54266023/how-to-export-fabricjs-canvas-in-video-format-like-mp4-with-sound

标签

canvas

video

fabricjs