使用来自websocket的消息进行HTML5快速渲染

Question

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

• 阴影画布绘制屏幕，​​然后返回主画布
  • 类型1）使用drawImage渲染屏幕画布
  • 类型2）使用来自屏幕外画布的getImageData和主画布上的putImageData
  • 类型3）使用屏幕外的createImageData并通过putImageData
  进行设置
• 在动画帧更新期间使用requestAnimFrame更新UI

我还验证了我的服务器和客户端之间的消息延迟，这两者都非常快，差别为＆lt;平均50毫秒（这对我的应用来说没问题）。我还使用base64字符串从服务器发送图像，所有方法计算都非常快。从我观察到的是，即使像素被操纵和设置，画布也会花费很多时间来更新屏幕。还有一点是我通过套接字接收的图像是针对图像的不同区域而不是相同的区域。

我想我错过了一些基本设置，或者画布不适合这个。

更新： 我也尝试将drawImage用于Img元素然后再用于画布，这样可以提高速度。一旦图像流开始流动，那么UI中的更新速度也会非常慢。

Answer 1

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

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

如果填充屏幕外画布是瓶颈，您还可以使用专门调整的编解码器（未压缩的PNG）在服务器端创建轻量级图像元素，这样压缩就不会对进程造成延迟。然后将这个PNG数据作为二进制websocket帧（没有b64）流式传输。