项目中集成海康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！基本功能移植成功。。