RTSP IP camera streaming to a webpage using html or other web tech?

Question

currently got a set up of 3 trendinet TV-IP310P cameras which i have been able to get to work on the app iSpy using rtsp://[username]:[password]@[ip-address]:[port]/mpeg4 using a VLC plugin and the results are decent enough.

i want to try embed the feeds on to a webpage but I'm not sure how to do it and what i'll need to do it in.

I had a quick look and saw a few people using <object> tags and an active X plugin with VLC to get it to work and when i copied it and changed it i get a blank screen and nothing.

i used a MBP but have access to windows machines so i've got options on how to approach this.

        <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" />
        <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
        codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
        width="640" height="360" id="vlc" events="True">
            <param name="Src" value="rtsp://XXXX:XXXX@XXXXXXXXX:XXX/mpeg4 />
            <param name="ShowDisplay" value="True" />
            <param name="AutoLoop" value="False" />
            <param name="AutoPlay" value="False" />
        </OBJECT>

Just to make it clear this is my attempt from what i've read and no stream and the player is invisible unless i highlight it.

Answer 1

Firstly, you have an error in your code:

<param name="Src" value="rtsp://XXXX:XXXX@XXXXXXXXX:XXX/mpeg4 />

should be:

<param name="Src" value="rtsp://XXXX:XXXX@XXXXXXXXX:XXX/mpeg4" />

(missing ending quote)

Secondly, I think you have to set "--rtsp-tcp" option on the rtsp playlist item you add to VLC Web Plugin.

Try this:

HTML

<embed id="vlc" type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" width="640" height="480">
</embed>

JavaScript

var vlc = document.getElementById("vlc");
var options = new Array("--rtsp-tcp");
var videoid = vlc.playlist.add("rtsp://XXXX:XXXX@XXXXXXXXX:XXX/mpeg4", "rtsp stream name", options);
vlc.playlist.playItem(videoid);

Source: VLC Web Plugin Documentation