2

I'm using html5 canvas to draw over a motion jpeg stream received from a camera. The code that updates the canvas is similar to this:

function update_mjpeg()
{
   var img = document.getElementById("mjpeg-img"); //hidden image

     overlay.temp.dcanvas.getContext("2d").(0, 0, overlay.element.dcanvas.width, overlay.element.dcanvas.height);
     overlay.temp.dcanvas.getContext("2d").drawImage(img, 0, 0, overlay.element.dcanvas.width, overlay.element.dcanvas.height);
}

function animateCanvas()
{
    update_mjpeg();
    window.requestAnimationFrame(function() {
             animateCanvas();
  });
}

On chrome browser the mjpeg stream is displayed correctly and I can draw over the stream. On firefox the canvas shows only the first frame. I think this might be related to bug 667206. Is there any workaround I can use to make it work on firefox?

matlocat
  • 53
  • 6
  • Chrome is the buggy one. Ps : the [new specs](https://html.spec.whatwg.org/multipage/scripting.html#image-sources-for-2d-rendering-contexts:canvasimagesource-3) are now clearer and made the bug you linked invalid. – Kaiido Aug 02 '16 at 08:24
  • Thank you! I think the only alternative might be catching frames as single jpeg as done in the post. Do you think performance will be affected? – matlocat Aug 02 '16 at 08:45
  • Yes it will, mjpeg format allows to send only fragments of images to be decoded, using the cache hack, you'll have to download the full image every frame. But usually mjpeg streams have low fps anyway, so in the end you may not notice it, but be sure to change your loop function to take into account the loading time of your image, otherwise you'll just download a lot of times the exact same image. – Kaiido Aug 02 '16 at 08:49

0 Answers0