Stream local mjpg video to html canvas

问题

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

回答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>

So while this solution will obviously come with a performance impact (we are creating a whole new canvas element and its 2DContext every frame), it's still probably better than flooding the network. And all this should be Garbage Collected quite easily anyway.

回答2:

Many of the IP mjpeg camera that are out there actually send individual jpeg files at a predefined frame rate, which when updated frequently, seems like a video.

You need to check your camera's manufacturers API for the correct url to use to get the image stream, for example with a Foscam camera I've done the following before and it works perfectly:

<img id='videostream' src="http://123.456.789.233:8080/videostream.cgi">

You obviously will have to get the correct IP and port number of the camera (if exists).

UPDATE - This does not mean you can not have other live video stream methods available, it is only the simplest way I know to do get live video from an IP camera.

UPDATE 2 - also some cameras have username & password so you'll probably have to append those to the url videostream.cgi?user=your_user&password=your_password

Hope this helps.

来源：https://stackoverflow.com/questions/36137686/stream-local-mjpg-video-to-html-canvas

标签

javascript

jquery

canvas

mjpeg