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

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

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

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

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!

Recommended by the Author: The Best VLC Alternative for Webpage Video Conversion

- Convert any video to AVI, MP4, MOV, WMV, HTML5, VP9, WebM, etc.
- Download HTML5 video from YouTube, Vimeo, Dailymotion, etc.
- 50X faster conversion, batch conversion supported
- Significantly compress videos with minumum quality loss
- Transcode videos with advanced video encoders for smaller size and better quality

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