海康web3.0使用记录

最新推荐文章于 2025-06-11 09:03:56 发布

原创最新推荐文章于 2025-06-11 09:03:56 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #js

海康web3.0 专栏收录该内容

1 篇文章

订阅专栏

项目中集成海康web3.0控制摄像头
近期项目中的业务需求涉及播放控制实时监控，采用了海康web3.0的开发包，开发包规范是32位IE11浏览器，业务前期本来只是播放rtsp流的监控，所以采取了VLC插件进行播放，后期需求增加，要进行云台控制，然后就采用了海康web3.0开发控件。
一，VLC提一下，需要下载VLC插件，使用了3.0以上版本，不过也没太多运用，api实现了控制全屏，画面比例，还有就是动态控制播放地址使用的api；
标记的地方就是流地址，IE浏览器-安装插件-地址正确-正常播放
二，海康web3.0开发包，需要安装一个WebcomponentsKit.exe插件，在codebase文件夹下，使用的是32位，插件对应的也是32位，版本为3.0.6.2（在网上看到貌似说插件版本和webVideoCtrl.js版本对应才能成功运行demo）
1.安装插件前IE浏览器还需要改动一些设置，点击IE浏览器的设置，找到【 Internet 选项】：
点击自定义级别
2.找到【ActiveX 控件和插件】：
这个ActiveX相关的选项，一把梭全部启用或开启提醒。。。
3.IE设置完毕就可以打开demo了：
安装插件之后打开demo.html，不需要将demo部署到容器也可以运行的
IE设置ActiveX之后，打开demo.html会出现这个提示，点击允许。。
注意哦：因为开发包我也是网上找的，原本的在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！基本功能移植成功。。