0

我有一个简单的套接字服务器（socket.io），我通过它发送图像流，当在画布中设置像素数据（使用 putImageData）时，性能太低了。我尝试使用以下方法，

  • 阴影画布画出屏幕，然后回到主画布
    • 类型 1) 使用 drawImage 渲染屏幕画布
    • 类型 2) 使用屏幕外画布中的 getImageData 和主画布上的 putImageData
    • 类型 3) 从屏幕外使用 createImageData 并通过 putImageData 设置它
  • 在动画帧更新期间使用 requestAnimFrame 更新 UI

我还验证了我的服务器和客户端之间的消息延迟，两者都非常快，平均差异 < 50 毫秒（这对我的应用程序来说是可以的）。我还使用 base64 字符串从服务器发送图像，所有方法计算都非常快。根据我的观察，即使像素被操纵和设置，画布也需要自己的甜蜜时间来更新屏幕。还有一点是，我通过套接字接收到的图像是针对图像的不同区域而不是相同的区域。

我想我缺少一些基本设置，或者画布不是为此而设计的。

更新：我也尝试过在 Img 元素中使用 drawImage，然后在画布中使用，这只会增加很少的速度。一旦图像流开始流动，那么 UI 的更新速度就会非常缓慢。

4

1 回答 1

0

getImageData() 和 putImageData() 将图像数据从 GPU RAM 上传/下载到 CPU RAM。

相反，使用屏幕外<canvas>或<img>作为drawImage()图像源，不要执行任何 getImageData()。这样数据在解码后不会往返 GPU-CPU-GPU。

如果填充屏幕外画布是瓶颈，您还可以使用经过特殊调整的编解码器（未压缩的 PNG）在服务器端创建轻量级图像元素，以便压缩不会延迟处理过程。然后只需将此 PNG 数据流式传输为二进制 websocket 帧（无 b64）。

于 2013-07-19T07:23:53.273 回答