[转载]海康摄像头_2

原文地址:https://blog.youkuaiyun.com/qq_35583089/article/details/81219954
查看原文
感谢大佬分享，以下为原文内容：

  上篇博客介绍了海康威视sdk以及web端的开发，成功预览。还没有成功的朋友可以去看一下上一篇文章

  关于海康威视sdk与海康威视web的史上最精细的教程 （一）

但都是单个摄像头，心里总有个疑问，俩个摄像头同时预览该怎么实现呢，经过和前端同时半天的探索，终于弄明白了，得到了如下的成果。

下面就简单说一下流程：

1.打开页面初始化插件

 
 

   
   

    
    

   
   
   
   

    
    

     
     // 初始化插件
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     // 全局保存当前选中窗口
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     var g_iWndIndex = 
     
     0; 
     
     //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     $(
     
     function () {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
     
     // 检查插件是否已经安装过
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
     
     if (
     
     -1 == WebVideoCtrl.I_CheckPluginInstall()) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             alert(
     
     "您还未安装过插件，下载WebComponents.exe安装！");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             
     
     return;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
     
     // 初始化插件参数及插入插件
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         WebVideoCtrl.I_InitPlugin(
     
     951.5, 
     
     360, {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             
     
     iWndowType: 
     
     2,
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             
     
     cbSelWnd: 
     
     function (xmlDoc) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 g_iWndIndex = $(xmlDoc).find(
     
     "SelectWnd").eq(
     
     0).text();
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 
     
     var szInfo = 
     
     "当前选择的窗口编号：" + g_iWndIndex;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 showCBInfo(szInfo);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         });
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         WebVideoCtrl.I_InsertOBJECTPlugin(
     
     "divPlugin");
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
     
     // 检查插件是否最新
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
     
     if (
     
     -1 == WebVideoCtrl.I_CheckPluginVersion()) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             alert(
     
     "检测到新的插件版本，请将WebComponents.exe升级！");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             
     
     return;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
     
     // 窗口事件绑定
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         $(
     
     window).bind({
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             
     
     resize: 
     
     function () {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 
     
     var $Restart = $(
     
     "#restartDiv");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 
     
     if ($Restart.length > 
     
     0) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                     
     
     var oSize = getWindowSize();
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                     $Restart.css({
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                         
     
     width: oSize.width + 
     
     "px",
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                         
     
     height: oSize.height + 
     
     "px"
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                     });
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         });
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
     
     //初始化日期时间
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
     
     var szCurTime = dateFormat(
     
     new 
     
     Date(), 
     
     "yyyy-MM-dd");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         $(
     
     "#starttime").val(szCurTime + 
     
     " 00:00:00");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         $(
     
     "#endtime").val(szCurTime + 
     
     " 23:59:59"); 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     //这里要用setTimeout调用登录和预览方法 ，如果直接调用  会打不开窗口 ，因为加载时需要时间的
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         clickLogin();
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	setTimeout(
     
     function () {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		clickStartRealPlay()
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	}, 
     
     2000)
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
        
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     });
    
    
   
   
 
 

 

2写一个登录方法，将后台每台摄像机的属性信息传过来，循环登陆。

 
 

   
   

    
    

   
   
   
   

    
    
 
     
     var ce02m=
     
     new 
     
     Array();
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
     
     var ce03m=
     
     new 
     
     Array();
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
     
     var ce04m=
     
     new 
     
     Array();
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
     
     var ce05m=
     
     new 
     
     Array();
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         <c:forEach items="${monitor}" var="monitor11">  
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         ce02m.push("${monitor11.ce02}");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         ce03m.push("${monitor11.ce03}");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         ce04m.push("${monitor11.ce04}");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         ce05m.push("${monitor11.ce05}");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         </c:forEach>  
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         var szIP = ce02m;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         var szPort = ce05m;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         var szUsername = ce03m;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         var szPassword = ce04m;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         // 登录
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         function clickLogin() {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             for(var i=0;i<szIP.length;i++){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             var iRet = WebVideoCtrl.I_Login(szIP[i], 1, szPort[i], szUsername[i], szPassword[i], {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             });
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             }
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   
 
 

 

3.这一步相当于点击预览功能，将每个设备的ip传入I_StartRealPlay()方法中.

  

 
 

   
   

    
    

   
   
   
   

    
    

     
       
     
     function clickStartRealPlay() {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             
     
     for(
     
     var i=
     
     0;i<szIP.length;i++){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
              iWndIndex=i;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             
     
     var iRet = WebVideoCtrl.I_StartRealPlay(szIP[i], {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 
     
     iWndIndex:iWndIndex
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             });
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
      }
    
    
   
   
 
 

 iWndIndex是选定的窗口号   ，在不传的情况下是默认为0，我用I表示，可以按循环打开固定的窗口号

这一步用于展示窗口，有1*1，2*2，3*3，4*4四种展示格式，分别对应1，2，3，4。以自己的设备为准。

 
 

   
   

    
    

   
   
   
   

    
    

     
           
     
     if(ce02m.length>
     
     9){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             changeWndNum(
     
     4);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           }
     
     else{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             
     
     if(ce02m.length>
     
     4){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             changeWndNum(
     
     3);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           }
     
     else{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 changeWndNum(
     
     2);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       
    
    
   
   
 
 

ok，成功展示多个摄像头。欢迎大家留言讨论。