Updated on May 21, 2021
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 I'll show you how.
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.
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 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.
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!
More Related Articles