Web端海康威视开发

前言

之前使用海康威视的产品是使用海康的windows安装的软件(ivms-8700),但是现在有需求在web页面上实时查看监控视频,有需求就开干.撸起袖子加油干.

认识Demo

接下来肯定是上网查找资料,下载文件咯,我从官网下载了demo文件

注:Demo必须使用IE浏览器,这里可以建议使用360浏览器或者QQ浏览器(都是双内核浏览器)

开始使用

在开始使用时我们需要先打开codebase文件夹中的WebComponentsKit.exe进行安装(这里有64位和32位),如果你是64位的操作系统,安装完之后还提示需要安装插件,那么最好把32位的也安装了.

插件安装

点击之后傻瓜式安装即可

启动nginx

接下来先启动nginx,点击nginx文件夹中的start.bat,弹幕一闪而逝,即可启动成功,

首页界面

成功进入的图片如上图所示,输入正确的账号密码以及端口号,点击登录

已登录设备中可以查看到目前登录的ip地址,
点击开始预览即可成功显示视频,
若显示设备不支持Websocket取流！则更改浏览器内核,将内核改为IE内核或者兼容模式

升级

代码更改

海康威视的Demo的插件是固定大小的,我这里更改为获取屏幕的宽和高,然后将宽度和高度确定下来

 // 初始化插件参数及插入插件
    WebVideoCtrl.I_InitPlugin(document.body.clientWidth-110, document.body.clientHeight-50, {
        bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iPackageType: 2,    //2:PS 11:MP4
        iWndowType: 2,
        bNoPlugin: true,
        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);
                        
            // 此处可以处理单窗口的码流切换
            /*if (bFullScreen) {
                clickStartRealPlay(1);
            } else {
                clickStartRealPlay(2);
            }*/
        },
        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;
            }*/
        }
    });

我这里进行了更改,将用户每次登陆更改为当页面进入后遍历登录所有的摄像头,供用户点击预览

    //遍历登录
for (var i=0;i<ips.length;i++){

    (function(i) {

        var szDeviceIdentify = ips[i] + "_80";

        WebVideoCtrl.I_Login(ips[i], 1, 80, '你的账号', '你的密码', {
            success: function (xmlDoc) {

                showOPInfo(szDeviceIdentify + " 登录成功！");

                $("#ip").prepend("<option value='" + szDeviceIdentify + "'>" + szDeviceIdentify + "</option>");

                $("#alery").prepend("<a>"+szDeviceIdentify+"</a><br/>");

                var ips0 =szDeviceIdentify.replace(".","").replace(".","").replace(".","").replace(".","").replace("_","");

                $("#mynames").prepend("<button id='ips"+ips0+"' οnclick='namesdianji(\""+szDeviceIdentify+"\")' class=\"layui-btn layui-btn-sm\"></button><br/>");

                setTimeout(function () {
                    $("#ip").val(szDeviceIdentify);
                    getChannelInfo();
                    getDevicePort();
                }, 10);



                (function(i) {
                       // showOPInfo(szDeviceIdentify + " 进来了1"+"i为"+i);
                    if (i<4){
                        clickStartRealPlay(szDeviceIdentify,i);
                    }
                })(i)




            },
            error: function (status, xmlDoc) {
                showOPInfo(szDeviceIdentify + " 登录失败！", status, xmlDoc);
            }
        });



        if (-1 == iRet) {
            showOPInfo(szDeviceIdentify + " 已登录过！");
        }

        if (i==ips.length-1){
        setTimeout(function() {


        clickStartRealPlay1();
        },  1000);
        }
       /* setTimeout(function() {
            console.log(i);
        }, (i + 1) * 1000);*/
    })(i)





}

通过文档可以查询该 WebVideoCtrl.I_Login接口是登录摄像头使用的,登录成功后可得到该摄像头可以预览的按钮.

在这里遍历登录后最后又调用了一次 clickStartRealPlay1();函数,该函数主要是为了给第一个框框预览使用的,因为通过遍历得到的视频第一个是有问题的(原因不知),如果有知道的可以留言告诉我一声.万分感谢
下面贴出循环遍历调用的函数(也就是预览2 3 4窗口的函数)和只调用一次的函数(窗口1)

// 开始预览
function clickStartRealPlay(szDeviceIdentify,ckId) {
   // showOPInfo(szDeviceIdentify + " 进来了3"+"ckId:"+ckId);
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
        /* szDeviceIdentify = $("#ip").val(),
         iRtspPort = parseInt($("#rtspport").val(), 10),
         iChannelID = parseInt($("#channels").val(), 10),
         bZeroChannel = $("#channels option").eq($("#channels").get(0).selectedIndex).attr("bZero") == "true" ? true : false,
         szInfo = "";

     if ("undefined" === typeof iStreamType) {
         iStreamType = parseInt($("#streamtype").val(), 10);
     }
 */

    szInfo = "";
    if (null == szDeviceIdentify) {
        return;
    }
    if (null == ckId || "" == ckId) {
        return;
    }
   // showOPInfo(szDeviceIdentify + " 进来了2");
    var startRealPlay = function () {
        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
            iWndIndex:ckId,
            iRtspPort: 554,
            iStreamType: 2,
            iChannelID: 1,
            bZeroChannel: false,
            success: function () {
                szInfo = "开始预览成功！";
                showOPInfo(szDeviceIdentify + " " + szInfo);
            },
            error: function (status, xmlDoc) {
                if (403 === status) {
                    szInfo = "设备不支持Websocket取流！";
                } else {
                    szInfo = "开始预览失败！";
                }
                showOPInfo(szDeviceIdentify + " " + szInfo);
            }
        });
    };

    if (oWndInfo != null) {// 已经在播放了，先停止
        WebVideoCtrl.I_Stop({
            success: function () {
                startRealPlay();
            }
        });
    } else {
        startRealPlay();
    }
}

// 开始预览通道1
function clickStartRealPlay1() {

    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
     

    /* if ("undefined" === typeof iStreamType) {
         iStreamType = parseInt($("#streamtype").val(), 10);
     }*/

    if (null == szDeviceIdentify) {
        return;
    }

    var startRealPlay = function () {
        var ip =ips[0]+'_80'
        WebVideoCtrl.I_StartRealPlay(ip, {
            iRtspPort: ips[0],
            iStreamType: 2,
            iChannelID: 1,
            bZeroChannel: false,
            success: function () {
                szInfo = "开始预览成功！";
                showOPInfo(szDeviceIdentify + " " + szInfo);
            },
            error: function (status, xmlDoc) {
                if (403 === status) {
                    szInfo = "设备不支持Websocket取流！";
                } else {
                    szInfo = "开始预览失败！";
                }
                showOPInfo(szDeviceIdentify + " " + szInfo);
            }
        });
    };

    if (oWndInfo != null) {// 已经在播放了，先停止
        WebVideoCtrl.I_Stop({
            success: function () {
                startRealPlay();
            }
        });
    } else {
        startRealPlay();
    }
}

下面就是我的界面

点击左边的按钮就可以更换新的视频监控.

文件下载

应广大博友的呼声,将需要下载的文件Demo共享出来