利用live555 Media Server和VLC Active ocx实现简单的流媒体点播系统(B/S)

   1. 大体的架构及流程
        实现视频点播系统,B/S架构,服务端至少应该是两个服务器:流媒体服务器,web服务器。客户端则就是web页面。当开启页面后则是客户端和服务器的第一次交互,通过http协议得到页面。里面会有流媒体地址的信息,浏览器里面点击显示视频组件,将流媒体的地址传给流媒体播放器,并启动播放器去请求视频。这是第二次交互。服务器端流媒体服务器发送流给客户端,页面上播放就okay了。
 
         2. 环境及所需软件
        测试环境是xp sp2及IE 6浏览器。
        服务端(IP地址:192.168.10.177):
        流媒体服务器先用个简单的:live555 Media Server(http://www.live555.com/mediaServer/windows/live555MediaServer.exe)
        Web服务器可以用Tomcat,IIS或者其他的Web服务器都可以。本文直接使用静态页面进行测试,不搭建Web服务。
        客户端(IP地址:192.168.10.177):vlc-2.0.4的Activex ocx
        
         3. 配置流媒体服务器
        下载完live555 Media Server之后放到服务端D:/video目录(需要保证在video目录下有bipbop-gear1-all.ts、02.mp3文件)下面,启动时会有以下信息:
"Play streams from this server using the URL
        rtsp://192.168.10.177/<filename>
where <filename> is a file present in the current directory."
并且后面还会有live555支持的视频格式。本测试就用的mp3和ts格式。其他格式没有试验过。
        mp3好说,ts怎么得到呢?这时候vlc就出场了。vlc有转换保存功能,媒体->转换/保存->选择某个文件后点击转换/保存->流输出页面勾选本地播放,勾选文件并且浏览得到个文件名,注意后缀为ts而不是ps,方案封装选MPEG-TS,然后点击save。把你选择的视频播放一遍之后,ts格式的文件就生成好了。
        将生成好的ts文件和网上下载的mp3放到d:/video下面,本测试为bipbop-gear1-all.ts及02.mp3。这样流媒体服务器就配置好了。
 
         4. 客户端web页面测试
        本web页面代码是vlc的Activex测试代码test.html上修改精简的。
       
[html]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml" >   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
  5. <script>   
  6. var itemId = 0;   
  7. function getVLC(name)   
  8. {   
  9.         if (window.document[name])      
  10.         {   
  11.                 return window.document[name];   
  12.         }   
  13.         if (navigator.appName.indexOf("Microsoft Internet")==-1)   
  14.         {   
  15.                 if (document.embeds && document.embeds[name])   
  16.                         return document.embeds[name];      
  17.         }   
  18.         else   
  19.         {   
  20.                 return document.getElementById(name);   
  21.         }   
  22. }   
  23.   
  24. function doGo(mrl)   
  25. {   
  26.         var vlc = getVLC("vlc");   
  27.         itemId=vlc.playlist.add(mrl);   
  28.         vlc.playlist.playItem(itemId);   
  29.         document.getElementById("btn_stop").disabled = false;   
  30. }   
  31.   
  32. function updateVolume(deltaVol)   
  33. {   
  34.         var vlc = getVLC("vlc");   
  35.         vlc.audio.volume += deltaVol;   
  36. }   
  37.   
  38. function doPlay()   
  39. {   
  40.         vlc.playlist.playItem(itemId);   
  41.            
  42.         document.getElementById("btn_stop").disabled = false;   
  43.         document.getElementById("btn_play").disabled = true;   
  44. }   
  45.   
  46. function doStop()   
  47. {   
  48.         getVLC("vlc").playlist.stop();   
  49.         document.getElementById("btn_stop").disabled = true;   
  50.         document.getElementById("btn_play").disabled = false;   
  51. }   
  52. </script>   
  53. </head>   
  54. <body>   
  55. <div style="margin: 50px">   
  56.         <a title="rtsp://192.168.10.177/bipbop-gear1-all.ts" href="#" onclick="doGo(this.title);return false;">bipbop-gear1-all.ts</a>   
  57.         <span style="margin: 20px;" />            
  58. </div>   
  59. <div>   
  60.         <object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"   
  61.                 width="640"   
  62.                 height="480"   
  63.                 id="vlc"   
  64.                 events="true">   
  65.         <param name="mrl" value="" />   
  66.         <param name="showdisplay" value="true" />   
  67.         <param name="autoloop" value="false" />   
  68.         <param name="autoplay" value="false" />   
  69.         <param name="volume" value="50" />   
  70.         <param name="starttime" value="0" />   
  71.         <embed pluginspage="http://www.videolan.org"   
  72.                      type="application/x-vlc-plugin"   
  73.                      version="videolan.vlcplugin.2"   
  74.                      width="640"   
  75.                      height="480"   
  76.                      name="vlc">   
  77.         </embed>   
  78.         </object>   
  79. </div>   
  80. <div>   
  81. <input type=button id="btn_play" value=" 播放 " onClick='doPlay();' disabled="true">   
  82. <input type=button id="btn_stop" value="停止" onClick='doStop();' disabled="true">   
  83. <input type=button value="静音切换" onclick='getVLC("vlc").audio.togglemute();'>   
  84. <input type=button value="减小音量" onclick='updateVolume(-10)'>   
  85. <input type=button value="增加音量" onclick='updateVolume(+10)'>   
  86. </div>   
  87. </body>   
  88. </html>  
   保存为VLCTest.html,以IE浏览器打开即可。

你可能感兴趣的:(利用live555 Media Server和VLC Active ocx实现简单的流媒体点播系统(B/S))