【发布时间】：2021-01-23 17:27:14
【问题描述】：
我有一个奇怪的要求，我需要将 svg 元素捕获为视频流。基本上它是一个绘图应用程序，当用户用笔绘图时，绘图显示为 svg 元素。我需要录制一段视频，就像屏幕录像机的工作方式一样，除了应该只录制包含 svg 元素的 div 之外。我有哪些选择？我怎样才能做到这一点？另一个重要的事情是整个记录应该在服务器上可用而不会出现故障或损失尽可能少。
【问题讨论】：
-
虽然也不是不可能，但是会很占内存。基本上，您需要做的是将您在其中绘制的整个 SVG 转换为图像。该图像将代表单个帧。然后应该将图像绘制到能够创建流的画布中。然后应该使用
MediaRecorder实例记录流，该实例反过来获取流并将其转换为视频。但问题是，您必须从 SVG 中为每一帧创建如此多的图像，除非您很聪明，否则会阻塞内存。 -
只使用画布来绘制和捕获流会更容易。它将为您节省许多步骤，并且性能更高。你有什么选择？
-
@EmielZuurbier 如果我通过 websocket 发送 svg 数据和时间戳并在服务器上使用 puppeteer js 模拟它并以某种方式记录它会怎样？因为传输由媒体记录器 api 生成的视频文件听起来像是要上传到服务器的大量数据，并且带宽是客户端的限制。更不用说要求在服务器上进行录制并且故障率非常低，并且从客户端浏览器上传大型视频文件并不是最佳选择，因为用户肯定会终止上传。
-
在前端创建视频与在后端创建视频相同。问题是您必须为 SVG 的每一帧拍照，然后记录每张图片，从而导致数据量翻倍。这完全取决于用户绘画的时间。但如果带宽是一个限制条件，那么当前使用的方法可能会出现问题。但是，嘿，除非您尝试过，否则您不会真正知道。
-
WebSockets 提案似乎很有趣。它可能会减轻前端的负担，但可能无法保证稳定的帧速率，因为数据将在 SVG 元素转换后发送。而且越复杂，可能需要的时间就越长。
标签： javascript html node.js websocket