I have a problem with getting this to work and I am hoping someone can give me the solution. The below code is supposed to show a live video in the IFrame as you can see its pulling the video from an open port on my server.
This works great in Chrome and Safari but in IE it asks to download the video. Why is it doing this? How can I fix this?
The video is being broadcast live from my webcam plugged into my server using Motion. I am unsure of the type of video it creates I think it might be a MotionJPEG but I could be wrong.
Also if I try and view this on a mobile platform it does not work it will spit out a ton of garbage constantly in Chrome mobile and in Safari mobile it will only show one frame of the picture. Is there a way to make this work on mobile devices?
Update: after researching on their website I found out that it uses multipart/x-mixed-replace which after some digging its saying IE does not support this. Is there a work around?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<script type='text/javascript' src='script.js'></script>
<title>Testing</title>
</head>
<body>
<input type='button' onclick='MakeRequest();' value='Press to see something cool'/>
<div id='ResponseDiv'>
</div>
<iframe id="video" src="http://192.168.0.11:8081" height="120" width="160"></iframe>
</body>
</html>
IE doesn't support MotionJPEG format so your best option would be to use a viewer (eg Cambozola - as per these instructions http://www.lavrsen.dk/foswiki/bin/view/Motion/WebcamServer) or if you're feeling more adventurous you may be able to get MPlayer or Vlan to convert from the mjpeg to mp4 on the fly and then you can consume the stream more easily on multiple platforms