Streaming via RTSP or RTP in HTML5

user_100472 0
Viewed 542061

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.

rtsp rtp video streaming html
10 Answers

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.

user_5920050

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

user_1744490

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

user_2914550

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.

user_176795650

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.

user_60327640
Related