在画布中渲染MJPEG流。规范不允许像在视频上一样简单地重绘画布

Question

我有多个MJPEG流-IP摄像机-我需要将它们显示为动画，并显示在画布上（我必须对它们进行一些效果处理，所以我确实需要canvas）。

选项1 ：正在使用setInterval，然后将图像重新绘制到画布上，如下所示：ctx.drawImage(img,0,0,640,360);，但是在Firefox中只有第一帧绘制到了画布上。

根据规范（https://html.spec.whatwg.org/multipage/scripting.html#image-sources-for-2d-rendering-contexts:canvasimagesource-3）：

  

[...]当CanvasImageSource对象在其中表示动画图像时   HTMLOrSVGImageElement，用户代理必须使用以下默认图像：   动画（格式定义的动画将在以下情况下使用   动画不被支持或被禁用），或者，如果没有这样的动画   图像，动画的第一帧，当渲染图像时   CanvasRenderingContext2D API。

所以这不是错误。目前在Chrome中可以运行，但被认为是错误，很快就会“解决” ...

选项2 ：正在使用setInterval重新加载图像（我可以选择使用网络摄像机获取当前帧-这样我可以获取一帧并“刷新”图像）然后重新绘制到画布上。效果很好，但是存在一个问题，即流约为30fps，因此很难在1/30秒处重新建立与服务器的连接，而且我丢了很多帧（想象一下，在同一页面上有多个摄像头。 ）。

PS：我无法将MJPEG流重新编码为mp4，webm或其他类型的视频。

想法：是否可以使用js在边界处手动拆分mjpeg，然后获取每个帧？我真的不知道该怎么做，如果可能的话。

SO：我该怎么办？

非常感谢您！

PS2： 接受Jquery或任何其他免费js库。服务器端：仅PHP或CGI。