Web端海康威视开发

前言

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

认识Demo

接下来肯定是上网查找资料,下载文件咯,我从官网下载了demo文件
Web端海康威视开发_第1张图片
注:Demo必须使用IE浏览器,这里可以建议使用360浏览器或者QQ浏览器(都是双内核浏览器)

开始使用

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

插件安装

点击之后傻瓜式安装即可

启动nginx

接下来先启动nginx,点击nginx文件夹中的start.bat,弹幕一闪而逝,即可启动成功,
Web端海康威视开发_第2张图片

首页界面

Web端海康威视开发_第3张图片
成功进入的图片如上图所示,输入正确的账号密码以及端口号,点击登录
Web端海康威视开发_第4张图片
已登录设备中可以查看到目前登录的ip地址,
点击开始预览即可成功显示视频,
若显示设备不支持Websocket取流!则更改浏览器内核,将内核改为IE内核或者兼容模式
Web端海康威视开发_第5张图片

Web端海康威视开发_第6张图片

升级

代码更改

海康威视的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(" + szDeviceIdentify + "");

                $("#alery").prepend(""+szDeviceIdentify+"
"); var ips0 =szDeviceIdentify.replace(".","").replace(".","").replace(".","").replace(".","").replace("_",""); $("#mynames").prepend("
"
); 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接口是登录摄像头使用的,登录成功后可得到该摄像头可以预览的按钮.
Web端海康威视开发_第7张图片
在这里遍历登录后最后又调用了一次 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共享出来

你可能感兴趣的:(代码小锋,海康威视,海康威视Web开发,海康威视,摄像头,摄像头二次开发,海康威视二次开发)