Cross-browser solution for displaying MJPEG stream

Question

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 1

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

Answer 2

Here is a Java applet based solution that you can use for any browser (or just the ones that don't support MJPEG): http://www.charliemouse.com/code/cambozola/

As far as other bugs go with MJPEG, I have found that you should set the 'src' attribute of the 'img' tag to something besides the MJPEG before you try to remove 'img' tag. Example:

<img src="#" />

If you don't do that, Firefox will continue to download MJPEG stream even though it shouldn't.