我有多个MJPEG流-IP摄像机-我需要将它们显示为动画，并显示在画布上（我必须对它们进行一些效果处理，所以我确实需要canvas）。
选项1 ：正在使用setInterval，然后将图像重新绘制到画布上，如下所示：ctx.drawImage(img,0,0,640,360);，但是在Firefox中只有第一帧绘制到了画布上。
[...]当CanvasImageSource对象在其中表示动画图像时 HTMLOrSVGImageElement，用户代理必须使用以下默认图像： 动画（格式定义的动画将在以下情况下使用 动画不被支持或被禁用），或者，如果没有这样的动画 图像，动画的第一帧，当渲染图像时 CanvasRenderingContext2D API。
所以这不是错误。目前在Chrome中可以运行，但被认为是错误，很快就会“解决” ...
选项2 ：正在使用setInterval重新加载图像（我可以选择使用网络摄像机获取当前帧-这样我可以获取一帧并“刷新”图像）然后重新绘制到画布上。效果很好，但是存在一个问题，即流约为30fps，因此很难在1/30秒处重新建立与服务器的连接，而且我丢了很多帧（想象一下，在同一页面上有多个摄像头。 ）。
PS：我无法将MJPEG流重新编码为mp4，webm或其他类型的视频。
想法：是否可以使用js在边界处手动拆分mjpeg，然后获取每个帧？我真的不知道该怎么做，如果可能的话。
SO：我该怎么办？
非常感谢您！
PS2： 接受Jquery或任何其他免费js库。服务器端：仅PHP或CGI。