海康摄像头视频实时监控

感谢作者:http://blog.csdn.net/byxdaz/article/details/51647781


海康摄像头视频实时监控与预览,有两种方式:

1、 vlc插件预览视频。

2、 使用海康自带的ActiveX控件预览视频。

 

一、vlc插件预览视频

vlc 提供了ie浏览器的activeX插件和火狐或者chrome的插件,基本上覆盖了所有浏览器,所以有复杂解码需求的情况下用vlc来解决网页播放视频。

 

[html]  view plain  copy
  1. <html>  
  2.   
  3. <title>VLC Mozilla plugin testpage</title>  
  4.   
  5. <head>  
  6.   
  7. <scripttypescripttype="text/javascript">  
  8.   
  9.         
  10.   
  11.        functiongetVLC(name)  
  12.   
  13.        {  
  14.   
  15.    if (window.document[name])  
  16.   
  17.     {  
  18.   
  19.        return window.document[name];  
  20.   
  21.     }  
  22.   
  23.    if (navigator.appName.indexOf("Microsoft Internet")==-1)  
  24.   
  25.     {  
  26.   
  27.        if (document.embeds && document.embeds[name])  
  28.   
  29.            return document.embeds[name];  
  30.   
  31.     }  
  32.   
  33.     else // if(navigator.appName.indexOf("Microsoft Internet")!=-1)  
  34.   
  35.     {  
  36.   
  37.        return document.getElementById(name);  
  38.   
  39.     }  
  40.   
  41.        }  
  42.   
  43.    
  44.   
  45.        functioninit()  
  46.   
  47.        {  
  48.   
  49.               var vlc = getVLC('vlc');  
  50.   
  51.               alert(vlc.versionInfo());  
  52.   
  53.        }  
  54.   
  55.        functionplay(videoUrl)  
  56.   
  57.        {  
  58.   
  59.               varvlc = getVLC('vlc');  
  60.   
  61.               vlc.playlist.clear();  
  62.   
  63.               vlc.playlist.add(videoUrl);  
  64.   
  65.               vlc.playlist.play();  
  66.   
  67.        }  
  68.   
  69.         
  70.   
  71.  function pause()  
  72.   
  73.        {  
  74.   
  75.               varvlc = getVLC('vlc');  
  76.   
  77.               vlc.playlist.pause();  
  78.   
  79.        }  
  80.   
  81.         
  82.   
  83.        functionstop()  
  84.   
  85.        {  
  86.   
  87.               varvlc = getVLC('vlc');  
  88.   
  89.               vlc.playlist.stop();  
  90.   
  91.        }  
  92.   
  93.         
  94.   
  95.        functiontoggleFullscreen()  
  96.   
  97.        {  
  98.   
  99.               varvlc = getVLC('vlc');  
  100.   
  101.               vlc.video.toggleFullscreen();          
  102.   
  103.        }  
  104.   
  105.         
  106.   
  107. </script>  
  108.   
  109. </head>  
  110.   
  111. <body>  
  112.   
  113. <h1>Demo of VLC ie - Example1</h1>  
  114.   
  115.    
  116.   
  117. <object id="vlc"width="640" height="540"classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">  
  118.   
  119.          <param name='volume' value='50' />  
  120.   
  121.          <param name='autoplay' value='false' />  
  122.   
  123.          <param name='loop' value='false' />  
  124.   
  125.          <param name='fullscreen' value='true' />  
  126.   
  127. <EMBEDpluginspageEMBEDpluginspage="http://www.videolan.org"  
  128.   
  129.       type="application/x-vlc-plugin"  
  130.   
  131.       version="VideoLAN.VLCPlugin.2"  
  132.   
  133.       width="640"  
  134.   
  135.       height="480"  
  136.   
  137.       toolbar="true"  
  138.   
  139.       loop="true"  
  140.   
  141.       text="Waiting for video"  
  142.   
  143.       name="vlc">  
  144.   
  145. </EMBED>  
  146.   
  147. </object>  
  148.   
  149. <br/>  
  150.   
  151. <a href="javascript:;"onclick='init()'>init</a>  
  152.   
  153. <a href="javascript:;" onclick='play("rtsp://admin:12345@192.168.1.100:554/h264/ch1/main/av_stream")'>Playvideo</a>  
  154.   
  155. <a href="javascript:;"onclick='play("rtsp://admin:12345@192.168.1.100:554/Streaming/tracks/101?starttime=20160612t113812z&endtime=20160612t135959z")'>Playhistory video</a>  
  156.   
  157. <a href="javascript:;"onclick='pause()'>Pause video</a>  
  158.   
  159. <a href="javascript:;"onclick='stop()'>Stop video</a>  
  160.   
  161. <a href="javascript:;"onclick='toggleFullscreen()'>Fullscreen</a>  
  162.   
  163. </body>  
  164.   
  165. </html>  

