使用海康摄像头实现web端的实时监控

需要注意的 【兼容IE和360】

此插件可以关注“墨水直达”公众号，回复“海康web插件”即可领取

1、首先安装：WebComponents.exe

2、引用webVideoCtrl.js插件

接下来是代码部分：

html:

<div id="divPlugin" class="plugin"></div>

js:

<script>
   var szPort = "监控端口";
    var szUsername = "海康账号";
    var szPassword = "海康密码";
    var MonitorIp = new Array();
    $(function () {
     //这里我用的页面传值，然后多个摄像头ip用 ,号分割;
     var keyValue = request('keyValue');
        MonitorIp = keyValue.split(',');
        //根据ip划分窗口
           var num_priview = 1;
           for (var i = 1; i < 10; i++) {//最多100个窗口
            if (i * i >= MonitorIp.length) {
                num_priview = i;
                break;
            }  
        }
         // 检查插件是否已经安装过,如果安装了插件，但是浏览器还是提示未安装，则是浏览器原因，换成ie或者360
        if (-1 == WebVideoCtrl.I_CheckPluginInstall()) {
            alert("您还未安装过插件，双击开发包目录里的WebComponents.exe安装！【兼容IE和360】");
            return;
        }
          // 初始化插件参数及插入插件
        WebVideoCtrl.I_InitPlugin(720, 460, {
            iWndowType: num_priview//只显示一个预览窗口（1*1）
        });
        WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
        // 检查插件是否最新
        if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
            alert("检测到新的插件版本，双击开发包目录里的WebComponents.exe升级！");
            return;
        }
        for (var j = 0; j < MonitorIp.length; j++) {
            clickLogin(MonitorIp[j], j);//循环登录
        }
    });
     // 登录
    function clickLogin(ip, i) {
        if ("" == szPort) {
            return;
        }
        var iRet = WebVideoCtrl.I_Login(ip, 1, szPort, szUsername, szPassword, {
            async: false,
            success: function (xmlDoc) {
                setTimeout(function () {
                    getChannelInfo(ip);
                }, 10);
            },
            error: function () {
                alert(ip + "登录失败");
            }
        });
        clickStartRealPlay(ip, i);
        if (-1 == iRet) {
            // console.log("已登录过")
        }
    }
     // 获取通道
    function getChannelInfo(szIP) {
        var  nAnalogChannel = 0;
        if ("" == szIP) {
            return;
        }
        // 模拟通道
        WebVideoCtrl.I_GetAnalogChannelInfo(szIP, {
            async: false,
            success: function (xmlDoc) {
                var oChannels = $(xmlDoc).find("VideoInputChannel");
                nAnalogChannel = oChannels.length;
               // console.log(szIP + " 获取模拟通道成功！");
            },
            error: function () {
                alert(szIP + " 获取模拟通道失败！");
            }
        });
    }
    // 开始预览
    function clickStartRealPlay(szIP, g_iWndIndex) {
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
            iStreamType = parseInt("1", 10),
            iChannelID = parseInt("1", 10),
            bZeroChannel = true,
            szInfo = "";
        if ("" == szIP) {
            return;
        }
        if (oWndInfo != null) {// 已经在播放了，先停止
            WebVideoCtrl.I_Stop();
        }
        var iRet = WebVideoCtrl.I_StartRealPlay(szIP, {
            iStreamType: iStreamType,
            iChannelID: iChannelID,
            bZeroChannel: bZeroChannel
        });

        if (0 == iRet) {
            //szInfo = "开始预览成功！";
        } else {
            alert(szIP + " " + szInfo);
        }
    }
    // 开始预览
    function clickStartRealPlay(szIP, g_iWndIndex) {
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
            iStreamType = parseInt("1", 10),
            iChannelID = parseInt("1", 10),
            bZeroChannel = false,
            szInfo = "";
        if ("" == szIP) {
            return;
        }
        if (oWndInfo != null) {// 已经在播放了，先停止
            WebVideoCtrl.I_Stop();
        }
        var iRet = WebVideoCtrl.I_StartRealPlay(szIP, {
            iWndIndex: g_iWndIndex,
            iStreamType: iStreamType,
            iChannelID: iChannelID,
            bZeroChannel: bZeroChannel
        });

        if (0 == iRet) {
            //szInfo = "开始预览成功！";
        } else {
            alert("预览失败" + szIP + " " + szInfo);
        }
    } 
  </script>

效果：

双击页面中的某个摄像头监控，可以放大该监控图