java web调用海康威视摄像头

最新推荐文章于 2024-05-23 17:04:01 发布

不知名胖胖

最新推荐文章于 2024-05-23 17:04:01 发布

阅读量5k

点赞数 1

文章标签： js java web http javascript

本文链接：https://blog.csdn.net/weixin_43730803/article/details/117015783

版权

最近项目涉及到海康摄像头业务，在web页展示摄像头实时监控，在网上找了好多例子，没有找到一个合适我业务的文章，在这里记录一下我的实现方式。

我的业务场景比较简单，就是在页面展示多路摄像头，其他的功能没有用到。
二次开发之前需要干这几件事
1. 先下载海康的开发包，然后安装WebComponentsKit.exe
  一定要选择合适的浏览器版本，要不然非常坑
2. 在合适的浏览器中打开demo.html,看到如下图片

在这里插入图片描述
3. 登录一下看看，是不是能看到摄像头的画面，如果可以的话，那就可以二次开发了，如果看不到的话，自己找问题吧，我是一次成功的。
4.将开发包js文件和css文件导入工程，接下来就上代码

var oPlugin = {
    iWidth: 700,
    iHeight: 550
};

var oLiveView = {
    iProtocol: 1, // 协议 1：http, 2:https
    szIP: "", // ip
    szPort: "", //  port
    szUsername: "", //  username
    szPassword: "", //  password
    iStreamType: 2, // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
    bZeroChannel: false,
};
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
var g_iWndIndex = 0;

$(function () {
    //检查插件是否已经安装过
    var iRet = WebVideoCtrl.I_CheckPluginInstall();
    if (-1 == iRet) {
        alert("您还未安装过插件，双击开发包目录里的WebComponents.exe安装！");
        return;
    }
    // 初始化插件参数及插入插件
    WebVideoCtrl.I_Logout(szDeviceIdentify); //登出
    WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {
        bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 3,

        cbSelWnd: function (xmlDoc) {
            g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
            getChannelInfo(g_iWndIndex + 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) {
                        // 开始预览
                        setTimeout(function () {
                            WebVideoCtrl.I_Stop();
                            WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                                iStreamType: oLiveView.iStreamType,
                                iChannelID: oLiveView.iChannelID,
                                bZeroChannel: oLiveView.bZeroChannel,
                                iWndIndex: g_iWndIndex
                            });
                            for (let i = 1; i < 9; i++) {
                                WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                                    iStreamType: oLiveView.iStreamType,
                                    iChannelID: i+1,
                                    bZeroChannel: oLiveView.bZeroChannel,
                                    iWndIndex: i
                                });
                            }
                        }, 200);

                    }
                });
        }
    });

    function getChannelInfo(channelID) {
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);

        var startRealPlay = function (channelID) {
            WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                iStreamType: oLiveView.iStreamType,
                iChannelID: channelID,
                bZeroChannel: oLiveView.bZeroChannel,
                iWndIndex: g_iWndIndex,
                success: function () {

                },
                error: function (status, xmlDoc) {

                }
            });
        };

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

我是按后端的逻辑来实现的，一点一点调试的，我把获取数字通道去掉了，我的摄像头个数是固定的，所以我让窗口index强制和通道绑定，这种干不知道对不对，但是我实现我想要的效果了，仅供参考！！

下面是heml代码

<!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" />
    <style type="text/css">
        #channels{float: left; cursor: pointer; margin-left:150px;}
        #divPlugin{float: left; cursor: pointer; margin-left:250px;}
    </style>
    <script src="/codebase/webVideoCtrl.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <ul id="channels"></ul>
        <div id="divPlugin" class="plugin"></div>
    </div>
</body>
<script src="jquery-1.7.1.min.js"></script>
<script id="videonode" src="./codebase/webVideoCtrl.js"></script>
<script src="demo.js"></script>
</html>

我这种写法和官方给的文档中有很大不同，我是一个后端，js忘得差不多了，也没有其他好的办法了，就这么修改了，不喜勿喷。

不知名胖胖

关注

1
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
java web调用海康威视摄像头

最近项目涉及到海康摄像头业务，在web页展示摄像头实时监控，在网上找了好多例子，没有找到一个合适我业务的文章，在这里记录一下我的实现方式。我的业务场景比较简单，就是在页面展示多路摄像头，其他的功能没有用到。二次开发之前需要干这几件事先下载海康的开发包，然后安装WebComponentsKit.exe一定要选择合适的浏览器版本，要不然非常坑在合适的浏览器中打开demo.html,看到如下图片3. 登录一下看看，是不是能看到摄像头的画面，如果可以的话，那就可以二次开发了，如果看不到
复制链接

扫一扫