How can I show MJPEG, H264 Live Stream, and playback video in Chrome, Firefox and IE?

Question

Problem

I have multiple IP cameras from multiple manufactures. The cameras provide the following live feeds:

• Manufacturer_1 Feed_1: MJPEG via http
• Manufacturer_1 Feed_2: h264 via rtsp
• Manufacturer_2 Feed_1: h264 via http

What Works

For Chrome and Firefox MJPEG:

• http live feeds work like a charm using the img tag and setting the source to the live feed URL.
• Playback of recorded MJPEG video or H264 works on all three browsers using VideoJS

What I need

Play live feeds of H264 on all three browsers. Play MJPEG feeds on IE.

What I'm trying to avoid

Using FFMPEG or VLC to transcode and stream H264 to MJPEG, which would still only work for Chrome and Firefox.

Notes

Chrome does not accept plugins. Meaning Flash or other plugin based solutions will not work.

ActiveX video controls on IE are rarely stable. Manufacturer specific controls are sub-par at best.

I know that the HTML5 video tag is implemented independently by the browsers and each browser decides what video formats to support.

This link is a quick overview of the severe browser video limitations and the burden that falls on all of us as developers who are cough in the middle of this modern browser war.

Answer 1

Chrome and Firefox both accept live video streams in the fragmented MP4 and WebM (which is irrelevant in this case) video containers. So you will have to do remuxing (which is still much faster than transcoding). I am also working with IP cameras and so far I haven't seen any that are capable of outputting the formats supported by the browser. So the free option is to setup FFmpeg to transcode rtsp to fragmented MP4 or if you are looking for a commercial product our company has just released an video surveillance product that can offer HTML5 compatible live streaming from RTSP cameras. If you have any interest in the commercial product leave a comment.