如何导出带声音的mp4等视频格式的fabricJS画布？ [英] How to export fabricJS canvas in video format like mp4 with sound?

问题描述

我正在尝试使用fabricJS创建一个应用，该应用将允许用户在画布上添加视频并在其中添加一些文本。在添加视频和视频之前，我已经做到了在画布上的文字。但是我不知道将画布导出为mp4格式。

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.

这是代码段

$(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>

推荐答案

快速的搜索引擎咨询很有帮助。

您将必须逐帧捕获很多图片，然后将它们重新粘贴到视频中。

您还必须添加源视频的原始音轨到新视频。

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

这篇关于如何导出带声音的mp4等视频格式的fabricJS画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！