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?

Solution 1

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.

Solution 2

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

Comments

[astrowalker]

Pretty straigtforward solution, which does not require any extra server (like Node.js): github.com/blueimp/mjpeg-server It "wraps" around ffmpeg, and then all it takes is opening (by default) your localhost:9000 in browser. Works like a charm for me.

[Nicholas J. Arnold]

Thanks Teddy. I've also noticed Firefox downloading the stream when it shouldn't. Your advice works well.

[moeiscool]

Im aware this answer is old but i'm gonna ask in hopes that you are still lingering here. setting the src to # stops the mjpeg stream without a hard refresh?

[Teddy]

@moeiscool it worked back in 2011. You might want to double check the network tab of the web inspector to make sure things are working as expected.