java web页面调用海康摄像头

    之前做过web页面调用海康显示4个摄像头。网上web调用的确实比较少，我做的时候参考了http://blog.csdn.net/lucius93/article/details/75308165，但也花费了不少的时间，所以写篇尽量详细的，希望小伙伴少走弯路。

1、http://download.csdn.net/download/a670941001/10267445  下载海康开发包，WebComponentsKit.exe安装控件后，选择合适版本的浏览器打开 ，如图：

输入IP地址，端口号，用户和密码，看看是不是可以登录成功，点击预约显示摄像头。（我用的ie浏览器11）

2、如果第一步可以正常显示摄像头，就可以开发了

将开发包js文件和css文件导入工程

3、贴代码

<script type="text/javascript">
var g_iWndIndex = 0; //开发包会默认使用当前选择窗口
$(function () {
    // 检查插件是否已经安装过
    var iRet = WebVideoCtrl.I_CheckPluginInstall();
    if (-1 == iRet) {
        alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
        return;
    }
    // 初始化插件参数及插入插件
    WebVideoCtrl.I_InitPlugin(389, 300, {
        bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iPackageType: 2,    //2:PS 11:MP4
        iWndowType: 2,
        cbSelWnd: function (xmlDoc) {
            g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
            var szInfo = "当前选择的窗口编号：" + g_iWndIndex;
            showCBInfo(szInfo);
        },
        cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
            var szInfo = "当前放大的窗口编号：" + iWndIndex;
            if (!bFullScreen) {            
                szInfo = "当前还原的窗口编号：" + iWndIndex;
            }
            showCBInfo(szInfo);
        },
        cbEvent: function (iEventType, iParam1, iParam2) {
            if (2 == iEventType) {// 回放正常结束
                showCBInfo("窗口" + iParam1 + "回放结束！");
            } else if (-1 == iEventType) {
                showCBInfo("设备" + iParam1 + "网络错误！");
            } else if (3001 == iEventType) {
                clickStopRecord(g_szRecordType, iParam1);
            }
        },
        cbRemoteConfig: function () {
            showCBInfo("关闭远程配置库！");
        },
        cbInitPluginComplete: function () {
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
            // 检查插件是否最新
            if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
                alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.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 molist = <%=monitorList%>;
if(molist.length==1){
changeWndNum(1);
}

});

//登录  

      //szIP  ip地址 ；szPort端口；szUsername用户名；szPassword密码；wIndex窗口编号

function login_m(szIP,szPort,szUsername,szPassword,wIndex){
 var szIP = szIP,
       szPort = szPort,
       szUsername = szUsername,
       szPassword =  szPassword,
       wIndex = wIndex;
   if ("" == szIP || "" == szPort) {
       return;
   }


   var iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
       success: function (xmlDoc) {  
   var szDeviceIdentify = szIP + "_" + szPort;
           setTimeout(function () {
               WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
           iWndIndex:wIndex,
           iStreamType: 2,//由于4个摄像头页面比较卡，这个参数我改成了2（子码流，分辨率就低了）。可以用主码流
         });
           }, 6000);
// }
       },
       error: function (status, xmlDoc) {
        alert("登录失败");
           showOPInfo(szDeviceIdentify + " 登录失败！", status, xmlDoc);
       }
   });
}


// 窗口分割数
function changeWndNum(iType) {
   iType = parseInt(iType, 10);
   WebVideoCtrl.I_ChangeWndNum(iType);
}
</script>

我的最终效果

比较懒，凑合看看吧，欢迎提出技术意见