优化 1920x1080 画布录制的性能答案

【问题标题】：Optimize performance of 1920x1080 canvas recording优化 1920x1080 画布录制的性能
【发布时间】：2020-06-23 21:59:15
【问题描述】：

我想使用 MediaRecorder API 制作一个基本的画布记录器来记录 webGL（或其他）画布。

我希望最终视频的大小为 1920x1080（即使实际分辨率较低，我也可以按比例放大）。

问题是，当我尝试加载 1920x1080 的画布并使用 WebGL 进行屏幕录制时，结果非常紧张和不稳定，就像，非常（即使它确实记录了它，但不稳定等等）。我想要的只是视频的最终尺寸为 1920x1080，即使它实际上质量较低，我需要它在浏览器中实时播放，而不是断断续续。所以：

【问题讨论】：

记录图像（甚至是屏幕）是一项非常密集的操作。即使您尝试记录屏幕的一部分，大多数笔记本电脑也会给您不稳定的结果。这真的取决于你的硬件，但我建议缩小画布的大小，然后用插值放大它（这可能在录制后发生）。
理想情况下，您希望缩放输出视频流，而不是缩放输入数据
@LJᛃ 你是什么意思？如何在不缩放画布的情况下缩放画布流？
要清楚，即使是现场动画也是不稳定的还是只有录制的？如果是前者，它在不流式传输时是否运行流畅？画一些不太密集的东西会重现同样的问题吗？所有浏览器+编解码器都会发生这种情况吗？你能设置一个minimal reproducible example吗？
@Kaiido 它只是用 1920x1080 制作了一个画布，在上面绘制任何东西，但主要是 wegl。它在录制开始之前运行有点不稳定，虽然可以管理，但是当canvas.captureStream() 被调用时，一切都非常不稳定/难以管理。到目前为止，我只在 chrome 和 firefox 中对此进行了测试，并得到了相同的结果

【解决方案1】：

在 webgl 方式中，您可以使用 webGlContext.viewport(0, 0, width, height); 设置的片段大小，宽度/高度值更小，质量更低，速度更快）

【讨论】：

【解决方案2】：

您是否尝试过减小画布大小，但保持 css 样式大小？

<canvas width="192" height="108" style="width:1920px; height:1080px" />

【讨论】：

【解决方案3】：

“有什么方法可以让 webGL 画布更大，同时保持与更小尺寸相同的性能？”

如果 “更大” 你的意思是占据更多的页面，答案是肯定的。只需将 CSS 宽度和高度属性设置为您希望的大小，同时保持画布宽度和高度属性不变。在限制范围内，这对性能没有影响。

如果 “更大” 您的意思是增加画布的分辨率，那么答案是否定的。无论您使用哪种 GPU，它们都具有可以渲染像素的速率，像素数量的任何增加都将导致渲染给定场景所需的时间更长。唯一的选择是升级硬件。

“有没有办法让 mediarecorder API 录制比它当前正在捕获的流（在本例中为画布流）分辨率更高的视频？”

不！而且永远不会有，因为没有必要。这是几乎所有媒体播放 API 的自动功能。当媒体内容呈现到屏幕上时，它会缩放到用户/应用程序希望的大小。

有些技术可以升级（在像素之间插入）媒体内容，但它们都是播放技术。

对于高档光线追踪内容（基于 GPU 的深度卷积神经网络）的 GPU 进行了积极的研究。但是，它在实验性 GPU 之外不可用（通过任何标准化 API），并且可能需要数年时间才能将硬件推向市场（如果有的话）。

减少录制卡顿。

您所能做的就是减少硬件上的工作量。

以较低的分辨率将场景渲染到帧缓冲区。然后以所需的分辨率将该缓冲区渲染到画布上。根据场景，您还可以在将帧缓冲区渲染到画布时尝试简单的upscale algorithm。
降低 GPU 的质量设置。
降低场景复杂度。
通过网络工作者渲染场景。
使用 webGL2 而不是 webGL。
确保浏览器设置为最佳捕获。例如，在 chrome 上转到 flags 搜索与媒体捕获相关的任何选项。再次在 chrome 上转到 GPU 以检查是否存在与 GPU 相关的任何问题。对于其他浏览器，请查看他们的帮助以查找类似页面。
使用不同的法典进行实验，以找到最能捕捉场景的一种。
降低录制帧率。
确保硬件运行精益。（停止所有不需要的进程）
使用更好的硬件。

【讨论】：

我的意思是计算机本身有 16gb 的内存，它只是在浏览器上比较慢
@bluejayke 除了最低需求外，RAM 几乎没有区别。问题在于 GPU 或集成 GP 以及 CPU 和相关硬件的性能。您是否尝试过第三方原生捕获应用程序来捕获页面内容（如果可以选择？）
是的，我已经尝试过 3rd 方捕获（甚至是 getdisplaymedia，它的速度要快很多），但问题是它无法捕获 1920x1080，因为我的实际屏幕尺寸小于那个...那我该怎么办？
“不！永远不会有，因为没有必要。” There will be, there will be...