Streaming via RTSP or RTP in HTML5

Question

I'm building a web application that should play back an RTSP/RTP stream from a server.

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.

Answer 1

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 H.264 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 the second link).

Note: although this is not a native support, it doesn't require anything extra on the user frontend.

Answer 2

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 (without any 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).

Answer 3

I am adding a conclusion as of now.

I am trying to build a way around it meaninglessly since RTSP doesn't work out of the box. 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 without any intermediary servers, we came up with a solution involving the canvas tag to bridge the non-webview with the webview.

Answer 4

Chrome does not implement support of RTSP streaming. An important project to check it is WebRTC.

From its website:

"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

Answer 5

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 HTML5 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 HTML5 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}

Answer 6

Years past, there are some updates about RTSP in HTML5:

• RTSP is not supported in HTML5, 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 HTML5, or hls.js to play HLS on HTML5.
• WebRTC is also a possible way to play streaming in HTML5, 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 HTML5 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 HTML5 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 HTML5 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.

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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