[SOLVED] Streaming RTSP Locally through HTML5

Streaming RTSP Locally through HTML5

I am attempting to host a local website on my RaspberryPi using raspivid, and HTML 5. So far, I have managed to get the RTSP link, and view this live stream on VLC player across various devices. The link looks as follows: RTSP://1XX.1XX.X.1XX:PORT/

Now attempting to embed this stream into the server site, I have tried the video tag;

<video src="rtsp://1XX.1XX.X.1XX:PORT">
  Your browser does not support the VIDEO tag and/or RTP streams.
</video>

which returns the error:

Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

I have also tried the to directly embed the VLC player;

   <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
     codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
     width="640" height="480" id="vlc" events="True">
   <param name="Src" value="rtsp://1XX.1XX.X.1XX:PORT" />
   <param name="ShowDisplay" value="True" />
   <param name="AutoLoop" value="False" />
   <param name="AutoPlay" value="True" />
   <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
     target="rtsp://1XX.1XX.X.1XX:PORT" ></embed>
</OBJECT>

this method displays 'plug in not supported' on chrome, and doesn't show at all on safari. I would preferably like to find a method of embedding this stream, without requiring specific browser plug-ins, as the server will be accessed by various devices and browsers on the network.

If anyone has any advice or ideas on how to get this up and running, or if this is possible at all, I'd be super grateful, as I've spent a couple of days on this now, and can't seem to find any relevant/up-to-date guidance on this anywhere.

If possible, I would like to avoid any port forwarding. I am happy to implement simple APIs if necessary, however I want to keep the project fairly 'bare bones', and not overcomplicate things. The website is static, and I'd prefer to not require any backend/PHP type stuff.

Solution

I am not aware of any Browser supporting RTSP natively at this time.

There have been plugin based solutions and workarounds in the past, as you have seen, but I don't think any are reliable. There is a good summary in this answer: How can I display an RTSP video stream in a web page?

The most common approach is to convert the RTSP stream into something that browsers can display - usually HLS or DASH, or WebRTC. Libraries are available to provide this functionality - e.g:

https://github.com/deepch/RTSPtoWebRTC (RTSP to WebRTC)
https://github.com/Roverr/rtsp-stream & https://github.com/videowhisper/PHP-RTSP-IP-Camera-Streaming (RTSP to HLS and to DASH - not sure how current these are)

You can also use ffmpeg to do the conversion yourself - if you search you will find multiple blogs, guides etc on this (e.g.: https://superuser.com/a/1208297).