158

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.

xiaoyi
  • 6,373
  • 1
  • 31
  • 48
Elben Shira
  • 1,976
  • 2
  • 13
  • 13
  • video tag does not "just work" with RTSP. And RTSP is not implemented natively by any browser that I know of. You will either need a plug in, as you already figured out. Or use webRTC, which is natively supported by Chrome, and Firefox, and you will be able to use the video tag with some webRTC logic. If you're trying to stream from a source like an IP camera, use a streaming service like Wowza (or write your own) to transcode from RTSP to webRTC. This is my advice for you. – Michael P Jun 05 '15 at 18:03
  • I think you can get stream with html5 but you can not stream to the somewhere. – Salih Karagoz Apr 22 '17 at 21:23
  • Great question, thank you. "I believe we do not support RTSP, only RTMP via videojs-flash." -- this is an answer of main maintainer of Video.js media player. I reasearch subject and cannot find a good solution for it. – zhibirc Jul 26 '18 at 14:02
  • It is possible to use a WebRTC RTCPeerConnection to play an RTSP (or more correctly the RTP stream that RTSP sets up) in an HTML video element. There was previously a demo at http://webrtc.live555.com/. The trick will be finding an RTSP server that has added the required WebRTC DTLS and SRTP emchanisms. – sipsorcery Jun 11 '20 at 14:30
  • wow, so many good content in the *deleted* answers! – Barney Szabolcs May 24 '21 at 08:41

9 Answers9

87

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

Community
  • 1
  • 1
Stu Thompson
  • 36,763
  • 19
  • 104
  • 155
  • 8
    **UPDATE**: tried the first method in chrome and got `GET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEME`. It seems that only HTTP[S] schemes are allowed on `video` elements. – Yan Foto Jul 21 '15 at 10:10
  • Surely you would never transfer a video over HTTP and only use protocol like RTP? It would be terribly slow over TCP.. – markmnl Sep 02 '15 at 05:58
  • 9
    @markmnl Is that sarcasm? (I can't tell...I'm gullible that way.) HTTP transport is the dominate method for transferring video over the web for a few years now. Youtube, Netflix, et al. It's not a matter of efficiency, but rather simplicity, firewall transversal, cache server friendliness, etc. – Stu Thompson Sep 02 '15 at 16:28
  • 7
    @markmnl For posterity's sake, it's worth mentioning that Netflix used to stream with MS Silverlight, but ditched it a while back. As someone who's been in streaming since 2001, I was initially shocked to see HTTP take over. Now I'm drinking the Kool Aid. In corporate networks, where efficiency matters, purpose-built protocols RTP are the norm, especially when the can deliver features like multicast. – Stu Thompson Sep 03 '15 at 14:28
58

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}

GolfARama
  • 709
  • 6
  • 8
41

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.

