javascript - Stream local mjpg video to html canvas

Question

I am trying to write a live stream of a mjpg video to an html canvas.

The following: http://camelive.info/ has a list of public webcams with mjpeg videos but they seem to be writing < frameset > tags with frame elements and I can't pick up how its working in a fiddle.

The ideal solution has any live mjpg (ideally a link?) streaming on an html canvas in fiddle.

Any helpful resources are appreciated, I would like to do this without including external libraries (jquery allowed)

Edit: Related: How to make an snapshot from a MJPEG stream in HTML

Edit: I too have a local mjpg to draw from like the example. Solution can use local stream

Answer 1

According to specs about the CanvasRenderingContext2D drawImage method,

Specifically, when a CanvasImageSource object represents an animated image in an HTMLImageElement, 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.

This applies to .gif, SMIL animated .svg and .mjpeg media. So once you fetched the data, only one frame should be drawn onto the canvas.

Note that chrome has a bug and only respect it for .gif images, but they may fix it someday.

One solution as you noticed yourself, is to fetch an other fresh frame, with the clear-cache hack ('your.url/?' + new Date().getTime();) but you will loose any advantages of the mjpeg format (partial frame content) and can't be sure when the refreshing will happen.

So a better solution if applicable, would be to use a video format. Each frame of a video can be drawn to the canvas.

---

Edit 2018

---

A third solution came to my little mind two years later:

UAs are not tied to keep in memory the same default image for all 2DContexts in the document.
While for others format we are still kinda stuck, for MJPEG streams, which don't have a well defined default image, we actually fall to the first frame of the animation.

So by drawing the <img> containing our MJPEG stream on two different canvases, at different times, we can theoretically have two different frames of our same MJPEG stream to be drawn on the canvases.

Here is a proof of concept only tested on Firefox 62.

var ctx_stream = stream.getContext('2d');
var ctx_direct = direct.getContext('2d');
img.onload = function() {
   stream.width = direct.width = this.naturalWidth;
   stream.height = direct.height = this.naturalHeight;
   // onload should fire multiple times
   // but it seems it's not at every frames
   // so we'll disable t and use an interval instead
   this.onload = null;
   setInterval(draw, 500);
};
function draw() {
  // create a *new* 2DContext
  var ctx_off = stream.cloneNode().getContext('2d');
  ctx_off.drawImage(img, 0,0);
  // and draw it back to our visible one
  ctx_stream.drawImage(ctx_off.canvas, 0,0);
  
  // draw the img directly on 'direct'
  ctx_direct.drawImage(img, 0,0);
}
  
  
img.src = "http://webcam.st-malo.com/axis-cgi/mjpg/video.cgi?resolution=704x576&dummy=1491717369754";

canvas,img{
  max-height: 75vh;
}

Using a new offcreen canvas every frame: <br><canvas id="stream"></canvas><br>
The original image: <br><img id="img"><br>
Drawing directly the &lt;img> (if this works your browser doesn't follow the specs): <br><canvas id="direct"></canvas><br>