将HTML5画布序列转换为视频文件

Question

我想将HTML5画布中的动画转换为可以上传到YouTube的视频文件。是否有任何类型的屏幕捕获API或其他东西可以让我通过编程来实现这一点？

Answer 1

有一个whammy库声称使用JavaScript从剧照中生成webm视频：
http://antimatter15.com/wp/2012/08/whammy-a-real-time-javascript-webm-encoder/

请注意，存在一些限制（正如预期的那样）。这个编码器基于webp图像格式，目前只有Chrome支持这种格式（也许新的Opera也支持，但我还没有检查）。这意味着您不能在其他浏览器中进行编码，除非您首先找到一种方法对要用作webp图像的图像进行编码（请参阅此链接以了解可能的解决方案）。

除此之外，没有办法使用JavaScript从图像中创建视频文件，也没有办法使用本地浏览器API从画布中创建视频文件。

Answer 2

Firefox有一个实验功能（默认禁用），称为HTMLCanvasElement.captureStream（）

本质上，它将画布元素捕获为视频流，然后可以使用RTPeerConnection（）将其发送到另一台计算机，或者您可以使用YouTube实时流媒体API直接流媒体。

见：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream

也：https://developers.google.com/youtube/v3/live/getting-started

Answer 3

使用MediaRecorderAPI解决了这个问题。它的构建正是为了做到这一点。

这里有一个解决方案，可以录制X毫秒的画布视频，您可以使用按钮UI扩展它，以启动、暂停、恢复、停止、生成URL。

function record(canvas, time) {
    var recordedChunks = [];
    return new Promise(function (res, rej) {
        var stream = canvas.captureStream(25 /*fps*/);
        mediaRecorder = new MediaRecorder(stream, {
            mimeType: "video/webm; codecs=vp9"
        });
        
        //ondataavailable will fire in interval of `time || 4000 ms`
        mediaRecorder.start(time || 4000);

        mediaRecorder.ondataavailable = function (event) {
            recordedChunks.push(event.data);
             // after stop `dataavilable` event run one more time
            if (mediaRecorder.state === 'recording') {
                mediaRecorder.stop();
            }

        }

        mediaRecorder.onstop = function (event) {
            var blob = new Blob(recordedChunks, {type: "video/webm" });
            var url = URL.createObjectURL(blob);
            res(url);
        }
    })
}