在vue3 中使用海康威视WEB3.3控件开发包 V3.3 抓图

已于 2024-03-26 10:56:52 修改
阅读量4.8k 收藏 30
点赞数 17
文章标签： 前端 javascript 开发语言
于 2024-01-25 17:28:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_68669853/article/details/135849014
版权
本文详细介绍了如何在Vue3项目中集成和使用海康威视的V3.3开发包，包括下载、安装插件、引入文件以及实现登录、预览、抓图等功能的代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、海康威视官网下载V3.3 开发包

海康开放平台

解压打开
双击dome/codebase/HCWebSDKPlugin.exe 并且安装

打开dome/index.html

操作文档在这 docs目录下

2、在自己vue3项目中使用

首先在 将dome下 jQueryJs文件
和 dome/codeBase下的 jsVideoPlugin-1.0.0.min.js 和  webVideoCtrl.js 文件

三个文件复制到自己项目public/js 文件夹下
并且在index.html中引入

  <script id="videonode" src="/js/webVideoCtrl.js"></script>
  <script id="videonode" src="/js/jquery-1.7.1.min.js"></script>
  <script id="vide
最低0.47元/天 解锁文章
海康摄像头web调用官方开发包,包含demo,亲测可用
03-13
海康摄像头web调用官方开发包,包含demo,亲测可用,附件包含控件安装程序,示例代码,文档,十分详细.兼容IE11,不兼容谷歌,火狐.
jsVideoPlugin-1.0.0.min
01-24
jsVideoPlugin-1.0.0.min 必备的三件套之一
海康威视Web开发包介绍
最新发布
gitblog_06743的博客
04-21 259
海康威视Web开发包介绍 【下载地址】海康威视Web开发包介绍 海康威视Web开发包为开发者提供了一套完整的工具和库，助力高效完成Web开发任务。该资源包包含详细的文档和教程，帮助用户快速上手并解决开发中的常见问题。通过解压压缩包，开发者可以轻松获取所需资源，并根据指南进行开发。请确保开发环境符合要求，并遵守相关法律法规...
海康威视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 位浏览器
基于vue2和海康威视WEB3.3控件开发包 V3.3实现监控预览
weixin_48474646的博客
02-07 2386
基于大屏调用海康威视
海康WEB3.3控件开发包 V3.3 前端vue项目调用实时监控画面
热门推荐
hero8011的博客
09-22 1万+
本需求的完成离不开后端将设备映射到公网， 以及前端单独部署demo页面这个思路的转变。
vue 对接海康 硬件产品 录像机 WEB3.3控件开发包 V3.3
weixin_53322542的博客
01-12 1643
3.0 的不支持高版本的谷歌浏览器 3.2 虽然支持 但是 需要录像机 可以传 ws流 综合 我的项目 我就 使用了3.3。当时 为了 方便 就 把 dome 文件 全放进了项目 引入到项目是 需要 引到public文件里的 index页面里。先去官网下载WEB3.3控件开发包，自己先用开发包里的 dome.html 先自测可不可行。红框为必填 输入录像机的信息 点击开始 预览如果 显示画面 就可以 使用了。下面 就是 我看文档改的代码 文档真的很有用 哪里不懂就多看看 研究一下。选择3.3下载到本地。
VUE+海康摄像头WebSDK_V3.3.0对接
Sky_xinkong的博客
04-16 4991
在本篇文章中，我们将详细探讨如何使用WebSDK_V3.3.0技术接入海康摄像头。同时，我们也将分享在实际应用中遇到的问题及解决方案，希望能够对广大开发者和技术爱好者有所帮助。
海康威视WEBSDK3.3控件开发-分屏预览多个摄像头
qkdgz的博客
08-21 7346
Electron+vue3+vite实现海康威视WEBSDK3.3控件二次开发。实现多屏预览和摄像头切换。开发踩坑记录
海康威视控件包V3.3.0
01-24
海康威视控件包V3.3.0
海康威视 web开发3.0版
11-24
海康威视web开发包3.0版 亲测可用有需要的可以下载
海康威视NVR-Web控件开发包（含32位和64位）
07-23
注意事项： 支持的32位浏览器有：IE6~IE11、Chrome8~ Chrome42、Firefox3.5~ Firefox52、Safari5.0.2+ 支持的64位浏览器有：IE6~IE11、Chrome8~ Chrome42、Firefox3.5~ Firefox40、Safari5.0.2+ 需要浏览器支持NPAPI。要求Web 控件位数与浏览器位数匹配，浏览器位数可以在任务管理器中看下打开demo.html的浏览器， 确认下浏览器是否有*32，以此判断是32位还是64位 调用预览一次则占用一次连接数，每个通道都有最大连接数，如果达到最大连接数则可能取不到码流数据。
海康威视有插件版本-vue3集成开发，可云台控制
02-02
海康威视有插件版本v3.3，已将demo代码中的jQuery代码转换成了vue3可使用的格式，vue3集成开发，，可云台控制
webplugin.exe
11-08
浙江大华摄像头 web调用监控所需控件，下载之后双击安装即可 webplugin 3.1.0.4
海康威视web3.0开发包
07-12
web3.0开发包，可以用，配合https://blog.csdn.net/qq_35583089/article/details/80631069
海康威视WebSDK3.0最新版 包含云台控制
05-12
这个开发包的出现，使得开发者无需复杂的操作，就能在包括IE、旧版本Chrome和火狐在内的多种浏览器上实现对海康威视设备的远程访问和控制。 WebSDK3.0的核心功能包括： 1. **视频流播放**：通过WebSDK3.0，开发者...
Vue3 - 详细实现接入使用海康威视监控云端显示及控制功能，网站集成安装海康监控及实时监控显示、回放、放大缩小画面、视频画面截图、截屏抓拍、摄像头控制，实时推流及播放器解决延迟卡顿等问题（详细代码）
王二红
07-12 1万+
vue3，nuxt3，海康威视，海康监控，摄像头监控，实时监控画面，海康插件，视频播放，回放，视频流地址，取流协议，视频sdk播放，hik，rtsp，rtmp，hls，ws，网站，网页，h5页面，后台管理系统，vue3对接海康监控设备，无法连接，报错，vue3对接海康处理接口认证规则，监控实时预览和回放功能，海康api接口，安全认证，海康开放平台，官方文档，播放海康摄像头的监控视频，海康实时监控播放详细步骤，web，黑屏，特别卡不流畅怎么办，解决无法推流，录像，连接不上，vue3，海康，vue海康视频监控，
一套搞定 海康web3.3对接流程
windes001的博客
11-10 4512
【代码】一套搞定 海康web3.3对接流程。
vue3使用海康威视HCWebSDK视频叠加信息
03-19
### 如何在Vue3中集成海康威视HCWebSDK以实现视频叠加信息功能 要在Vue3项目中集成海康威视HCWebSDK并实现视频叠加信息的功能，需要遵循以下方法论： #### 1. HCWebSDK简介与环境准备 HCWebSDK是由海康威视提供的用于访问其监控设备的JavaScript SDK。它支持多种浏览器，并提供了丰富的API接口来控制摄像头、获取实时流媒体以及处理视频数据。 为了成功集成HCWebSDK到Vue3应用中，需完成如下准备工作： - 下载HCWebSDK包[^3]。 - 配置必要的参数（如`设备编码`, `appKey`, `secret`, 和 `ip`），这些参数由综合安防管理平台提供。 ```javascript // 定义配置项 const config = { deviceSerial: &#39;your_device_serial&#39;, // 设备编码 appKey: &#39;your_app_key&#39;, // 综合安防管理平台提供的App Key secret: &#39;your_secret&#39;, // 综合安防管理平台提供的Secret ip: &#39;platform_ip_address&#39; // 综合安防管理平台IP地址 }; ``` #### 2. 初始化HCWebSDK实例 通过引入HCWebSDK库文件，在Vue组件中初始化HCWebSDK对象。通常情况下，该操作应在`mounted()`生命周期钩子函数中执行。 ```javascript import { onMounted, onUnmounted } from &#39;vue&#39;; export default { setup() { let player; const initPlayer = () => { HcNetSdk.init({ onSuccess: (data) => { console.log(&#39;Initialization successful:&#39;, data); player = new HcNetSdk.Player(); player.startLiveStream(config.deviceSerial); // 开始直播流 }, onError: (error) => { console.error(&#39;Error during initialization:&#39;, error); } }); }; onMounted(() => { initPlayer(); // 调用初始化逻辑 }); onUnmounted(() => { if (player && typeof player.stop === &#39;function&#39;) { player.stop(); // 停止播放器 } }); return {}; } } ``` 上述代码展示了如何利用Vue3组合式API中的`onMounted`和`onUnmounted`钩子分别启动和停止HCWebSDK播放器。 #### 3. 实现视频叠加信息功能 要向视频画面添加文字或其他图形化信息，可调用HCWebSDK的相关API设置OSD（On-Screen Display）。具体而言，可以通过`setOverlayText`方法指定显示的内容及其位置。 以下是示例代码片段： ```javascript const setVideoOverlay = () => { if (!player || !player.setOverlayText) { console.warn(&#39;Player is not initialized or does not support overlay.&#39;); return; } const textConfig = { channelNo: 1, enable: true, content: &#39;Custom Overlay Text&#39;, positionX: 50, // X坐标百分比(范围0~100) positionY: 80 // Y坐标百分比(范围0~100) }; player.setOverlayText(textConfig).then((result) => { console.log(&#39;Overlay configuration success:&#39;, result); }).catch((err) => { console.error(&#39;Failed to configure overlay:&#39;, err); }); }; initPlayer().then(setVideoOverlay); // 在初始化完成后立即设置覆盖层 ``` 此部分实现了动态调整视频画面上的文字内容及定位的能力。 #### 4. TypeScript兼容性考虑 如果您的Vue3项目采用了TypeScript，则还需要定义相应的类型声明以便获得更好的IDE提示和支持。例如，创建一个`.d.ts`文件描述HCWebSDK全局变量结构[^2]: ```typescript declare global { interface Window { HcNetSdk?: any; // 替代实际类型的精确定义 } } export {}; ``` 以上步骤确保了即使使用强类型语言也能顺利接入第三方JS库而不会遇到编译错误等问题。 ---
评论 54
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值