在后端录制 HTML5 WebGL 的视频

Posted 2023-02-19

【中文标题】在后端录制 HTML5 WebGL 的视频

【英文标题】：Record video of HTML5 WebGL on backend

【发布时间】：2012-07-13 22:13:45

【问题描述】：

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

我做过很多后端工作，但从来没有涉及后端 GUI...我感谢任何人能给我的帮助。

【参考方案1】：

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

【参考方案2】：

您可以使用截屏软件（例如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 视频这样简单的东西。