4

I have an mjpg video stream. The MIME type is content-type: multipart/x-mixed-replace I can get a great video stream in Chrome, Firefox, and Safari, but it is not yet working in IE (I tested IE10/Win8). Also I get a video feed on my android device's chrome app, but not on my iPhone's Chrome app(iOS7/30.0.1599.16). Here is the code I am using to embed the video (the url is the actual stream at the moment):

<video height="400" poster="http://bit.ly/1ccY67W" >
  <source src="http://bit.ly/1ccY67W" type="video/mp4" />
  <source src="http://bit.ly/1ccY67W" type="video/ogg" />
  <source src="http://bit.ly/1ccY67W" type="video/webm" />
  "Your browser does not support HTML5"
</video>

Here is a fiddle. (You can see those are my pet birds). It seems that IE is supposed to support the video/mp4 type. And I was hoping that the chrome app on iOS would behave the same as the chrome app on other devices, but I guess that is not the case?

One other strange thing to note is that if I remove the poster attribute, the stream does not work in any browser.

What do I need to do to get the stream to work in IE and iOS Chrome app?

EDIT: For mjpg you should use an image tag. The above code was working because the poster attribute functions as an image. The code is simply:

<img id="stream" src="http://bit.ly/1ccY67W"/>

I load the img source dynamically on page load. My hack to support IE and chrome on iOS is if the img source fails to load, I activate a canvas and serve up static images from the camera at 3 fps. I would like to find a way to get the actual mjpg video stream though. Also to note, although the iOS chrome app does not work, the safari app on iOS7 does work.

Kyle Weller
  • 2,533
  • 9
  • 35
  • 45
  • 1
    Try caniuse.com and html5test.com in each browser so you know what they definitely support. Take a look at the source for the pages at http://sandbox.coolaj86.info/ I don't believe mjpeg counts as mp4. mjpeg is supposed to work with an img tag, not a video tag. See http://stackoverflow.com/questions/13500558/motion-jpeg-in-html5-canvas You need to provide the correct encoding for the various urls. I would recommend using different urls instead of the same for each, even if you're switching on the content-type on the server. Live streaming vs file streaming require different http headers. – coolaj86 Oct 24 '13 at 01:27
  • Good links @CoolAJ86. I [updated the fiddle](http://jsfiddle.net/YZ8eD/1/) to use the img tag, and I see the same compatibility issues. [This version of the fiddle](http://jsfiddle.net/YZ8eD/4/) will load the img src dynamically so you can capture the error message. Maybe I will try canvas next. Or last resort, here is a [node.js web proxy](https://github.com/wilhelmbot/Paparazzo.js) to stream mjpeg. It's just bizzare that we're seeing different compatibility in iOS chrome than other versions of chrome – Kyle Weller Oct 24 '13 at 05:25
  • It's not bizzare, really—Chrome for iOS is not normal Chromium http://stackoverflow.com/questions/11259152/chrome-ios-is-it-just-a-uiwebview. It's basically the built in UIWebView's with some optimizations they've tried to make around restrictions imposed by iOS. So, it really is basically mobile safari (with limitations). Don't expect it to be like desktop chrome. – Jarsen Oct 24 '13 at 13:47
  • 1
    Remember Chrome and Chromium are different, they even support different media codecs. Chrome for Android and iOS both forked from Chromium. I was expecting iOS chrome to be like android chrome not desktop Chrome. Some of those links explain clearly how Apple has unfortunately limited them from delivering the same experience across platforms. Since this difference exists, I want to find a cross-platform solution to view the mjpg stream. – Kyle Weller Oct 24 '13 at 22:35

0 Answers0