Visualize mjpeg-over-http streams in browser with html5

html canvas mobile-safari jpeg mjpeg
janesconference picture janesconference · Mar 6, 2012 · Viewed 8.7k times · Source

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

Daniel picture Daniel · Mar 19, 2013

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.

Related questions

How to clear the canvas for redrawing

After experimenting with composite operations and drawing images on the canvas I'm now trying to remove images and compositing. How do I do this? I need to clear the canvas for redrawing other images; this can go on for a …

Read More
Capture HTML Canvas as gif/jpg/png/pdf?

Is it possible to capture or print what's displayed in an html canvas as an image or pdf? I'd like to generate an image via canvas, and be able to generate a png from that image.

Read More
Using HTML5/Canvas/JavaScript to take in-browser screenshots

Google's "Report a Bug" or "Feedback Tool" lets you select an area of your browser window to create a screenshot that is submitted with your feedback about a bug. Screenshot by Jason Small, posted in a duplicate question. How are …

Read More