准备工作

查看硬盘录像机是否支持无插件开发

进入硬盘录像机后台配置界面，在网络-高级配置界面查看是否有网络服务这一栏，如果没有，则不支持无插件开发。
如果有这一栏，请确保启用websocket这一栏是选中的。

websocket端口

硬盘录像机websocket端口号为7681，请确保该端口号能够访问。

开始开发

demo演示

根据海康官网上的demo进行相关配置，填入ip、端口号、用户名、密码。这个端口号是访问硬盘录像机后台的端口号，并不是摄像头的通道号，笔者前期在这块踩了坑。
信息确认无误的情况下，点击登录，选择摄像头进行预览，左上角会显示摄像头实时画面。

插件初始化

在引入相应JS后，需要初始化。

 // 初始化插件参数及插入插件WebVideoCtrl.I_InitPlugin('100%', '100%', {bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持iPackageType: 2,iWndowType: 2,bNoPlugin: true,cbSelWnd: function (xmlDoc) {g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);var szInfo = "当前选择的窗口编号：" + g_iWndIndex;console.log(szInfo);},cbDoubleClickWnd: function (iWndIndex, bFullScreen) {var szInfo = "当前放大的窗口编号：" + iWndIndex;if (!bFullScreen) {szInfo = "当前还原的窗口编号：" + iWndIndex;}console.log(szInfo);},cbEvent: function (iEventType, iParam1, iParam2) {if (2 == iEventType) {// 回放正常结束console.log("窗口" + iParam1 + "回放结束！");} else if (-1 == iEventType) {console.log("设备" + iParam1 + "网络错误！");} else if (3001 == iEventType) {clickStopRecord(g_szRecordType, iParam1);}},cbRemoteConfig: function () {console.log("关闭远程配置库！");},cbInitPluginComplete: function () {WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");$("#divPlugin canvas").dblclick(function() {WebVideoCtrl.I_FullScreen(true);})}});

在初始化完成之后会调用cbInitPluginComplete这个方法，需要在这个方法选择DOM元素嵌入播放插件，笔者这里是在id为divPlugin的DOM元素嵌入播放插件。

进行登录和预览

插件初始化完毕后进行登录，填入对应的参数即可。

登录完毕才可以进行预览。

HTTPS服务进行预览

海康提供的demo上使用http请求来访问硬盘录像机的。如果是https服务的话，虽然文档上面的登录接口给的参数中包含协议类型，选择了https协议也只是能登录成功，无法进行预览。
在询问海康的客服后，客服说不支持https协议。但是在经过排查后发现是因为websocket连接用的是wss协议，但是硬盘录像机没有域名和可信的SSL证书，初步怀疑是这个原因导致wss连接不上。由于条件有限，不大可能给每个硬盘录像机都配上域名和SSL证书，所以只能另辟蹊径，想让JS发起的websocket请求发给自己，然后由nginx来进行转发。
在查看JS代码后，发现了生成wss连接地址的地方，接下来进行改写，将地址指向自己。

改写完毕后，在对nginx进行配置。

 location ^~ /webSocketVideoCtrlProxy {#web socketproxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_set_header Host $host;proxy_pass http://$arg_orgIP:$arg_orgWSPort/$arg_Channel?$args;}

这样就能够进行预览了。

海康web3.2无插件开发指北相关推荐

海康监控视频无插件开发3.2版本运行demo
一.海康摄像头跑通web开发的demo注意点 1.首先下载官网的web3.2无插件开发包 1.官网下载随便注册后登录下载 2.积分下载 2.想要运行demo先要实现在浏览器输入摄像头ip后能够实现预 ...
海康web3.0控件实现在摄像头窗口多边形绘图
海康web3.0控件实现在摄像头窗口多边形绘图 1.设置多边形播放模式 /** eanbleDraw函数* webVideoCtrl:初始化后的控件对象* iWndIndex :窗口索引* 注:预览模 ...
海康摄像头web无插件3.2，vue开发，Nginx代理IIS服务器
在vue中实现海康摄像头播放,采用海康web无插件3.2开发包,采用Nginx代理IIS服务器实现: 1 摄像头要求,支持websocket 2 Nginx反向代理的结构 3 vue前端显示视频流代码 ...
php对接海康视频教程_EasyNVR无插件互联网直播平台对接海康摄像头如何通过SDK将视频在前端网页播放...
原标题:EasyNVR无插件互联网直播平台对接海康摄像头如何通过SDK将视频在前端网页播放市场上常见的海康.大华.宇视等网络摄像头只要支持RTSP协议,都可以接入到EasyNVR中,今天主要给大家分 ...
海康视频流html无插件播放,RTSP_ONVIF协议视频流媒体网页无插件直播服务器EasyNVR配置海康大华等安防摄像头通道地址的方法...
EasyNVR流媒体服务支持RTSP稳定拉流接入,支持Onvif协议接入,支持RTMP/HLS/HTTP-FLV分发,将传统安防监控设备互联化,无插件直播等. 通道配置点击通道配置进入通道配置页,然 ...
海康视频流html无插件播放,[原创.数据可视化系列之二十一]如何让海康大华实时视频在浏览器上无插件播放之二...
我在上一篇文章中提出一个使用海康大华的监视视频在chrome中无插件显示的办法,也可以勉强事情,但是实际使用的过程中,有很多问题,比较适合复杂环境中使用. 还有另外一个模式可以进行处理,那就是在浏览器 ...
vue引入海康监控web无插件开发的问题
海康web版开发插件: 需要支持websocket取流的摄像头和录像机:需要本机安装nginx服务(但是使用视频录像机自带的web页面可以用高版本浏览器直接预览没有websocket的摄像头.找客服咨 ...
如何选择好用的海康视频恢复软件？综合考虑这几点
海康视频恢复通常是指从海康威视监控设备中恢复删除或丢失的视频.在使用海康设备进行监控时,一些重要的视频可能会被误删除或其他原因导致丢失,如果没有及时备份,数据就可能会"永久"丢失? ...
海康web无插件开发实现4*3窗口布局
业务需求,要求实现摄像头窗口4*3的布局,可是海康提供的api只有1x1,2x2,3x3,4x4这样的平方数. 本文提供一个解决方法,来实现4*3,3*4等不规则的窗口分割布局,先上图. 思路: 找到 ...

海康web3.2无插件开发指北

海康web3.2无插件开发