海康威视 web端开发经验（二）

上篇博客介绍了海康威视sdk以及web端的开发，成功预览。还没有成功的朋友可以去看一下上一篇文章

关于海康威视sdk与海康威视web的史上最精细的教程（一）

但都是单个摄像头，心里总有个疑问，俩个摄像头同时预览该怎么实现呢，经过和前端同时半天的探索，终于弄明白了，得到了如下的成果。

下面就简单说一下流程：

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调用登录和预览方法 ，如果直接调用  会打不开窗口 ，因为加载时需要时间的clickLogin();setTimeout(function () {clickStartRealPlay()}, 2000)});

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], {});}}

3.这一步相当于点击预览功能，将每个设备的ip传入I_StartRealPlay()方法中.

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

iWndIndex是选定的窗口号，在不传的情况下是默认为0，我用I表示，可以按循环打开固定的窗口号

这一步用于展示窗口，有1*1，2*2，3*3，4*4四种展示格式，分别对应1，2，3，4。以自己的设备为准。

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

ok，成功展示多个摄像头。欢迎大家留言讨论。

海康威视 web端开发经验（二）相关推荐

海康威视Web端视频开发
1简介 1.1内容简介 Web 控件 V3.0 基于 ActiveX 和 NPAPI 开发,接口封装于 javascript 脚本,以 javascript 接口形式提供用户集成,支持网页上实现预览. ...
vue项目生成微信支付二维码(web端),其他二维码也可以生成
第一步引入第三方插件: npm install –save qrcodejs2 第二步,在vue页面中引用: <template><h2>微信扫码支付</h2>&l ...
web端微信二维码自定义样式
var content = ".impowerBox .qrcode {width: 50vh;} .impowerBox .title {display: none;}.impowerBo ...
使用海康威视设备在Web端显示实时视频
前言目前做的项目,需要Web端显示实时视频数据.本次项目使用的是海康威视的摄像头进行实时监控. 硬件:萤石的摄像头(海康威视旗下的),海康威视的硬盘录像机. 软件:vlc 2.2.6版本. Web端 ...
springboot2整合二维码生成二维码图片及输出web端及打印
step1 导包 <dependency><groupId>com.google.zxing</groupId><arti ...
海康威视设备在Web端显示实时（回放）视频
前言目前做的项目,需要Web端显示实时视频数据.本次项目使用的是海康威视的摄像头进行实时监控. 硬件:海康威视的摄像头软件:video.js.nginx.vlc 参考:https://blog.c ...
[图解教程]Axis2与Eclipse整合开发Web Service之二：WSDL逆向生成服务端
[图解教程]Axis2与Eclipse整合开发Web Service之二:WSDL逆向生成服务端一般开发Web Service,是选写服务端,再根据生成的WSDL文件生成客户端.看过一本SOA的书中 ...
web移动端开发经验总结
整理web移动端开发经验,部分内容借鉴于网上的博文. 1.meta标签 <meta name="viewport" content="width=device-wi ...
H5分享页面（1）——web端二次分享配置内容
在H5分享页面中,如果用户进行了二次分享,需要进行一些配置才能进行使用,如微信二次分享就必须调用微信的JS-SDK来完成.下面对分享配置代码进行了封装: 存放路径:public/resources/j ...

海康威视 web端开发经验（二）

海康威视 web端开发经验（二）相关推荐

最新文章

热门文章

海康威视 web端开发经验 （二）

海康威视 web端开发经验 （二）相关推荐

最新文章

热门文章

海康威视 web端开发经验（二）

海康威视 web端开发经验（二）相关推荐