海康设备获取视频RTSP协议格式  

主码流

rtsp://admin:12345@192.168.1.100:554/h264/ch1/main/av_stream

rtsp://admin:12345@192.168.1.100:554/MPEG-4/ch1/main/av_stream

子码流:

rtsp://admin:12345@192.168.1.100:554/mpeg4/ch1/sub/av_stream

rtsp://admin:12345@192.168.1.100:554/h264/ch1/sub/av_stream

 

 

二、使用海康自带的Active控件预览视频。

2.1. 选取海康网络摄像头并进行部署,假设访问地址为:http://192.168.1.100:80。

     2.2. 访问http://192.168.1.100:80,IE浏览器会提示需要安装ActiveX控件,将ActiveX控件存储到本地(IPCameraActiveX.cab.cab)。

     2.3. 解压IPCameraActiveX.cab,用记事本打开IPCameraActiveX.inf文件,查看代码段:

 

[NetVideoActiveX23.ocx]

 

file-win32-x86=thiscab

 

RegisterServer=yes

 

clsid={CAFCF48D-8E34-4490-8154-026191D73924}

 

DestDir= 11

 

FileVersion=2,3,21,1

 

     2.4. 记录上面的“clsid”。

     2.5. 在网页中注册上述ocx控件,使用js调用控件的中的方法进行登录,查看等操作(查看其他操作可查找:海康OCX控件接口文档),代码如下:

[html]  view plain  copy
  1. <html>  
  2.   
  3. <head>  
  4.   
  5.    
  6.   
  7.    <title>海康摄像头实时监控</title>  
  8.   
  9.    
  10.   
  11.    <script type="text/javascript">  
  12.   
  13.    function login()  
  14.        {  
  15.   
  16.          var videoPlugin = window.document.getElementById("videoPlugin");  
  17.    
  18.           loginRes=videoPlugin.Login("192.168.6.64","81","admin","12345");  
  19.   
  20.          playResvideoPlugin.StartRealPlay(0,1,0);  
  21.   
  22.        }  
  23.   
  24.    </script>  
  25.   
  26. </head>  
  27.   
  28. <body>  
  29.   
  30.    <form id="form1">  
  31.   
  32.            <objectidobjectid="video Plugin" class="objectClass"  
  33.   
  34.    
  35.   
  36. classid="clsid:CAFCF48D-8E34-4490-8154-026191D73924"  
  37.   
  38.    
  39.   
  40.     codebase="IPCameraActiveX.cab" width="800"height="600"></object>  
  41.   
  42.    
  43.   
  44.        <input id="Button1" type="button"value="button" onclick="login()" />  
  45.   
  46.    
  47.   
  48.    </form>  
  49.   
  50.    
  51.   
  52. </body>  
  53.   
  54. </html>  


    

代码:下载

参考资料:

vlc官网:http://www.videolan.org

vlc 网页插件的使用与控制 API: http://www.xuebuyuan.com/2224602.html




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值