Cross-browser solution for displaying MJPEG stream

streaming mjpeg ip-camera multiple-browsers
Nicholas J. Arnold picture Nicholas J. Arnold · Mar 11, 2011 · Viewed 68.7k times · Source

Is there a lightweight, free, and reliable way to display MJPEG in a cross-browser environment? I'm trying to display an MJPEG stream from an Axis 2120 IP camera on a site that I'm developing, and I've found that this is quite reliable in current versions of Firefox. However, after some testing I've found that IE, Opera and Chrome all have varying degrees of trouble doing this (no Mac access, so I'm not sure about Safari). Internet Explorer has no support for MJPEG and doesn't work at all. Opera takes literally 10-15 seconds to display anything after the initial GET was sent. Chrome works perfectly until the <div> that contains the <img> tag is hidden and then shown again.

For reference, I'm using an <img> tag to display the stream like so:

<img src="http://my.ip.addr/axis-cgi/mjpg/video.cgi/?resolution=352x240" alt="real-time video feed" />

I've considered using a re-broadcasting server to collect the MJPEG stream and transcode it on-the-fly, but this solution seems too ugly. Are there any better suggestions out there?

Answer

defvol picture defvol · Oct 19, 2012

I've just came out with a solution a couple of months ago. It's cross-platform, and doesn't need third-party plugins such as Flash or Java.

Basically, it's a node.js proxy which parses m-jpeg boundaries and delivers images in a defined interval.

Fork it at https://github.com/rodowi/Paparazzo.js

Related questions

creating my own MJPEG stream

I'm trying to create an MJPEG stream, I have a series of jpegs that I want to put together into a stream so that a user can just hit a URL and get an mjpeg stream. I've been trying for …

Read More
Mjpeg VLC and HTTP Streaming

I'm generating a MJpeg Stream and trying to stream it to VLC and play it there. The code: public void SendMultiPartData(String contentType, Func<byte[]> getData) { MemoryStream mem = null; response.StatusCode = 200; for ( byte[] buffer = getData(); buffer != null &&…

Read More
Android: streaming the camera as mjpeg

After several days of searching SO and google I'm beginning to give up, so I thought I might as well post here. I'm creating an android app which should offer some kind of video chat. As this should be as …

Read More