关于html：将HTML5画布序列转换为视频文件


Convert HTML5 Canvas Sequence to a Video File

我想将HTML5画布中的动画转换为可以上传到YouTube的视频文件。 是否有任何一种屏幕捕获API或可以让我通过编程方式执行此操作的东西？

有一个whammy库，它声称可以使用JavaScript从静止图像中生成webm视频：
http://antimatter15.com/wp/2012/08/whammy-a-real-time-javascript-webm-encoder/

请注意，有一些限制(可以预料)。该编码器以webp图像格式为基础，当前仅在Chrome中支持(也许是新Opera，但我尚未检查)。这意味着您无法在其他浏览器中进行编码，除非您找到一种方法来首先对要用作webp图像的图像进行编码(有关此问题的可能解决方案，请参见此链接)。

除此之外，无法使用本机浏览器API从使用JavaScript和canvas的图像创建视频文件。

Firefox具有试验性功能(默认情况下处于禁用状态)，称为HTMLCanvasElement.captureStream()

本质上，它将画布元素捕获为视频流，然后可以使用RTCPeerConnection()将其发送到另一台计算机，或者您可以使用YouTube Live Streaming API直接进行流传输。

请参阅：https：//developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream

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

命令行上的FileSaver.js + ffmpeg

使用FilSaver.js，我们可以将每个画布框架下载为PNG：从Blob保存到本地文件

然后，我们从命令行使用ffmpeg将PNG转换为任何视频格式：如何使用FFmpeg从图像创建视频？

Chromium 75询问您是否要保存多个图像。然后，一旦您说"是"，它就会自动在下载文件夹下分别命名为0.png，1.png等的图像。

它也可以在Firefox 68中使用，但效果不佳，因为浏览器打开了一堆"您是否要保存此文件"窗口。他们确实有一个"对类似下载执行相同操作"弹出窗口，但是您必须快速选择它并按Enter，否则就会出现一个新的弹出窗口！

要停止它，您必须关闭选项卡，或添加一个停止按钮和一些JavaScript逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var pixel_size = 1;
var t = 0;

/* We need this to fix t because toBlob calls are asynchronous. */
function createBlobFunc(t) {
  return function(blob) {
    saveAs(blob, t.toString() + '.png');
  };
}

function draw() {
    console.log("draw");
    for (x = 0; x < canvas.width; x += pixel_size) {
        for (y = 0; y < canvas.height; y += pixel_size) {
            var b = ((1.0 + Math.sin(t * Math.PI / 16)) / 2.0);
            ctx.fillStyle =
               "rgba(" +
                (x / canvas.width) * 255 +"," +
                (y / canvas.height) * 255 +"," +
                b * 255 +
               ",255)"
            ;
            ctx.fillRect(x, y, pixel_size, pixel_size);
        }
    }
    canvas.toBlob(createBlobFunc(t));
    t++;
    window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
1
2
<canvas id="my-canvas" width="512" height="512" style="border:1px solid black;"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js">

GitHub上游。

以下是使用此图像到GIF输出的图像：https://askubuntu.com/questions/648244/how-do-i-create-an-animated-gif-from-still-images-preferably-with-the-command-升

enter image description here

如果FPS太高，则会跳过帧

这可以通过在上面的演示中减小画布的大小来加快速度来观察。在32x32分辨率下，我的Chromium 77以大约10个文件的块的形式下载，并且在此之间跳过了大约50个文件...

不幸的是，没有办法等待下载完成...在FileSaver.js中保存文件后关闭窗口

因此，我可以看到的唯一解决方案是帧率限制...使用requestAnimationFrame控制fps？这是一个现场演示：https://cirosantilli.com/#html-canvas

也许有一天有人会回答：

  • JavaScript中的H.264视频编码器
  • 在浏览器中运行ffmpeg-选项？

然后我们就可以直接下载视频了！

如果您确定浏览器不适合您，则这是OpenGL版本：-)如何使用GLUT / OpenGL渲染到文件？

在Ubuntu 19.04中测试。

这应该会有所帮助，它允许您删除一些图像，这些图像先转换为HTML5 CANVAS，然后转换为webm视频：http://techslides.com/demos/image-video/create.html