海康威视无插件3.2开发

需求：
根据摄像头位置不同可以切换摄像头。每个页面显示两个摄像头的画面。同时要实现对当前预览页面的抓图。
下面的博客对开发包的使用描述详细，写的很好。
海康威视web开发包使用说明
参考上述博客写了自己的功能，我没有对组件进行封装，都写在一个页面了。
注意：3.2用的是webscoket取流，所以登录预览只能一个一个进行。这里就存在很多异步的逻辑需要处理。
遇到的问题：
1、界面显示两个摄像窗口
投机的方式，将整个视频窗口的界面设置为高度初始化高度的一半。因为海康的视频窗口是4个的，没有两个的。需求是单个界面显示两个摄像头。
2、由于本身海康是四个摄像界面，一旦窗口大小变化，由于设置的大小变化，会变成4个窗口。需要刷新一下，才会好，造成用户体验非常差。
解决：动态获取当前浏览器窗口的大小，去设置视频窗口和初始化大小。这样在调整窗口的时候，去重新初始化大小，实现一直适应窗口大小的监控画面。

<div id="divPlugin" class="plugin" :style="{width:winW,height:winH}"></div>mounted() {this.videoSize();setTimeout(()=>{this.init();},100)window.onresize = ()=>{this.videoSize();setTimeout(()=>{//重新初始化之前需要停止预览this.init();//初始化后需要再次重新登录预览},100)}},// 动态设置窗口以及初始化的大小videoSize(){this.winW=innerWidth-250+"px";this.winH=(innerHeight)/2+"px";this.videoW = innerWidth-250;this.videoH = innerHeight;console.log(this.winW,this.winH,this.videoW,this.videoH);},

3、web3.2不支持录像回放的功能
想要查看历史录像，只能通过登录录像机来进行查看。录像机安装好硬盘后，会通过录像计划自己录制。
4、抓图
4、拍照抓图
当前海康web3.2版本只支持抓图后放在浏览器默认的下载位置，浏览器可以设置直接弹出预览图片。
5、nginx做一个开机自启动，就不用每次都打开nginx服务了
nginx自启动

海康威视无插件3.2开发相关推荐

【海康威视】web无插件3.2，vue开发
文章目录下载配置一.配置自己的webVideo.js 二.环境配置 1.node环境(暂未走通,可参考) 2.nginx环境(走通,略显繁琐) 总结下载配置在海康威视的官网进行下载开发包: h ...
【海康威视】前端开发：【2】Web无插件版Demo测试
一.前言最近看见海康威视官网新增了一个 WEB无插件开发包 V3.2: 支持高版本谷歌.火狐浏览器,同时需要设备支持Websocket取流.无插件版本需要使用nginx代理服务器. 于是下载了一个来 ...
海康威视web无插件开发包webVideoCtrl.js+vue做网页开发
最近项目需要在网页上预览海康的摄像头实时画面,遇到一些问题和踩了一些坑,在这里梳理一下. 我本次前端开发使用的是vue-admin-template. 一.上来第一步,先不要着急开发,先看看公司的摄像 ...
海康威视web 开发包3.2无插件踩坑点
公司最近要搞款web监控系统,也有现成海康威视摄像头.一个万事俱备只欠开发的情况下,欣然接受了这次的任务了.只是没有料到开发之路也不怎么太平. 摄像头激活的事就不说了. 看到官网上有web 3.2无 ...
基于EasyNVR摄像机无插件直播方案二次开发实现自己的摄像机IPC-NVR无插件化直播解决方案
背景介绍在之前的博客中<基于EasyNVR实现RTSP/Onvif监控摄像头Web无插件化直播监控>,对EasyNVR所实现的功能我们已经有较多描述,这些也在方案地址:http://ww ...
基于EasyNVR二次开发实现自己的摄像机IPC/NVR无插件化直播解决方案
基于EasyNVR二次开发实现自己的摄像机IPC/NVR无插件化直播解决方案参考文章: (1)基于EasyNVR二次开发实现自己的摄像机IPC/NVR无插件化直播解决方案 (2)https://ww ...
vue+海康威视web3.2无插件版本使用
vue+海康威视web3.2无插件版本使用: 由于项目要求需要vue结合海康威视云台,于是就开始不停的踩坑之路海康威视的web3.0有插件版本不兼容高版本的浏览器只兼容ie11,巧的是自己的项目不兼 ...
海康摄像头web无插件3.2，vue开发，Nginx代理IIS服务器
在vue中实现海康摄像头播放,采用海康web无插件3.2开发包,采用Nginx代理IIS服务器实现: 1 摄像头要求,支持websocket 2 Nginx反向代理的结构 3 vue前端显示视频流代码 ...
【miscellaneous】海康威视监控摄像头实现web端无插件监控实拍效果
[rtsp]海康威视监控摄像头实现web端无插件监控实拍效果详细介绍参见:http://live.cuplayer.com/RtspCameraLive.html web端无须装插件(支持PC,安卓 ...

海康威视无插件3.2开发

海康威视无插件3.2开发相关推荐

最新文章

热门文章