[Tutorial] Easiest Way to Play RTSP Streams on HTML5 Webpage Without Plugin - VLC RTSP HTML5 Transcoding

Updated on Mar 2, 2023

One can't directly play RTSP (Real Time Streaming Protocol) streams on HTML5 webpage since RTSP is not supported by the HTML5 <video> tag. But RTSP HTML5 playback is achievable if you transcode RTSP to HTTP, and you can also implement RTSP live streaming by doing so. Keep reading and learn how.

※ Part 1. Get Stuck in RTSP HTML5 Playback Issue?

※ Part 2. How to Play RTSP Streams on HTML5 Webpage with VLC Media Player

The most-used way of achieving RTSP HTML5 playback is to embed VLC into the HTML5 webpage and adopt it as an HTML5 RTSP player, but that involves a complex process as well as HTML5 code so I wouldn't suggest you do that. On the other hand, the fact that it's really hard to find a proper HTML5 RTSP player aside, it's sophisticated to configure it as well.

The method I'm providing here is to transcode RTSP to HTTP so that HTML5 will play it correctly, and it only takes one third party tool: The open-source VLC Media Player. Have a try on your own and see if it works for you.

Posts you may like: Download HTML5 Video | Merge Videos in VLC | VLC Codecs | Cut MP3 in VLC

These are what you need for preparation…

1. VLC Media Player. If you haven't had it installed on your computer, download it at https://www.videolan.org/vlc/index.html and install it.

2. A browser that supports HTML5. (The browser I'm using here is Chrome)

3. RTSP URL (Stream address of IPCamera, lookup for that according to the brand), IP address of your native server.

Load RTSP streams into VLC Media Player

Step 1. Launch VLC Media Player, go to the "Media" tab > Open Network Stream (or Ctrl+N)

Stream RTSP VLC

Step 2. Go to the "Network" tab, type in the RTSP URL to the "Network URL" box (in the form of rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream). Then select "Stream" (ALT+S) from the "Play" button underneath.

Step 3. Click "Next".

VLC transcoding RTSP streams

Step 4. Set the "New" destination as "HTTP" > Click "Add" > Type "/stream" in "Path". Thus the address of the output stream will be the IP address of "your native server/stream". Click "Next" to proceed.

Step 5. Transcode RTSP video stream to HTML5 supported video codec, Video-Theora+Vorbis (OGG), then click "Next".

Step 6. Check the output media codec at "Generated stream output string", make sure vcodec=theo and mux=ogg, manually modify otherwise. At last, click "Stream".

Step 7. Now it's time to embed RTSP stream in web page. Keep VLC running for constantly transcoding, embed RTSP stream HTML5 webpage tag and it's done.

At last...

VLC is way beyond a media player and it's powerful and multifunctional in video transcoding indeed. But its supported input/output formats, conversion speed, output quality are usually barely satisfactory. If you are looking for more professional video transcoding, here's the highly recommended VLC alternative: WonderFox HD Video Converter Factory Pro, with full VLC main features and more. Download it now and discover more!

How to & Tips

[Tutorial] Easiest Way to Play RTSP Streams on HTML5 Webpage Without Plugin - VLC RTSP HTML5 Transcoding