Javascript 人造视频播放器的画布vs图像

我有一个服务器，生成PNG非常迅速，我需要把它变成一个穷人的视频饲料。实际上，创建视频提要不是一个选项

我现在正在做的是一个递归循环，看起来有点像这样（在伪代码中）：

这是可行的，但是过了一段时间，浏览器就会崩溃（谷歌浏览器，大约10分钟后）。这些图像更新非常频繁（每秒几次）。图像似乎正在缓存，这会导致浏览器内存不足

以下哪种解决方案可以在保持快速刷新的同时解决问题：

• 带有drawImage的HTML5画布
• HTML5画布，带

  画布像素阵列

  （原始像素操作）

我可以以UINT8数组的形式访问原始二进制文件，并且图像不会太大（小于50 kb左右，720 x 480像素）

或者，是否有办法从缓存中清除旧图像或完全避免缓存？

编辑：

注意，这不是供普通用户使用的工具。它是工程师诊断模拟硬件问题的工具。使用浏览器的原因是平台独立性（应在Linux、Windows、Mac、iPad等平台上工作，无需任何软件更改）。

如果“电影”是数据驱动的（即基于数字和计算），则可以将更多数据作为文本推送到浏览器中，然后让javascript将其客户端呈现到电影中。然后，客户机中的“播放器”可以根据需要批量请求数据

如果没有，您可以做的一件事就是简单地限制脚本的每秒帧数（fps），可能是硬编码值，或者是滑块/可设置值。假设这不会限制该工具的实用性，至少它会让浏览器在没有崩溃的情况下运行更长的时间

最后，可以使用标题（例如.htaccess文件中的标题）执行许多操作，以指示浏览器缓存或不缓存内容。

崩溃是由于。尝试创建对象URL（使用XHR2

responseType=“arraybuffer”

以及

BlobBuilder

）并在加载下一帧后撤消（使用

URL.revokeObjectURL

）上一帧

---

编辑：您真的应该在服务器端将这些视频流处理成实时的低fps视频流，这将大大减少延迟并加快加载时间。

@Eli Grey似乎已经确定了崩溃的原因。看起来他们正在进行修复，所以如果你不想修改你的方法，希望很快就能解决

关于你的另一个问题，如果可以的话，你一定要坚持使用

drawImage（）

。如果我了解您打算使用

CanvasPixelArray

，您是否正在考虑对画布中的每个像素进行迭代，并使用新的像素信息对其进行更新？如果是这样，这将远远不如

drawImage（）

那么有效。此外，这种方法对您来说完全没有必要，因为您（大概）不需要引用前一帧中的数据

不管幸运与否，您都无法直接交换存储在HTML5画布中的内部

CanvasPixelArray

对象。如果有格式正确的像素数据数组，则更新画布元素的唯一方法是调用

drawImage（）

或

putImageData（）

。现在，

putImageData（）

比

drawImage（）

慢得多，您可以在这里看到：。如果您的视频帧中有任何类型的透明度，您可能需要清除画布，然后使用

drawImage（）

（否则，您可能会看到以前的帧）

---

说了这么多，我不知道你真的需要用画布来做这个。你考虑使用画布的动机是为了避免缓存（现在这似乎不是你的根本问题）吗？。。尽管如此，我还是建议使用Flash/视频或HTML5/视频

因为WebKit很容易崩溃，即使是中等数量的图像，无论是大图像还是大量的小图像

从另一方面看，使用base64图像数据或像素阵列的XHR可能会起作用。我有一个短轮询应用程序，它能够在XHR轮询服务器上每10秒运行10-12小时

此外，考虑增量压缩，例如，如果它的横坐标是时间尺度的直方图，你只能从RIGTH发送一小片，当然，对于像热图那样的东西，你不能这样做。 这些图像更新非常频繁（一年更新几次） 第二）

---

。。如果以如此高的速度更新是至关重要的，那么您必须使用。

我真的不明白为什么有人希望在浏览器上每秒更新几张PNG图片。你应该考虑使用某种更新的GIF……考虑工业级数据。对于普通用户来说，它不是一件漂亮的东西，而是工程师诊断硬件问题的工具。我将编辑我的问题以反映这一点。从技术上讲，它是数据驱动的，但它相当复杂，发送计算它所需的所有数据将比图像本身更大。png由模拟设备的原始输出生成。这上面有一个很薄的数据层，但最终在客户端生成它的成本会高得多。这会避免缓存吗？我的印象是image.src错误是因为浏览器缓存了所有东西。我还没有读到这方面的内容，所以我不能确定。我不确定，但很可能不会缓存对象URL，因为它们已经是本地的。是的，是为了避免缓存，因为我认为这是导致崩溃的原因。它会运行大约10分钟左右，但最终会使整个浏览器崩溃（我假设内核级别的某些东西疯了并踢了它）。明白。那么，是的，我会重新推荐

function update() {
    image.src = imagepath + '?' + timestamp; // ensures the image will update
    image.onload = function () {update()};
}