How can I detect whether a browser supports MJPEG?

G

3

9

Modern browsers except IE handle MJPEG (Motion JPEG). Here is an example fiddle.

Can I detect support for MJPEG? I have looked through Modernizr in vain.

Gennagennaro answered 15/12, 2011 at 14:30 Comment(0)

B

3

I've tried the most obvious way to detect if the image could be loaded or not:

$output = $('<img id="webcam">')
        .attr('src', src)
        .load(function(){alert('ok')})
        .error(function(){alert('error')});

In case image could be loaded load event will be fired, otherwise error. Checked this in recent Chrome and IE8. Works as expected.

Balalaika answered 19/12, 2011 at 15:55 Comment(1)

This doesn't work on Android web browsers. At least on two different Samsung phones, the default Android browser neither shows the MJPEG, nor fires a load or error event -- it tries to load the "whole" stream without rendering it. – Dactyl 8/11, 2012 at 19:15

C

4

Modernizr only supports the following formats for detection right now: ogg, webm and h264.

The video element has a call called canPlayType(format) that would really be your only option (if it works for mjpg). Your detection logic would look something like this (not the format would be different).

var videoElement = document.createElement('video');
if(!!videoElement.canPlayType)
{
  var browserConfidence = videoElement.canPlayType('video/mjpeg; codecs="insert, them"');
  if(browserConfidence == "probably")
  {
    // high confidence
  }
  else if(browserConfidence == "maybe")
  {
    // low confidence
  }
  else
  {
    // no confidence... it definately will not play
  }
}

Make sure you visit the W3C's information on canPlayType. It looks like the mime type should be "video/mjpeg" and not "video/mjpg" as you specified earlier.

Corinnacorinne answered 19/12, 2011 at 15:41 Comment(0)

B

3

I've tried the most obvious way to detect if the image could be loaded or not:

$output = $('<img id="webcam">')
        .attr('src', src)
        .load(function(){alert('ok')})
        .error(function(){alert('error')});

In case image could be loaded load event will be fired, otherwise error. Checked this in recent Chrome and IE8. Works as expected.

Balalaika answered 19/12, 2011 at 15:55 Comment(1)

This doesn't work on Android web browsers. At least on two different Samsung phones, the default Android browser neither shows the MJPEG, nor fires a load or error event -- it tries to load the "whole" stream without rendering it. – Dactyl 8/11, 2012 at 19:15

F

1

Sadly for this you would need to use an ActiveX control to support mjpg in IE. See How to embed mjpeg file on a webpage.

Fennelflower answered 21/12, 2011 at 20:10 Comment(0)

Recommended topics

Hot tags