Javascript 将jpeg帧显示为视频的最佳方法是什么?

Javascript 将jpeg帧显示为视频的最佳方法是什么?,javascript,performance,html5-canvas,jpeg,mjpeg,Javascript,Performance,Html5 Canvas,Jpeg,Mjpeg,我通过socket.io连接获得jpeg帧,这些帧是base64编码的,目前在HTML5画布上绘制。这甚至压倒了firefox中具有800x600/30fps“视频”的i7 最有效的方法是什么? 我尝试了CSS、WebGL(通过THREE.js和更改纹理)和HTML5画布,如上所述。我想如果我真的能将它作为mjpeg流传递给视频标签,可能会更有效,但我不知道如何才能做到客户端 你知道什么样的解决方案更好吗 目前,我收到一个事件,其中包含一整帧的数据,并执行以下操作: img = new Imag

我通过socket.io连接获得jpeg帧,这些帧是base64编码的,目前在HTML5画布上绘制。这甚至压倒了firefox中具有800x600/30fps“视频”的i7

最有效的方法是什么? 我尝试了CSS、WebGL(通过THREE.js和更改纹理)和HTML5画布,如上所述。我想如果我真的能将它作为mjpeg流传递给视频标签,可能会更有效,但我不知道如何才能做到客户端

你知道什么样的解决方案更好吗

目前,我收到一个事件,其中包含一整帧的数据,并执行以下操作:

img = new Image();
img.src = "data:image/jpeg;base64," + event.data;
img.onload = function() {
  context.drawImage(img,0,0);
}

“甚至压倒i7”是否意味着CPU太高或内存或网络?对,我应该更具体一些。我指的是CPU时间。如果你注释掉你的“drawImage”命令,我想知道CPU会有什么反应?这可能会告诉你是解码速度慢还是绘图速度慢。WebSocket的设计根本不是为了像堆积如山的伪视频帧那样提供超重型有效负载。相反,使用最好的工具来完成这项工作。视频元素旨在高效地流式传输帧。视频元素具有内置缓冲和预加载功能,可减少客户端滞后。转换成视频流的代码必须在服务器上完成(或者最好是在预制作阶段),因为客户端转换代码将比当前失败的方法花费更多的资源。如果无法重构项目,解决方法是接受较少的传入帧。@David drawImage命令不是问题,它实际上是加载图像(onload),不确定是base64解码还是真正加载图像。我做了一些研究,说base64解码和本机图像加载实际上并没有差多少。