javascript - 人造视频播放器的 Canvas 与图像

Question

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

我现在正在做的是一个看起来有点像这样的递归循环(伪代码):

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

这有效，但是过了一会儿，浏览器崩溃了(Google Chrome，大约 10 分钟后)。这些图像更新非常频繁(每秒几次)。图像似乎正在缓存，这导致浏览器内存不足。

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

• 带有 drawImage 的 HTML5 Canvas
• 带有 CanvasPixelArray 的 HTML5 Canvas (原始像素操作)

我可以访问作为 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)加载下一帧。

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