I'm building a web app that should play back an RTSP/RTP stream from a server http://lscube.org/projects/feng.
Does the HTML5 video/audio tag support the rtsp or rtp? If not, what would the easiest solution be? Perhaps drop down to a VLC plugin or something like that.
Technically 'Yes'
(but not really...)
HTML 5's <video> tag is protocol agnostic—it does not care. You place the protocol in the src attribute as part of the URL. E.g.:
<video src="rtp://myserver.com/path/to/stream">
Your browser does not support the VIDEO tag and/or RTP streams.
</video>
or maybe
<video src="http://myserver.com:1935/path/to/stream/myPlaylist.m3u8">
Your browser does not support the VIDEO tag and/or RTP streams.
</video>
That said, the implementation of the <video> tag is browser specific. Since it is early days for HTML 5, I expect frequently changing support (or lack of support).
From the W3C's HTML5 spec (The video element):
User agents may support any video and audio codecs and container formats
The spirit of the question, I think, was not truly answered. No, you cannot use a video tag to play rtsp streams as of now. The other answer regarding the link to Chromium guy's "never" is a bit misleading as the linked thread / answer is not directly referring to Chrome playing rtsp via the video tag. Read the entire linked thread, especially the comments at the very bottom and links to other threads.
The real answer is this: No, you cannot just put a video tag on an html 5 page and play rtsp. You need to use a Javascript library of some sort (unless you want to get into playing things with flash and silverlight players) to play streaming video. {IMHO} At the rate the html 5 video discussion and implementation is going, the various vendors of proprietary video standards are not interested in helping this move forward so don't count of the promised ease of use of the video tag unless the browser makers take it upon themselves to somehow solve the problem...again, not likely.{/IMHO}
This is an old qustion, but I had to do it myself recently and I achieved something working so (besides response like mine would save me some time):
Basically use ffmpeg to change the container to HLS, most of the IPCams stream h264 and some basic type of PCM, so use something like that:
ffmpeg -v info -i rtsp://ip:port/h264.sdp -c:v copy -c:a copy -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/test.m3u8
Then use video.js with HLS plugin This will play Live stream nicely There is also a jsfiddle example under second link).
Note: although this is not a native support it doesn't require anything extra on user frontend.
There are three streaming protocols / technology in HTML5:
Live streaming, low latency
- WebRTC
- Websocket
VOD and Live streaming, high latency
- HLS
1. WebRTC
In fact WebRTC is SRTP(secure RTP protocol).
Thus we can say that video tag supports RTP(SRTP) indirectly via WebRTC.
Therefore to get RTP stream on your Chrome, Firefox or another HTML5 browser, you need a WebRTC server which will deliver the SRTP stream to browser.
2. Websocket
It is TCP based, but with lower latency than HLS. Again you need a Websocket server.
3. HLS
Most popular high-latency streaming protocol for VOD(pre-recorded video).
Chrome will never implement support RTSP streaming.
At least, in the words of a Chromium developer here:
we're never going to add support for this
With VLC i'm able to transcode a live RTSP stream (mpeg4) to an HTTP stream in a OGG format (Vorbis/Theora). The quality is poor but the video work in Chrome 9.
I have also tested with a trancoding in WEBM (VP8) but it's don't seem to work (VLC have the option but i don't know if it's really implemented for now..)
The first to have a doc on this should notify us ;)
Chrome not implement support RTSP streaming.
An important project to check it WebRTC.
"WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs"
Supported Browsers:
Chrome, Firefox and Opera.
Supported Mobile Platforms:
Android and IOS
http://www.webrtc.org/
Years past, there are some updates about RTSP in H5:
RTSP is not supported in H5, neither PC nor mobile.
Flash is disabled in Chrome, see Adobe
MSE works good except iOS safari, for flv.js to play HTTP-FLV on H5, or hls.js to play HLS on H5.
WebRTC is also a possible way to play streaming in H5, especially in 0.2~1s latency scenarios.
Note: I think it's because RTSP use TCP signaling protocol to exchange SDP, which is not HTTP in H5 so it's really hard to support it, especially there is WebRTC now.
So, if you could transcode RTSP to other protocols, like HTTP-FLV/HLS/WebRTC, then you could use H5 to play the stream. Recommend to use FFmpeg to do the transcode:
ffmpeg -i "rtsp://user:password#ip" -c:v libx264 -f flv rtmp://server/live/stream
Start a RTMP server like SRS to accept the RTMP and transmux to HTTP-FLV, HLS and WebRTC:
./objs/srs -c conf/rtmp2rtc.conf
Then it's OK to play the stream by:
HLS by video or hls.js: http://server:8080/live/stream.m3u8
HTTP-FLV by flv.js: http://server:8080/live/stream.flv
WebRTC by H5 or native SDK: webrtc://server:1985/live/stream
Note that the latency of HLS is about 5~10s, LLHLS is better but not too much. The HTTP-FLV is about 1~3s, very similar to RTMP. And the WebRTC latency is about 0.2s, while if covert RTSP to RTMP to WebRTC the latency is about 0.8s.
My observations regarding the HTML 5 video tag and rtsp(rtp) streams are, that it only works with konqueror(KDE 4.4.1, Phonon-backend set to GStreamer). I got only video (no audio) with a H.264/AAC RTSP(RTP) stream.
The streams from http://media.esof2010.org/ didn't work with konqueror(KDE 4.4.1, Phonon-backend set to GStreamer).
Putting a conclusion as of now.
I am trying to build a way around it meaninglessly since rtsp doesn't work OOB. Without a "manager" handling the streaming to be perfected to the way a video tag works, it's not possible now.
I am currently working on something around android+html (hybrid) solution to manage this in a very wicked way. Since it is supposed to play directly from camera to android with no intermediary servers, we came up with a solution involving canvas tag to bridge the non-webview with the webview.
Related
How can I use HTML5 and the MediaSource API to stream live video and audio from my webcam to my website?
It seems MPEG DASH is not supported anymore... https://caniuse.com/#search=DASH
And HLS doesn't look good either... https://caniuse.com/#search=HLS
Is there really no way to do this even with modern browsers?
MPEG DASH is not supported anymore
Yes it is, you just need player software to parse the manifest and download the media. See video.js/dash.js
And HLS doesn't look good either
Yes it does, you just need player software to parse the manifest and download the media. See video.js/hls.js
I made a streaming server and a website to show the Video. I have tried with many HTML5 player. But problem is no player working without enable flash on browser. There are a website http://jagobd.com and its playing video even I block flash on this site. How they did it? and How can I get this kind of player open source? could you please give me any solution?
My streaming link is Rtmp
RTMP is a Flash technology, and only plays in Flash or other players that support it. No browser supports RTMP, and it's unlikely that any will in the future.
If you want to use a regular HTML5 player, you need to use a compatible streaming format. Consider DASH. While it doesn't have native support in-browser, it doesn't need it as it can be handled with MediaSource Extensions. Most modern browsers support MSE. Many encoders do as well, and you can use whatever static web hosting or CDN you want.
There are other options for video distribution as well, if you have special streaming requirements.
Problem
I have multiple IP cameras from multiple manufactures. The cameras provide the following live feeds:
Manufacturer_1 Feed_1: MJPEG via http
Manufacturer_1 Feed_2: h264 via rtsp
Manufacturer_2 Feed_1: h264 via http
What Works
For Chrome and Firefox MJPEG:
http live feeds work like a charm using the img tag and setting the
source to the live feed URL.
Playback of recorded MJPEG video or H264 works on all three browsers using VideoJS
What I need
Play live feeds of H264 on all three browsers. Play MJPEG feeds on IE.
What I'm trying to avoid
Using FFMPEG or VLC to transcode and stream H264 to MJPEG, which would still only work for Chrome and Firefox.
Notes
Chrome does not accept plugins. Meaning Flash or other plugin based solutions will not work.
ActiveX video controls on IE are rarely stable. Manufacturer specific controls are sub-par at best.
I know that the HTML5 video tag is implemented independently by the browsers and each browser decides what video formats to support.
This link is a quick overview of the severe browser video limitations and the burden that falls on all of us as developers who are cough in the middle of this modern browser war.
Chrome and Firefox both accept live video streams in the fragmented MP4 and WebM (which is irrelevant in this case) video containers. So you will have to do remuxing (which is still much faster than transcoding). I am also working with IP cameras and so far I haven't seen any that are capable of outputting the formats supported by the browser. So the free option is to setup FFmpeg to transcode rtsp to fragmented MP4 or if you are looking for a commercial product our company has just released an video surveillance product that can offer HTML5 compatible live streaming from RTSP cameras. If you have any interest in the commercial product leave a comment.
Can I click on some time and eventhough the video is not downlaoded till that time and the video starts playing from the time I clicked?
If yes, what would be a better option for viewing streamed video- HTML5 or flash player like JW player? WHich one will have less lag?
HTML5 browsers generally don't support this, however I believe the video tag in Safari will work with the Apple HTTP Streaming format for this functionality. For something that works across all browsers, Flash Player can do it using either RTMP streaming or HTTP Streaming (either with our without OSMF to support this). Probably the easiest place to start is with OSMF, which supports both RTMP and HTTP streaming of video.
I have tested this with Firefox and Firebug and while you can "seek" to a point in the video without having to watch video preceding the point you wish to seek, this still causes the entire video file to download.
Indeed, each time you seek in Firefox 4, the entire video downloads.
This may change and improve as HTML 5 video implementations become more mature and may differ based on the actual browser being used.
More information on the test here:
http://www.stevefenton.co.uk/Content/Blog/Date/201106/Blog/HTML-5-Video-In-Real-Life/
I understand you can feed the HTML5 <video> element RTP/RTSP video streams.
Streaming via RTSP or RTP in HTML5
Great! Now how would one go about setting up the stream?
To be clear, I'm not looking to stream live video, just encode and stream existing media/video files. Think Flash Media Server (I have a working example of the Flash route already). I'm wondering how to approach setting up the streaming server backend to serve up all the right codecs for HTML5 video in all different browsers (H.264/Ogg/WebM)
I'm looking at maybe FFServer? Or possibly the new VOD feature for VLC for streaming in H.264 (Safari, Flash) over RTSP. Possibly Icecast server for the Ogg video? Is this even possible? Are there currently any working examples of this type of html5 VOD true streaming in the wild?
This is no answer, however I would suggest trying to solve one problem at a time.
Example:
Q: Can I stream from Flash Media Server via HTML 5 "video" tag?
A: No, but progressive download is possible. (Reference: http://forums.adobe.com/thread/855764)