Coder Perfect

HTML5 streaming over RTSP or RTP


I’m working on a web application that should be able to play back an RTSP/RTP stream from a server (

Is the rtsp or rtp supported by the HTML5 video/audio tag? If not, what is the simplest solution? Consider using a VLC plugin or something similar.

Asked by Elben Shira

Solution #1

(but not really…)

The video> tag in HTML 5 is protocol agnostic, meaning it doesn’t care. As part of the URL, you include the protocol in the src property. E.g.:

<video src="rtp://">
    Your browser does not support the VIDEO tag and/or RTP streams.

or maybe

<video src="">
    Your browser does not support the VIDEO tag and/or RTP streams.

However, the video> tag’s implementation varies by browser. Because HTML 5 is still in its early stages, I expect support to change regularly (or lack of support).

The video element is defined in the HTML5 specification by the World Wide Web Consortium (W3C):

Answered by Stu Thompson

Solution #2

I believe the question’s essence was not adequately addressed. Currently, you can’t use a video tag to play rtsp streams. The second answer about the link to the Chromium guy’s “never” is a little deceptive because the linked thread / answer isn’t specifically about Chrome playing rtsp via the video tag. Read the full linked topic, including the comments and links to other threads at the bottom.

The correct response is as follows: No, you can’t simply add a video element to an html 5 website and expect it to play rtsp. To play streaming video, you’ll need to utilize a Javascript library (unless you want to delve into using flash and silverlight players). {IMHO} The various vendors of proprietary video standards are not interested in helping this move forward at the rate that the html 5 video discussion and implementation is going, so don’t count on the promised ease of use of the video tag unless the browser makers take it upon themselves to solve the problem…again, not likely. {/IMHO}

Answered by GolfARama

Solution #3

This is an old question, but I recently had to do it myself and came up with something that worked, so (apart from the fact that a response like mine would save me time): Basically, modify the container to HLS with ffmpeg; most IPCams stream h264 and a basic sort of PCM, so use something like 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

Then, using the HLS plugin, use video.js. This will work well with a live feed. A jsfiddle example is also available under the second link).

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

Answered by Pawel K

Solution #4

HTML5 supports three different streaming protocols and technologies:

Live streaming, low latency – WebRTC – Websocket

High-latency VOD and live streaming – HLS

1. WebRTC

WebRTC is, in fact, SRTP (secure RTP protocol). As a result, we may argue that video tag indirectly supports RTP(SRTP) via WebRTC.

As a result, in order to see RTP streams in Chrome, Firefox, or another HTML5 browser, you’ll need a WebRTC server to transmit the SRTP stream to the browser.

2. Websocket

TCP is used, but it has a lower latency than HLS. You’ll need a Websocket server once more.

3. HLS

The most widely used high-latency streaming protocol for video on demand (pre-recorded video).

Answered by ankitr

Solution #5

RTSP streaming will never be supported by Chrome.

At the very least, as one Chromium engineer put it:

Answered by janesconference

Post is based on