java开发调用海康威视摄像头的web端页面开发心得

最近在开发过程中  需要用到海康威视的摄像头 在web端展示  在各种百度之后 发现网上很难找到一个  简便,可靠的教程

在摸索着完成项目之后 ,决定写一篇攻略  造福有需求的小伙伴大笑大笑大笑


言归正传  

首先需要下载一个海康威视开发包(百度搜索“ 海康威视web开发包”)也可以给我留言索要 提供3.0开发包


第一步:打开下载好的文件之后在找到demo文件夹下codebase

点击webComponents.exe安装   注意版本号和  32位 64位(这里跟正一下   木有64位尴尬尴尬

如果没有合适的  请去官网下载


第二步:将文件夹中 

demo.js 

demo.css 

webVideoCtrl.js

这3个文件导入你的项目,还需要jquery   没有的小伙伴可以导开发包里面的1.7

这时候导入开发包的html文件  是可以打开这样一个页面





OK    demo  打开了   在登录输入你摄像机配置的地址 和账号  密码  端口号   点击登录

  可以查看到 已登录 设备   点击 已登录 设备   选中窗口  点击预览   

这时候画面就可以出来了 (引入的JS注意地址哦 )


第一步 完成   我们已经连接上摄像头了


下面 就开始做我们需要的功能的   web开发包里面 已经提供了 API的说明文档  我们只需要对照API  调用webVideoCtrl.js里面的方法  来实现我们需要的功能


比如我需要的是一个  在页面打开的时候  打开事件匹配的监视器同时展示在页面,根据监视器的数量打开一定的窗口。


1.打开页面初始化插件

// 初始化插件

// 全局保存当前选中窗口
var g_iWndIndex = 0; //可以不用设置这个变量,有窗口参数的接口中,不用传值,开发包会默认使用当前选择窗口
$(function () {
    // 检查插件是否已经安装过
    if (-1 == WebVideoCtrl.I_CheckPluginInstall()) {
        alert("您还未安装过插件,下载WebComponents.exe安装!");
        return;
    }
    
    // 初始化插件参数及插入插件
    WebVideoCtrl.I_InitPlugin(951.5, 360, {
        iWndowType: 2,
        cbSelWnd: function (xmlDoc) {
            g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
            var szInfo = "当前选择的窗口编号:" + g_iWndIndex;
            showCBInfo(szInfo);
        }
    });
    WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");

    // 检查插件是否最新
    if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
        alert("检测到新的插件版本,请将WebComponents.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 szCurTime = dateFormat(new Date(), "yyyy-MM-dd");
    $("#starttime").val(szCurTime + " 00:00:00");
    $("#endtime").val(szCurTime + " 23:59:59");

//这里要用setTimeout调用登录和预览方法 ,如果直接调用  会打不开窗口 ,因为加载时需要时间的

    window.setTimeout(clickLogin(),1000);
    window.setTimeout(clickStartRealPlay(),1000);
  
});




2写一个登录方法


    var ce02m=new Array();
    var ce03m=new Array();
    var ce04m=new Array();
    var ce05m=new Array();
    <c:forEach items="${monitor}" var="monitor11">  
    ce02m.push("${monitor11.ce02}");
    ce03m.push("${monitor11.ce03}");
    ce04m.push("${monitor11.ce04}");
    ce05m.push("${monitor11.ce05}");
    </c:forEach>  
    
    var szIP = ce02m;
    var szPort = ce05m;
    var szUsername = ce03m;
    var szPassword = ce04m;
    
    // 登录
    function clickLogin() {
        for(var i=0;i<szIP.length;i++){
        var iRet = WebVideoCtrl.I_Login(szIP[i], 1, szPort[i], szUsername[i], szPassword[i], {
        });
        }

    }


WebVideoCtrl.I_Login()需要传4个值   账号  地址 密码  端口  端口默认是80  可以不传


我是从后台接收了一个list<model>在JS里面用forEach遍历进Array()


3.打开页面


    function clickStartRealPlay() {
        for(var i=0;i<szIP.length;i++){
         iWndIndex=i;
        var iRet = WebVideoCtrl.I_StartRealPlay(szIP[i], {
            iWndIndex:iWndIndex
        });
        }

//几个账号打开几个窗口

        if(ce02m.length>9){
        changeWndNum(4);
        }else{
        if(ce02m.length>4){
        changeWndNum(3);
        }else{
            changeWndNum(2);
        }
    }

WebVideoCtrl.I_StartRealPlay需要传地址  ,这是必须的

iWndIndex是选定的窗口号   ,在不传的情况下是默认为0,我用I表示,可以按循环打开固定的窗口号  changeWndNum这个方法是打开几个窗口  默认4种格式  1*1 2*2

3*3 4*4根据分别对应参数 1 2 3 4


剩下jsp只需要调用一下窗口样式 和映入的js CSS文件


            <div id="divPlugin" class="plugin"></div>


如果需要调整窗口大小  去CSS里面找到plugin


/*插件*/
.plugin
{
    width:951.5px;
    height:360px;
}


注意 哦  在加载的时候也要做一次调整   不然窗口是无变化的


// 初始化插件参数及插入插件
    WebVideoCtrl.I_InitPlugin(951.5, 360, {}



OK   功能完美实现








随着国内IT事业的兴起,越来越多的小伙伴也投身到了开发这个相对高薪的行业来。很多同学进入的方式都是零基础通过培训或者看频自学,在工作一两年后,发现由于自己的基础太薄弱,想进一步提高自己的能力变得非常 困难。 现在市面上的频教程,主要有一下两类:第一类是纯理论的,比如框架、算法、虚拟机等;另一类是Demo级别的项目,如各大培训机构的项目课程。从业这么多年,学习了大量的频教程,也跟很多毕业三年左右的程序员做过交流,但一直没发现一套特别好的教程,能让小伙伴们从零基础一直到高级进阶,持续得到学习。在工作中,他们也反馈,频教程各种高大上的技术堆砌,而在实际开发中呢,大部分技术都没有用到,就算是用,也完全不是像教程中那么用的。在面试中,你跟夸夸其谈十分钟,面试官一句,请问你在项目中是怎么用这个技术的,在使用的时候有什么问题?遇到这样的问题,大部分同学们都直接熄火,完全不知所措,为啥呢,因为他在项目中根本没有用过这个技术,只是看了文档、频,只是跟着教程做了Demo。而技术跟业务如何结合,这应该是大部分同学在工作中最薄弱的环节。甚至,有些同学会唯技术论,面对公司的业务,会去抱怨公司用的技术不新,认为业务不重要。但我要纠正的是,技术的出现本来就是为业务服务的,离开业务谈技术那就是耍流氓。 早在两年前,我就萌生了这样的想法,既然国内的环境造成了面试修地球,上班拧螺丝的情况,那么我能不能结合我自己做的真实项目,脱敏后给大家分享出来,让各位同学能有一个真实的项目环境去边学边提高,所以,也就有了《从0开始用Java做"智慧农业物联网"》课程的诞生。 学习本课程的基本要求:有Java基础,学习过Spring,SpringMVC,Mybatis框架,做过简单项目以上的同学均可学习。但并不代表,本课程就是个入门教程,对于有开发经验的同学们,物联网这个行业是个朝阳产业,也可以说是未来十年发展的蓝。那我相信,有实体经济支撑的行业绝不会像互联网行业有那样大的泡沫,也绝不会让你工作的没有安全感。对于有志于从事物联网相关工作的同学,对于想从各方面提升自己的各位同学们来说,本课程也非常的适合你们去学习。 我从12年就开始接触物联网项目,做过智慧猪场、智慧农场、猪联网、云医疗等相关项目,也做过互联网行业,兜兜转转一圈下来,自认为还是积累了很多的经验和教训,那我都会在我课程中对这样的知识有所分享。 同时,在这个课程中,我既是产品,又是设计,还是开发,还是运维,也是客户,我会从一个项目的全生命周期给大家进行介绍,并且都有相关的落地方案。这样,同学们的眼光就会有所延展,不会仅仅局限在开发这一亩三分地上。 本课程的亮点:我只能说,亮点很多,很多。。。 核心如下:产品经理眼中的产品、数据库设计、如何把一个需求变成代码、如何跟物联网设备交互、如何上线一个项目、在需求变更后如何做到不跟产品撕逼。。。 看到了吧,我不会只让你知道那些高大上的技术点,我向你们学会的是如何做一个完美的产品! 在这个课程中,你会看到太多太多跟其他教程不同的地方,你看到的不是Demo级别的案例,你看到的绝对是一个工业级别的实现方案。我也希望通过这个课程,同学们能进一步升华自己的界,你所站的高度,你看问题的不同角度,将决定未来你成长的上限。 对于本课程的成长忠告:本课程的录制会持续很长时间,是的,你没看错,是很长时间,目前我的预期,起码是在年底之前不会结束,为什么要这样安排,因为我想要分享的内容实在太多,我也不想对课程进行拆分,也不想草草结束,所以,你所能得到的收获一定会足够大,他没有终点。。。 最终达到的效果:在业务中学技术点,通过技术点让业务变得更优美!
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页