问后台录制HTML5 WebGL视频

EN

您可以使用屏幕捕获软件(如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视频这样简单的东西卡住。

这个问题的答案可能是in this blog post。作者使用canvas.toDataURL()方法将每个帧发送到他创建的一个简单的node.js实例。node.js实例将每个帧另存为PNG文件。保存完所有帧后，作者似乎可以使用ffmpeg之类的工具从图像中生成视频。然后，您可以将此视频用作实际动画的替代方案。这是一个相当不错的变通方法，但似乎对作者来说效果很好。