海康网络监控web3.0调用

时间:2024-04-04 12:13:56

一、安装控件

下载控件    密码 :fepw

1、安装控件:海康web3.0开发包\demo\codebase\WebComponentsKit.exe,双击安装。

2、成功加载控件之后开始测试网络监控是否可用:打开海康web3.0开发包\demo\cn\demo.html,如果加载失败会有弹窗提示(请看第3条),没有提示则表示加载成功。

3、请使用64位IE浏览器,IE10以上请点击 启动64位IE.reg,IE9及以下请进入C:\Program Files\Internet Explorer启动。(如果还是无法加载控件请看第4条)

4、浏览器--工具--internet选项--安全--internet--自定义级别,将ActiveX控件和插件有关的项目全部点击启用!(如果还是无法加载控件请将控件卸载,并仔逐字阅读将步骤再来一次,成功为止!)

成功后如下:

海康网络监控web3.0调用

完成后截图如下:

海康网络监控web3.0调用

走到这一步就证明监控和控件都可行,接下来就简单了,看API写代码,都是你们的强项了,就不细说了,附上我个人的代码以供大家参考。

<!doctype html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="Expires" content="0" />
</head>
<style>
    .plugin {
        width: 600px;
        height: 400px;
    }
</style>
<body>
    <div>
        <div id="divPlugin" class="plugin"></div>
    </div>

</body>

<script src="jquery-1.7.1.min.js"></script>

<script src="webVideoCtrl.js"></script>

<script>
$(function () {
    // 检查插件是否已经安装过
    var iRet = WebVideoCtrl.I_CheckPluginInstall();
    if (-1 == iRet) {
        alert("您还未安装过插件,双击开发包目录里的WebComponentsKit.exe安装!");
        return;
    }

    var oPlugin = {
        iWidth: 600,             // plugin width
        iHeight: 400             // plugin height
    };

    var oLiveView = {
        iProtocol: 1,            // protocol 1:http, 2:https
        szIP: "192.168.1.64",    // protocol ip
        szPort: "80",            // protocol port
        szUsername: "admin",     // device username
        szPassword: "haikang01", // device password
        iStreamType: 1,          // stream 1:main stream  2:sub-stream  3:third stream  4:transcode stream
        iChannelID: 1,           // channel no
        bZeroChannel: false      // zero channel
    };
        
    // 初始化插件参数及插入插件
    WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {
        bWndFull: true,//是否支持单窗口双击全屏,默认支持 true:支持 false:不支持
        iWndowType: 1,
        cbInitPluginComplete: function () {
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");


            // 检查插件是否最新
            if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
                alert("检测到新的插件版本,双击开发包目录里的WebComponentsKit.exe升级!");
                return;
            }


            // 登录设备
            WebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
                success: function (xmlDoc) {
                    // 开始预览
                    var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                    setTimeout(function () {
                        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                            iStreamType: oLiveView.iStreamType,
                            iChannelID: oLiveView.iChannelID,
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 1000);
                }
            });
        }
    });

    // 关闭浏览器
    $(window).unload(function () {
        WebVideoCtrl.I_Stop();
    });
});

</script>
</html>