Free Download
Easiest Way to Achieve RTSP HTML5 Playback.
AuthorRecommended by the author
Free Download X

SoftwareHow to & Tips

Video FormatsConvert Video

Resources

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

Author by Oswald

August 14, 2019

One can’t directly play RTSP (Real Time Streaming Protocol) streams on HTML5 webpage since RTSP is not supported by 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 I’ll show you how.

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

The method I’m providing here is about 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

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.

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 PlayerLoad RTSP streams into VLC Media Player

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

Stream RTSP VLCStream RTSP VLC

Step 2. Go to “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 streamsVLC 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), 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 it’s 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.

Free Download Free Download

More Related Articles

[Solved] How to Fix VLC Subtitle Delay Issue Without Any Hassle IPTV VLC – How to Stream IPTV M3U/M3U8 Playlist on VLC How to Fix VLC Lagging/Stuttering/Buffering Issues
What Should You Do When VLC Is Unable to Open the MRL for YouTube VLC Audio Sync – How to Fix Audio Sync Problems in VLC How to Create VLC Playlists on Computer and Android