Question

我有一台服务器可以非常快速地生成png，我需要把它变成一个穷人的视频源。实际上，创建视频源不是一种选择。

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

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

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

这些解决方案中的哪一个可以在保持快速刷新的同时解决问题：

带有drawImage的HTML5画布
带CanvasPixelArray的HTML5画布（原始像素操作）

我可以访问原始二进制文件作为Uint8Array，图像不是太大（小于50 kb左右，720 x 480像素）。

或者，无论如何都要从缓存中清除旧图像或完全避免缓存？

编辑：

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

Answer 1

崩溃归因于http://code.google.com/p/chromium/issues/detail?id=36142。尝试创建对象URL（使用XHR2 responseType = "arraybuffer"和BlobBuilder）并在下一帧加载后撤消（使用URL.revokeObjectURL）前一帧。

编辑：你真的应该将它们处理成服务器端的实时低fps视频流，最终会大大减少延迟并加快加载时间。

Answer 2

@Eli Gray似乎已经确定了崩溃的来源。看起来他们在工作中有一个修复，所以如果你不想修改你的方法，希望很快就能解决。

关于你的其他问题，如果可以，你绝对应该坚持使用drawImage()。如果我理解您使用CanvasPixelArray的意图，您是否正在考虑迭代画布中的每个像素并使用新的像素信息更新它？如果是这样，那么无处接近效率drawImage()。此外，这种方法对您来说完全没必要，因为您（可能）不需要引用前一帧中的数据。

无论是否幸运，您都无法直接替换HTML5画布中存储的内部CanvasPixelArray对象。如果您具有格式正确的像素数据数组，则更新canvas元素的唯一方法是调用drawImage()或putImageData()。目前，putImageData()比drawImage()慢得多，正如您在此处所见：http://jsperf.com/canvas-drawimage-vs-putimagedata。如果您的视频帧中有任何透明度，您可能需要清除画布，然后使用drawImage()（否则您可以看到以前的帧）。

说了这么多，我不知道你真的需要使用画布。您是否有动力使用画布以避免缓存（现在这似乎不是您的潜在问题）？

Answer 3

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

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

最后，有很多事情可以通过标题（例如.htaccess文件中）来指示浏览器缓存或不缓存内容。

Answer 4

iPad，你说？..尽管如此，我建议使用Flash /视频或HTML5 /视频。

因为WebKit很容易因大量图像涌入而崩溃，无论是大图像还是大量小图像。

另一方面，XHR与base64图像数据或像素阵列MIGHT一起工作。我有一个短轮询应用程序，它可以每10秒使用XHR轮询服务器运行10-12个小时。

另外，考虑增量压缩，就像，如果横坐标是时间尺度的直方图 - 你只能从严格中发送一个切片，当然，对于像热图这样的东西，你不能这样做。

这些图像正在频繁更新（数次a 秒）。

..如果它以如此高的速率更新至关重要 - 你必须使用long polling。

Canvas vs Image为虚拟视频播放器

4 个答案: