在后端录制HTML5 WebGL的视频

Question

对于不支持HTML5 WebGL的浏览器，是否可以录制HTML5 WebGL视频播放的视频（包括声音）？例如，是否有可能在后台录制SeriouslyJS（http://seriouslyjs.org/）的内容，这种格式将被大多数浏览器/设备所接受？

我做了很多后端的东西，但从来没有涉及到后端GUI的东西......我感谢任何人都可以给我的帮助。

Answer 1

您可以使用屏幕截图软件（如ScreenFlow）录制一个或多个静态视频，然后将其作为视频呈现给未启用的浏览器。在JavaScript方面，你需要“回退”到视频。伪代码随之而来：

var canvas = document.getElementByID('webgl-canvas'); 
var webgl = canvas.getContext("experimental-webgl"); 
if (!webgl) { 
    /* 
    create a <video> element and replace the <canvas> 
    tag with it. Or, have the <video> tag already 
    created and hidden with CSS, and display it at this 
    time. 
    */ 
} else { 
    /* 
    Proceed with the interactive, WebGL-enabled version. 
    */ 
} 

但是，视频显然会受到技术的限制：这是一个预重新编码，非交互式视频。为了实现伪交互式风格（只要按下按钮即可），您可以使用HTML5 media API在多个预先录制的视频之间动态切换，但我不知道这会在多大程度上起作用由于带宽和同步问题而实践。您可能需要验证每个视频在启动序列之前是否有可接受的缓冲量。

注意：上面的提议假定至少支持HTML5，即使代替WebGL。如果您的目标浏览器不支持HTML5，我认为您可能会遇到像YouTube视频一样简单的问题。

Answer 2

此问题的答案可能是in this blog post。作者使用canvas.toDataURL（）方法将每个帧发送到他创建的简单node.js实例。 node.js实例将每个帧保存为PNG文件。在保存所有帧之后，作者似乎使用类似ffmpeg的内容从图像生成视频。然后，您可以将此视频作为实际动画的替代品。这是一个很好的解决方法，但对作者来说似乎很好。