Pawel K
  • 686
  • 6
  • 17
  • It worked for me, Videojs i was already using and this HLS plugin makes the live channel with m3u8 file work for most of urls, if not all. – Dheeraj Thedijje Sep 30 '16 at 09:37
  • Glad it helped, there is a bit more of a latency though, but that as it seems cannot be helped much. – Pawel K Sep 30 '16 at 09:43
  • I tried your sample but ffmpeg says "At least onde output file must be specified". Any ideas? – Cesar Nov 29 '16 at 11:40
  • 1
    Try this @Cesar: `ffmpeg -v info -rtsp_transport tcp -i rtsp://host:port/[sdp] -c:v copy -c:a copy -maxrate 400k -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` – Pawel K Nov 30 '16 at 12:36
  • btw. I've tested it using ffmpeg 3.1.3 – Pawel K Nov 30 '16 at 12:38
  • Seems that worked. By the way, what do you use in server side to serve that .m3u8? It's being constantly feeded, seems that I can't just normal http to that. – Cesar Nov 30 '16 at 13:18
  • Well I've used a player like the one I've mentioned in the answer i.e. video.js + HLS Plugin referencing local file on the server, so I didn't expose m3u8 file to the web. I've used Apache2.2 as web server. – Pawel K Dec 02 '16 at 08:25
  • I forgot to add it will be fed constantly because it is live stream, but you can change it so it won't overwrite the files in cycles but I don't remember this now it is for sure in the -hls_xxxxx parameters I think if you omit -hls_wrap and -hls_time it would go indefinitely but I'm not sure I didn't research much in that direction – Pawel K Dec 02 '16 at 08:33
  • Nice solution, and not so CPU extensive compared to others I investigated. Thanks. – Deus777 Mar 31 '17 at 11:22
  • can someone help me, where to put this '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' – Arter Jan 30 '18 at 13:52
  • 1
    @Arter Basically you need to run this on your server (from command line) like Linux box or something remote. You need to have the access to the /var/www/html/ folder (in this example) from the current user perspective. You could also try to do it on windows with the help of a LAMP stack or The Uniform Server (much leaner solution) – Pawel K Feb 02 '18 at 10:46
  • 1
    This worked for me. 'hls_wrap' is deprecated in the latest ffmpeg. I used this command line for anyone interested: `ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://[SOURCE] -flags +cgop -g 30 -hls_flags delete_segments [DESTINATION]` – DanTheMan Aug 14 '18 at 16:16
  • Can you elaborate on the adjective `native`? What is considered to be `native`? Thanks! – Minh Nghĩa Sep 03 '19 at 10:29
  • 1
    I meant that the HTML5 does not support the protocol itself out of the box but a translation is required (sort of). Native support would mean that either the code is extended to understand the protocol, or a plugin is written to do just that (in case of a browser, html5 is different story, but in the end the support is in the browser), i.e. take care of repackaging of the RTP and controlling the session with RTCP and RTSP itself. – Pawel K Sep 10 '19 at 11:38
23

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).

ankitr
  • 5,512
  • 7
  • 40
  • 66
  • 3
    How do you play a live audio+video stream using a web socket? The only way for video is using Broadway.js and that's pretty hacky using h264 nal streams. – mark gamache Mar 22 '17 at 01:44
  • 1
    HLS stands for HTTP Live Streaming, I wonder why HLS is widely used for VOD but not LOD? – shintaroid May 11 '17 at 03:35
  • 1
    You can't play a video in the web browser from WebSocket. At least not out of the box. – Michael IV Oct 04 '17 at 16:56
  • -1, for web socket... but not for all the other reasons people are saying. You absolutely can play a video by receiving the data over websocket. This is trivial, with MediaSource Extensions. You shouldn't though, because you can just straight up use HTTP Progressive! – Brad Aug 21 '18 at 21:44
21

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

janesconference
  • 6,045
  • 7
  • 52
  • 71
9

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 ;)

molokoloco
  • 4,126
  • 2
  • 29
  • 26
  • 2
    `"C:\Program Files\VideoLAN\VLC\vlc.exe" -I dummy screen:// :screen-fps=16.000000 :screen-caching=100 :sout=#transcode{vcodec=theo,vb=800,scale=1,width=600,height=480,acodec=mp3}:http{mux=ogg,dst=127.0.0.1:8080/desktop.ogg} :no-sout-rtp-sap :no-sout-standard-sap :ttl=1 :sout-keep` - this is VLC command which streams your input (e.g. screen capture device) to a given output stream (e.g. http://127.0.0.1:8080/desktop.ogg) – Zsolt Feb 12 '13 at 15:09
  • 1
    and then you can embed this on a video tag: ` – Zsolt Feb 12 '13 at 15:14
  • 2
    But the performance is unfortunately pretty poor and would be great if it could also be done with MP4 container. AFAIK more browsers have support for MP4 than for OGG. – Zsolt Feb 12 '13 at 15:16
  • 1
    It worked for me too. I've set VLC for streaming both audio and video via HTTP protocol on `my_ip:port` adress and than I used HTML5 ` – patryk.beza Jul 06 '13 at 16:25
2

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/

vrbsm
  • 1,112
  • 15
  • 21
1

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).

Renegah
  • 19
  • 1
0

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.

Himadhar H
  • 66
  • 7