Question

Here is a overview of my code.
User press a record button and it hits the server to start a surveillance stream,and it returns a rtsp url which I want to play on the website.

I have tried vlc plugin, but it seems to be unreliable the following code creates the after-mentioned problems.

Any other ideas to implement this functionality is more than welcome.

  xmlhttp.onreadystatechange  = function()
    {
     if (xmlhttp.readyState == 4) {
       if(xmlhttp.status == 200) {
         res_array = xmlhttp.responseText.split("#");
         session_id = res_array[0];
        alert(res_array.length);
         if (res_array.length == 4)
         {
             document.getElementById("jsession").innerHTML = xmlhttp.responseText;
             rstp_url = res_array[1];
             jsession_id = res_array[2];
             var vid_tag = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"';
             vid_tag += ' codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"' ;
             vid_tag += ' width="320" height="240" id="vlc" events="True"> <param name="Src" value=" ' + rstp_url +' " /> ';
             vid_tag += ' <param name="ShowDisplay" value="True" /> <param name="AutoLoop" value="False" /><param name="AutoPlay" value="True" />' ;
             vid_tag += '<EMBED pluginspage="http://www.videolan.org" type="application/x-vlc-plugin" progid="VideoLAN.VLCPlugin.2" width="320" height="240"' ;
             vid_tag +=' autoplay="yes" loop="no" target="'+rstp_url+'" name="vlc"> </EMBED></OBJECT>';
             document.getElementById("StopRecording").disabled = false;
             document.getElementById("StartRecording").disabled = true;
             document.getElementById("StopPlayback").visible = false;
             document.getElementById("Playback").disabled = true;
             alert(vid_tag);
             document.getElementById("video_handler").innerHTML = vid_tag;
             document.getElementById("jsession").innerHTML = xmlhttp.responseText;//Update the HTML Form element
         }
         else
            {
             alert("Make sure usename,password and deviceref is correct");
            }
       }
       else {
          alert("Error during AJAX call. Please try again");
       }
     }
};

These are the following problems I have.

• Not working in IE6.
• The stream playing is unreliable. It sometime plays and sometimes doesnt. The only proper way of fixing this seems to be adding a alert box just after the res_array length if check
• Even if try to play a audio source,a black box for playing a video appears.

P.S. Would this get any easier if I try using HTML5 and I know about frameworks such as jquery, but it is not possible for me to use it in this project.

Answer 1

Since you don’t mention OS:
Another windows-only option is to write your own RTSP DirectShow source filter. Such a filter can then be registered for the RTSP protocol. On the webpage you can insert it via:

<div id="mtvPlayer"> 
    <embed 
        type="application/x-mplayer2" 
        pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
        name="mediaplayer1" 
        ShowStatusBar="true" 
        EnableContextMenu="false" 
        autostart="true" 
        loop="false" 
        src="rtsp://<<RTSP URI>>" 
        width="352px"
        height="288px"
    /> 
</div> 

If the filter is registered correctly, the RTSP source filter is automatically loaded and an appropriate media pipeline is constructed. This is the approach I’ve used and it works on IE8, chrome and firefox. I have not tested it with IE6. Who still uses that browser anyway 😛

The downside of this approach is that it’s quite a bit of work (and complex), or at least you need some solid DirectShow experience to implement the filter and cater for different media types.