项目中集成海康web3.0控制摄像头
近期项目中的业务需求涉及播放控制实时监控,采用了海康web3.0的开发包,开发包规范是32位IE11浏览器,业务前期本来只是播放rtsp流的监控,所以采取了VLC插件进行播放,后期需求增加,要进行云台控制,然后就采用了海康web3.0开发控件。
一,VLC提一下,需要下载VLC插件,使用了3.0以上版本,不过也没太多运用,api实现了控制全屏,画面比例,还有就是动态控制播放地址使用的api;
二,海康web3.0开发包,需要安装一个WebcomponentsKit.exe插件,在codebase文件夹下,使用的是32位,插件对应的也是32位,版本为3.0.6.2(在网上看到貌似说插件版本和webVideoCtrl.js版本对应才能成功运行demo)
1.安装插件前IE浏览器还需要改动一些设置,点击IE浏览器的设置,找到【 Internet 选项】:
2.找到【ActiveX 控件和插件】:
3.IE设置完毕就可以打开demo了:
注意哦:因为开发包我也是网上找的,原本的在demo.html中的最底部,引入了demo.js,
之后将引入方式改为:
4.下面是成功打开demo的页面:
5.我这边只有监控的rtsp地址,格式如下:
rtsp://账号:密码@xxx.xxx.xxx.xxx:554/xxxx/xxx/xxx/av_stream
对应填写账号密码及ip,端口(554是rtsp端口,标记中的端口号并不是554,应该是摄像头的端口),点击登录–点击开始预览,就可以成功播放监控了。
三,页面引入demo,demo功能挺全的,一般都是需要什么功能移植到页面就是,只要demo运行成功,后面的功能就是搬砖了:
1.把需要的部分js放在项目下:(demo.css,demo.js,demoWeb.js,jquery-1.7.1.min.js,webVideoCtrl.js)
2.控制页面需要的部分布局:
<div id="divPlugin" class="plugin" style="float: left;"></div>
<div style="float: left;width: 180px;height: 100%;">
<div style="height: 35px;line-height:35px;width: 100%;margin-top: 10px;text-align: center;">
<input type="button" class="layui-btn layui-btn-radius" value="开始预览" onclick="clickStartRealPlay();" />
</div>
<div style="height: 35px;line-height:35px;width: 100%;margin-top: 15px;text-align: center;">
<input type="button" style="height: 35px;width:85px;background-color:#FF5722;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;border: none;border-radius: 100px;cursor: pointer;display: inline-block;" value="相机抓图" onclick="clickCapturePic();" />
</div>
<div style="height: 35px;line-height:35px;width: 100%;text-align: center;margin-top: 10px;">
<input type="button" style="height: 30px;width:60px;background-color:#1E9FFF;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;border: none;border-radius: 100px;cursor: pointer;display: inline-block;" value="变倍+" onmousedown="PTZZoomIn()" onmouseup="PTZZoomStop()">
<input type="button" style="height: 30px;width:60px;background-color:#1E9FFF;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;border: none;border-radius: 100px;cursor: pointer;display: inline-block;" value="变倍-" onmousedown="PTZZoomout()" onmouseup="PTZZoomStop()">
</div>
<div style="margin-top: 8px;text-align: center;">
<table cellpadding="0" cellspacing="3" border="0" style="margin:auto">
<tr style="height: 35px;">
<td>
<input type="button" class="inpBtn" value="左上" onmousedown="mouseDownPTZControl(5);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="inpBtn" value="上" onmousedown="mouseDownPTZControl(1);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="inpBtn" value="右上" onmousedown="mouseDownPTZControl(7);" onmouseup="mouseUpPTZControl();" />
</td>
</tr>
<tr style="height: 35px;">
<td>
<input type="button" class="inpBtn" value="左" onmousedown="mouseDownPTZControl(3);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="inpBtn" value="自动" onclick="mouseDownPTZControl(9);" />
<input type="button" class="inpBtn" value="右" onmousedown="mouseDownPTZControl(4);" onmouseup="mouseUpPTZControl();" />
</td>
</tr>
<tr style="height: 35px;">
<td>
<input type="button" class="inpBtn" value="左下" onmousedown="mouseDownPTZControl(6);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="inpBtn" value="下" onmousedown="mouseDownPTZControl(2);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="inpBtn" value="右下" onmousedown="mouseDownPTZControl(8);" onmouseup="mouseUpPTZControl();" />
</td>
</tr>
</table>
</div>
</div>
<input id="rtspport" type="hidden" class="txt" />
<select id="streamtype" class="sel" style="display: none;">
<option value="1">主码流</option>
</select>
<select id="ip" class="sel" onchange="getChannelInfo();getDevicePort();" style="display: none;"></select>
<select id="channels" class="sel" style="display: none;"></select>
<select id="captureFileFormat" name="captureFileFormat" class="sel" style="display: none;">
<option value="0">JPEG</option>
</select>
<select id="netsPreach" name="netsPreach" class="sel" style="display: none;">
<option value="0">最短延时</option>
</select>
<select id="wndSize" name="wndSize" class="sel" style="display: none;">
<option value="0">充满</option>
</select>
<select id="rulesInfo" name="rulesInfo" class="sel" style="display: none;">
<option value="1">启用</option>
</select>
<select id="packSize" name="packSize" class="sel" style="display: none;">
<option value="0">256M</option>
</select>
<select id="protocolType" name="protocolType" class="sel" style="display: none;">
<option value="0">TCP</option>
</select>
<script src="/resource/layuiadmin/layui/layui.all.js"></script>
<script src="/resource/js/hk/jquery-1.7.1.min.js"></script>
<script id="videonode" src="/resource/js/hk/webVideoCtrl.js"></script>
<script src="/resource/js/hk/demo.js"></script>
页面使用了layui组件,忽略。。。直接加载js函数:
$(document).ready(function(){
changeWndNum(1);
clickLogin('你的IP','你的端口','你的账号','你的密码');
});
ok!基本功能移植成功。。