Visualize mjpeg-over-http streams in browser with html5

Question

Alright, I have a server that serves a motion-jpeg stream over http. What I would like to be able to do is connect to the server and visualize the stream in a browser, preferibly inside a canvas element. Browser should be Safari Mobile.

Is it possible to take the stream with XMLHttpRequest, take the single JPEG images out and put them within a canvas element? Keep in mind that the stream is live, thus possibly endless.

Answer 1

iOs mobile Safari supports MJPEG natively over http. Is there specific reason you need it in Canvas? see http://bridgecam2.halton.gov.uk/mjpg/video.mjpg?camera=1 on a ipad/iphone

Answer 2

Sorry to revive an old topic but i was faced with this problem and i didnt want to use an other player just native html5

I found one way to display the video inside html5 with "poster" attribute

<video width="360" height="420" controls poster="/video" autoplay>
        <source src="/audio.ogg" type="audio/ogg" />
</video>

Might not be what you expected but it works.