I would like to display IP cameras streaming in RTSP into a web page.
I've tried many solutions, like using VLC to transcode the stream, but none of them seems to be reliable enough to create a real web service. I'm thinking on using some media server like flussonic or Red5. But I don't know if it will work.
This is why I would like to know what is the best (and the simple) solution to display RTSP streams on a webpage.
RTSP stream are not supported directly by HTML5 browsers.
Using plugins is a limited solution for certain browsers and rest of visitors not using that will not be able to watch stream.
To cover most browsers and devices, stream should be delivered as HTML5 compatible formats like HLS & DASH.
To convert RTSP to HLS you need a streaming server with such capabilities, like Wowza Streaming Engine. For a better understanding you can test this RTSP to Web Demo where you can input your publicly accessible rtsp address and get stream on web as HLS, MPEG DASH, RTMP (Flash).
After tried the "plugins" way suggested in
How can I display an RTSP video stream in a web page?
And the "conversion" way suggested in
https://www.npmjs.com/package/html5_rtsp_player
I finally found a really straight forward solution using this plugin, works for Chrome only which is ok for my project.
https://www.videoexpertsgroup.com/vxg-chrome-plugin/
This is how the html code look like
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script type="text/javascript" src="/assets/vxgplayer-1.8.31/vxgplayer-1.8.31.min.js"></script> <link href="/assets/vxgplayer-1.8.31/vxgplayer-1.8.31.min.css" rel="stylesheet" /> </head> <body> <div class="vxgplayer" id="vxg_media_player1" width="640" height="480" url="rtsp://admin:admin@192.168.1.117/defaultPrimary0?streamtype=u" nmf-src="/assets/vxgplayer-1.8.31/pnacl/Release/media_player.nmf" nmf-path="media_player.nmf" useragent-prefix="MMP/3.0" latency="10000" autohide="2" volume="0.7" avsync autostart controls mute aspect-ratio aspect-ratio-mode="1" auto-reconnect connection-timeout="5000" connection-udp="0" custom-digital-zoom></div> </body> </html>