vue2.0接入海康威视控件包V3.3.0——海康威视摄像头接入前端页面(webSDK包)模式——全自动模式

于 2024-03-22 17:45:26 发布
阅读量442 收藏 2
点赞数 7
分类专栏： 硬件接入 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63541756/article/details/136945611
版权

嗨呀，好长时间没更新了,看了一下之前发的海康摄像头接入前端博客底下同学的评论,还是有不完善的地方,这篇博客主要解决上篇博客的疑问问题以及如何自动调用预览摄像头

一.回答评论

先贴代码，由于上篇博客已经教大家如何去使用手动了，所以这里不再赘述方法

之所以无法自动登录自动预览是因为源代码使用的是function(){}声明函数的方法(但是这种声明方法无法继承父级的this)

之后在登录方法里面添加预览方法

效果预览

完结撒花! 

摆烂式编程
关注
  • 7
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
海康威视 web3.2 控件开发包 以及开发文档
03-19
海康威视摄像头的Web SDK开发包 WebComponentsKit.exe 版本号： 3.0.6.2 webVideoCtrl.js 版本号： 1.1.0 注意： 安装WebComponentsKit.exe的32/64位安装包是根据浏览器的版本，而不是系统的版本 OS: Windows XP, Windows7, Windows8, Windows8.1 Brower: IE8~IE11, Chrome31+, Firefox35+, 32 bit browser IE8~IE11, Chrome31+, Firefox35+, 64bit browser V1.1.1  Add support non-plugin browsers.  Add the browser plugin support status judgment interface (I_SupportNoPlugin).  Add asynchronous interface: open the selection box (I2_OpenFileDlg), add no plug-in to get the image resource binary data interface (I2_CapturePicData), increase download by time interface (I_StartDownloadRecordByTime), add the setting drawing information interface (I2_SetSnapPolygonInfo), increase the asynchronous upgrade interface (I2_StartUpgrade ).  Add the encryption of sensitive information including parameter import and export
海康威视摄像头WEB无插件开发包 V3.2（官方版本）
06-17
海康威视摄像头WEB无插件开发包 V3.2官方demo
vue+js+海康web开发包接入海康威视摄像头
03-10
vue+js+海康web开发包接入海康威视摄像头主要接口封装： 1、初始化插件 2、调整大小 3、登录 4、登出 5、获取设备基本信息 6、获取模拟通道 7、解析模拟通道XML内容 8、获取数字通道 9、解析数字通道XML内容 10、获取零通道 11、解析零通道XML内容 12、录像搜索 13、开始预览 14、开始回放 15、停止播放 16、暂停 17、打开声音 18、关闭声音 19、设置音量 20、修改画面分割类型 21、全屏播放
海康威视web控件开发包
11-13
海康威视官方提供web播放插件，二次开发很有用。 (Hikvision video player plug in)
海康威视 摄像头网络摄像头 WEB无插件开发包 Web 3.2控件开发包
02-25
web 3.2无插件 是使用websocket 的相关技术 ， web 3.0 插件版是使用了 浏览器的npapi 技术 内容简介 Web 控件 V3.2 基于 ActiveX 和 NPAPI 开发，接口封装于 javascript 脚本，以 javascript 接口形式提供用户 集成，支持网页上实现预览、回放、云台控制等功能。该控件开发包仅支持 B/S 网页开发，不适用于 C/S 开发。 支持设备 Web 控件 V3.2 支持我司多种设备，包括 DVR、NVR、DVS、网络摄像机、网络球机等，设备需要支持 PSIA 或 ISAPI 协议。 运行环境 操作系统：Windows XP、Windows7、Windows8、Windows8.1 浏览器： IE8~IE11、Chrome31+、Firefox35+，32 位浏览器 IE8~IE11、Chrome31+、Firefox35+，64 位浏览器
Vue项目接入海康威视智能应用平台监控摄像头全过程分享
hoaxxcj的博客
04-14 8999
、
vue3实现海康威视根据海康插件进行监控实时预览和回放功能
我是小刘丶
04-23 8968
因为我的文章已经写过基于vue实现海康web插件进行视频播放开箱即用文章，这个文章是利用进行编写的，大致内容跟vue2一样，拿过去能直接用。至于我为什么要用js而不用ts，因为海康提供的三个脚本为js语言的，ts尝试过一次，我道行太浅，没搞明白。如果需要vue2的开发，接下来进入正题。
vue对接海康视频监控播放、回放的方法，流程，以及存在的注意点和踩过的坑！
m0_67790636的博客
01-26 2962
用nginx搭建一个流媒体服务器，这种方式网上也很多例子，我对他的理解，就是通过ffmpe这个工具推流到nginx上，然后你去访问nginx，通过nginx监听的端口，他在将这个流转发给你，你再通过地址将流拉下来。）但是话说回来，这个插件对于海康返回的接口协议而言，只能播放 m3u8/HLS 协议了，这种视频流需要你在查询海康视频地址的时候（/api/video/v2/cameras/previewURLs）将 protocol=“hls”这个参数加上。ok 就这样，如再发现问题会及时更新的，后续更新。
关于vue对接海康视频流的心得
最新发布
weixin_74923356的博客
03-13 448
vue3成功对接海康监控摄像头
海康威视控件包V3.3.0
01-24
海康威视控件包V3.3.0
【Vue】使用Vue调起摄像头，进行拍照并能保存到本地
m0_56233309的博客
04-09 1万+
js实现调用设备摄像头实现拍照功能并能本地下载照片
vue-video-player接入海康摄像头
renkai721的专栏
01-06 1216
vue通过萤石云平台接入海康摄像头
一篇文章教你使用Vue实现海康监控视频播放
qq_41765777的博客
12-27 5023
视频监控是智慧城市、智慧园区等WebGIS类系统中最为常见的硬件对接设备，也是很多平台所必备的，在开发过程中对接最多的便是海康、大华的视频监控设备。今天就带领大家实现前端接入海康视频监控设备。
Vue实现拍照功能
前端卷王小白的博客
05-31 1982
Vue3,vue拍照功能
WebSDK_V3.3.0 植入Vue2 项目
weixin_64551008的博客
09-27 2368
前端vue2 rtsp取流海康摄像头实时预览画面 支持高版本谷歌火狐等 用WEB3.3控件开发包 V3.3实现
海康威视web3.0+vue项目使用(踩坑之路)ps:附webVideoCtrl.js文件
热门推荐
QueenLee1的博客
06-25 1万+
文章目录1.海康威视web3.02.vue项目应用3 运行环境 最近公司开发了一版监控视频的vue项目,我作为实现需求的前端真的是难为我了,各种调查后知道海康威视有web开发包,跟海康威视的SDK联系后发给我两个web二次开发包, CH_WEB3.0控件开发包V1.1.0_Win32 CH_WEB3.0控件开发包V1.1.0_Win64 看到开发包之后我还是很开心的,但是没想到,从此开始踏上了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值