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.

score 12 · Answer 1 · answered Mar 19 '13 at 05:16

12

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.

answered Mar 19 '13 at 05:16

Daniel

121
1
2

1

This answer needs some serious upvotes. Solved my problem after hours of searching. I am showing an mjpg stream from a trendnet ipcam. The response headers tell me my content-type is multipart/x-mixed-replace. This works like a charm – Kyle Weller Oct 21 '13 at 04:47

score 2 · Accepted Answer · answered Mar 28 '12 at 23:24

2

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

answered Mar 28 '12 at 23:24

placeboaddict

130
3

1

This example is not working any more at least not on iOS6.1.3 – Torchify Aug 22 '13 at 18:19

Visualize mjpeg-over-http streams in browser with html5

2 Answers2