I'm trying to display mjpeg live stream in HTML 5
With <img> tag -> no problem it shows the stream great, but, I need some events to be fired to indicate when the stream is properly displayed
For example:
<img src="url" />
With <video> tag -> I'm able to get those events, but I'm not able to play mjpeg stream
For example:
<video autoplay="autoplay" controls onerror="onError()">
<source src=url>
</video>
What can I do?
There is no general support for MJPEG streams in any browser beyond the img element. MJPEG has no official standard and there exist many variations which could be problematic with the video element as to how to detect what is an error without supporting every/most variations.
For the image element I guess a compromise has been made to allow for more tolerance format-wise at the cost of not being able to analyze the stream properly.
The closest we get to monitor events with the img element is to listen to the onload, onerror and onabort events. Beyond that we are given no option.
You could look into transcoding solutions such as the free VLC combined with MediaTomb (allow piping VLC output) that can convert the MJPEG format to a different one on the fly as a possible workaround. An alternative to that is to consider a Flash based solution.
Related
Problem
I'm having videos on a webpage that show the first frame of the video and on hover play the video with a length of around 10 seconds and a resolution of around 720p. I thought of just uploading them to my provider's FTP storage. But then thought that they surely don't use CDNs to deliver content.
So my next thought was using something like Vimeo, Cloudinary, MUX...
I now have seen that I could add videos on a webpage with HLS (m3u8). But I've never done that before so I read my way through these streaming formats.
After that, I'm really unsure what to use in my case as it seems that HLS or DASH is usually more performant than downloading the whole file.
Vimeo for example would give me the option to get a direct link to the .mp4 or HLS.
I'm not seeing a video when using a standard tag. But I found articles that say HLS is now supported in every major browser.
Would you recommend going for such a use case with HLS or Dash and if yes what's the best way to implement it?
What I've tried
<video width="320" height="240" controls>
<source
src="https://player.vimeo.com/external/734323487.mpd?s=234"
// type="application/x-mpegURL"
/>
Your browser does not support the video tag.
</video>
I figured out how to stream video from the camera on the Raspberry Pi, and how to receive and view it in the browser with an URL like:
http://picamhq:8080/?action=stream
The type of video is M-JPEG, and info on mjpeg-streamer is here.
Now, as the browser is capable to play this video stream, I expect that should also work inside a HTML web page. The advantage would be that such web page can additionally show some buttons to start and stop the streamer, and to change parameters, such as camera settings.
I looked into several answers of questions like How to embed streaming Video (rtmp) in HTML, but that is not about embedding the video in a html page.
I tried with a video tag like:
<video width="320" height="240" autoplay controls>
<source src="http://picamhq:8080/?action=stream" type="video/mjpeg">
Your browser does not support the video tag.
</video>
Unfortunately, this does not work. The web page shows a dark rectangle where the video should play, and it seems to take forever to load the entire stream, which of course is not productive, as the stream will never end. Besides, I want low latency :-)
Then I looked at info like this SO question on live html streaming which talks about lots of complex stuff. Does that mean that the nice and simple mjpeg-streamer cannot make a stream that is compatible with the html video tag? And that a stream that the browser can play, does not necessarily work inside a html page?
The solution you are using is not actually streaming video it is sending a stream of individual JPEG images.
From the documentation:
This plugin streams JPEG data from input plugins via HTTP
If you look at a demo site for MJPEG_Streamer you can see this also as the output from the stream is displayed in an 'img' tag rather than a 'video' tag:
<p id="streamwrap" class="xform-p">
<img id="streamimage" class="xform" src="/?action=stream">
</p>
(from: http://hashey.dip.jp:8090/stream.html - note the demo does not appear to be sending a stream at the time of writing).
You could convert this stream to video or for your requirements you might just need to add control to start and stop making requests to get the current image from the stream.
I'm not an expert on the start/stop thing (you can control the camera with ajax calls to the raspberry webserver, i assume), but how about using an iframe for display?
<iframe width="640" height="355" src="http://picamhq:8080/?action=stream">
</iframe>
If I have an html5 audio element with multiple sources, is there a way I can specify which source should be used when the user wants to download the file vs playing it in the browser (or achieve a similar effect with javascript)? For example, if I have two files, test_file.opus and test_file.mp3, can I signal the browser to play the opus file when the user clicks play, but then to download the mp3 file when they right click and select "save audio as". Typically opus audio files can be smaller, but they can't be played very easily unless the user knows what they're doing.
<audio controls preload="metadata">
<source src="test_file.opus" type="audio/ogg; codecs=opus">
<source src="test_file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Quick Note: I realize I could provide a download link in an <a> tag next to the html5 audio element. I was just curious if there was a way to signal the browser which one should be downloaded vs played in the browser or if there was a way to achieve a similar effect using javascript.
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.
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.
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
Is it possible to play a shoutcast/icecast stream using HTML5?
If so, how should I implement it?
2020 update
Modern browsers don't need any special treatment or server-side workarounds to play audio. Simply use an audio tag with a direct link to one or more stream sources (not a playlist):
<audio>
<source src="http://relay.publicdomainradio.org/classical.mp3" type="audio/mpeg">
</audio>
From MDN:
The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.
Browsers support flac, mp3, vorbis, aac, opus and wav. More details on caniuse.com.
Original post
Add a semicolon to the end of the http request. It IS the protocol set forth by shoutcast to override it's browser detection. Like this:
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/;"></audio>
There is a big problem with SHOUTcast, which I suspect is responsible for it not working even in Chrome which is supposed to support MP3.
SHOUTcast can serve three different types of response:
a native-SHOUTcast “ICY” protocol streaming audio response. It decides to do this if the player accessing the stream includes an icy-metadata: 1 header.
a plain-HTTP streaming audio response, without extra metadata, for media players with no ICY support.
the “SHOUTcast D.N.A.S. Status” page and other pages on the web interface.
How does it decide whether to serve a web page instead of an audio stream? It guesses whether you're using a web browser. By looking to see whether the User-Agent header starts with Mozilla/.... Because all web browsers are Mozilla, right? Jeez, SHOUTcast.
So when Chrome tries to fetch the audio stream to play, SHOUTcast thinks it's a web browser (well... it is) and refuses to give it the audio stream to put in the audio tag. Instead it gets the admin web page.
(I would guess Safari is passing the icy-metadata header to avoid the problem, having specific support for SHOUTcast. I can't test it at the moment as Safari won't play audio or video. Maybe it wants me to install QuickTime for that. Maybe it can go get stuffed.)
So you'll probably need to add a Flash audio player as fallback.
<audio src="http://85.25.108.20:8090/;" controls autoplay></audio>
This should work fine, but make sure /; is there after the stream URL and port. If you don't need autoplay, remove the "autoplay" tag.
Yes. But its only work in Safari
<!DOCTYPE html>
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/"></audio>
Cause Opera and Firefox did not support non free Codecs
see here: Is it possible to play shoutcast internet radio streams with html5?
On redirecting problems with <audio> tag in Browsers try to add "/stream" at the end of the stream URL for preventing redirecting.
example:
not working:
http://live-radio01.xxxxxx.com/2TJW/mp3
working:
http://live-radio01.xxxxxx.com/2TJW/mp3/stream
I use Icecast with Easystream for streaming to both mac and pc. A Script Sets up the audio player called MP3 Sticky Player. swf
With the documentation support files the player just loads as below in both cases.
PC
<ul id="playlist" style="display:none;">
<li data-path="http://99.250.117.109:8000/stream" data-thumbpath="thumbnail of whatever" data-downloadable="no" data-duration="00:00">
</li>
</ul>
MAC
<audio style="width: 100%" controls="controls" autoplay="autoplay" src="http://99.250.117.109:8000/stream">
Your browser does not support the <code>audio</code> element.
</audio>
As we have removed images from any mp3 metadata we use a image loader that grabs the Icy-MetaData (FYI you will need at least PHP 5.4 to run correctly) and matches a directory of cover art for each players song that streams.
On Chrome 9x If your website works over https Your link for shoutcast stream url must be a https url, for example:
<audio controls src='https://ssl-1.radiohost.pl:7028/stream' type='audio/mpeg' align='cemnter'>
Your browser does not support the audio element.
</audio>