1

I have multiple MJPEG streams - IP Cameras - and I need to display them, animated, to a canvas (I have to do some effects to them etc, so I really need canvas).

OPTION 1: was using setInterval, and redrawing the image to canvas like this: ctx.drawImage(img,0,0,640,360); but only first frame is drawn to canvas, in Firefox.

According to specs (https://html.spec.whatwg.org/multipage/scripting.html#image-sources-for-2d-rendering-contexts:canvasimagesource-3):

[...] when a CanvasImageSource object represents an animated image in an HTMLOrSVGImageElement, the user agent must use the default image of the animation (the one that the format defines is to be used when animation is not supported or is disabled), or, if there is no such image, the first frame of the animation, when rendering the image for CanvasRenderingContext2D APIs.

So this is not a bug. In Chrome it works at this moment but it is considered a bug and will be "solved" soon...

OPTION 2: was using setInterval reloading the image (I have the option to get current frame with my ip cameras - so I can get one frame and "refresh" the image) then re-drawing to canvas. That works well but there is a problem that the streams are ~30fps so re-establishing a connection to the server at 1/30 seconds is really hard and I lose a lot of frames (imagine when having multiple cameras on the same page...).

PS: I am unable to re-encode MJPEG streams to mp4, webm or other kind of video.

IDEA: Is there any option to manually split the mjpeg at boundary, with js and then get each frame? I really don't know how to do this and if it's possible.

SO: What can I do?

Thank you very much!

PS2: Jquery or any other free js library accepted. Server-side: only PHP or CGI.

MM PP
  • 4,050
  • 9
  • 35
  • 61
  • 1
    There is a dupe somewhere, I'll dig a bit to find it... But the only way is by adding a `'?'+Math.random()` at the end of your url in the onload event. This way, the browser will always request it as if it were a new file entirely, thus disregarding the streaming possibility of mjpeg (which means **a lot** of resources to be downloaded too). – Kaiido Sep 01 '18 at 08:24
  • This was marked as duplicate. Can you tell me please where is the first-appeared question and answer? I am unable to find it out. Thanks! – NETCreator Hosting - WebDesign Sep 01 '18 at 08:51
  • Actually I may have something new for you to test out. I feel so stupid I didn't thought about this in all these years... but it seems to work on my FF. (I'll edit my answer there though). – Kaiido Sep 01 '18 at 09:06
  • 1
    Sorry it took me so long to write it, but you can check again the dupe target. [I made an edit with a third solution](https://stackoverflow.com/a/36144565/3702797), which might better fit your needs: drawing on a new canvas at every frame will actually redraw the current frame entirely. – Kaiido Sep 01 '18 at 10:04
  • @Kaiido Thank you very much! – MM PP Sep 01 '18 at 14:25

0 Answers0