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询问您是否要保存多个图像。然后,一旦您说"是",它就会自动在下载文件夹下分别命名为
它也可以在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-升
如果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