How can I detect whether a browser supports MJPEG?

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.