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

最新推荐文章于 2024-05-29 14:38:39 发布
最新推荐文章于 2024-05-29 14:38:39 发布
阅读量1.2k 收藏 4
点赞数 8
分类专栏： 硬件接入 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_63541756/article/details/136945611
版权

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

一.回答评论

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

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

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

最低0.47元/天 解锁文章
VUE+海康摄像头WebSDK_V3.3.0对接
Sky_xinkong的博客
04-16 5038
在本篇文章中，我们将详细探讨如何使用WebSDK_V3.3.0技术接入海康摄像头。同时，我们也将分享在实际应用中遇到的问题及解决方案，希望能够对广大开发者和技术爱好者有所帮助。
vue2使用rtsp视频流接入海康威视摄像头(纯前端)
热门推荐
m0_63541756的博客
03-26 2万+
主要详细讲了vue如何使用rtsp流接入海康威视摄像头的过程
vue2.0接入海康威视控件包V3.3.0——海康威视摄像头接入前端页面(webSDK包)模式
m0_63541756的博客
01-24 1万+
1.首先去海康威视官网-海康开放平台(2.如果没有账号的可以先注册一个账号,有账号的直接登录3.支持与服务-资源中心4.设备开放5.设备开放-资源工具6.选择Web开发包7.点击Web3.3控件开发包V3.3的立即下载(不用下载开发指南因为下载的压缩包里已经携带了开发指南)8.这是下载下来的压缩包,进行解压(自己找个地方放就行没有具体的位置要求)9.解压下来之后进入文件夹有三个文件夹，第一个是demo，第二个是使用说明，第三个是代理。
基于vue2和海康威视WEB3.3控件开发包 V3.3实现监控预览
weixin_48474646的博客
02-07 2395
基于大屏调用海康威视
vue2中使用WebSDK_V3.3.0(231027)展示监控视频
m0_65930596的博客
01-26 1795
当前script里面的方法只是当前开发所需，其他方法可以看下载的文件中HCWebSDK3.3.pdf文档，或者运行demo--cn--demo.html文件，根据自己所需查找对应方法。其实在父组件的sysParams中不需要这样重复声明账号密码，他登录一次后会有已登录状态，这里未作修改，只有通道列表更改一下就可以，只是当前代码还未更改。（1）必须安装HCWebSDKPlugin.exe插件，没有安装插件的电脑无法观看。（3）如果不销毁播放器，他会出现在所有页面的上面，销毁的话再重新加载会慢一点。
vue.js对接海康威视摄像头web开发包
这里是前端，是不一样的前端
05-23 2570
【代码】vue.js对接海康威视摄像头web开发包。
WebSDK_V3.3.0 植入Vue2 项目
weixin_64551008的博客
09-27 3335
前端vue2 rtsp取流海康摄像头实时预览画面 支持高版本谷歌火狐等 用WEB3.3控件开发包 V3.3实现
vue 对接海康 硬件产品 录像机 WEB3.3控件开发包 V3.3
weixin_53322542的博客
01-12 1648
3.0 的不支持高版本的谷歌浏览器 3.2 虽然支持 但是 需要录像机 可以传 ws流 综合 我的项目 我就 使用了3.3。当时 为了 方便 就 把 dome 文件 全放进了项目 引入到项目是 需要 引到public文件里的 index页面里。先去官网下载WEB3.3控件开发包，自己先用开发包里的 dome.html 先自测可不可行。红框为必填 输入录像机的信息 点击开始 预览如果 显示画面 就可以 使用了。下面 就是 我看文档改的代码 文档真的很有用 哪里不懂就多看看 研究一下。选择3.3下载到本地。
海康威视控件包V3.3.0
01-24
海康威视控件包V3.3.0是一款专为海康威视硬件设备设计的软件开发工具包，主要用于帮助开发者集成海康威视的摄像头、NVR、DVR等硬件产品到自己的应用程序中。这个版本号表示该控件包是第三次大更新的第三个小版本，...
海康威视web控件开发包
11-13
该开发包的核心部分是用于在Web页面上展示海康威视摄像头视频流的插件。这个插件基于ActiveX或NPAPI技术，能在主流的浏览器（如Internet Explorer、Firefox等）中运行，使得用户无需安装额外的客户端软件就能通过...
vue对接海康播放器插件组件
09-07
vue对接海康播放器插件组件
海康威视WEB3.0控件开发包
05-02
基于ActiveX和NPAPI开发的WEB控件，以实现海康威视摄像头访问NVR实现云台，支持视频回放、实时预览视频、控制云台等，本控件仅支持B/S网页开发，不支持C/S开发。 内附Web3.0_控件开发包编程指南.pdf+控件源码。
海康威视sdk-web3.0开发包
12-28
海康威视sdk-web3.0开发包 1.webcomponents.exe是海康威视的视频观看插件 2.只支持32位浏览器 3.需要32位系统 4.web3.0开发包，可以用，配合https://blog.csdn.net/qq_35583089/article/details/80631069 5.原始资源...
VUE3对接海康威视监控接口，实现实时查看监控。
cc_66666的博客
06-14 3991
vue3对接海康监控，实现实时查看监控功能。
Vue在PC端接入海康威视摄像头
weixin_52830464的博客
05-29 1389
该组件目录：src/components/MonitorVideo/index.vue">data() {return {},},}, 500);})},},methods: {// 初始化bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持iWndowType: 1, //表示视频组件窗口数，默认是1，我这里需要四个窗口改为了210。
海康WEB3.3控件开发包 V3.3 前端vue项目调用实时监控画面
hero8011的博客
09-22 1万+
本需求的完成离不开后端将设备映射到公网， 以及前端单独部署demo页面这个思路的转变。
vue项目对接海康威视监控视频
m0_56561432的博客
03-03 633
vue项目对接海康威视监控视频
Vue集成海康websdk实现摄像头预览
m0_52604918的博客
11-08 2629
海康websdk 、 Vue、集成
海康监控视频对接
chengchong_cc的博客
03-17 1355
海康对接
VUE+海康摄像头WebSDK V3.3.0对接
最新发布
11-03
Vue.js 和 海康威视摄像头 WebSDK 的集成主要是为了让前端开发者能够使用 Vue 框架构建动态、响应式的用户界面，并通过 WebSDK 实现对实时视频监控的功能。V3.3.0 版本的 WebSDK 提供了丰富的 API 接口，包括预览、录像、云台控制等。 以下是基本步骤： 1. **安装依赖**：在 Vue 项目中，通过 npm 或 yarn 安装海康威视提供的 SDK，如 `@hikvision-web-sdk`。 ```bash npm install @hikvision-web-sdk --save ``` 2. **引入 SDK**：在入口文件或需要使用的地方导入 SDK，通常会创建一个 Video 组件来管理视频实例。 ```javascript import Hikvision from '@hikvision-web-sdk'; // 初始化 SDK let hik = new Hikvision({ // 配置项，如 IP 地址、端口号、用户名密码等 }); ``` 3. **初始化摄像头**：在组件的 mounted 或 created 生命周期钩子中，连接到摄像头并开始预览。 ```javascript export default { data() { return { camera: null, }; }, async mounted() { try { await hik.connect(); this.camera = await hik.getCameraList()[0]; // 获取第一个摄像头 this.camera.startPreview(); // 开始预览 } catch (error) { console.error('Error connecting to camera:', error); } }, // ...其他组件方法 }; ``` 4. **处理事件和操作**：利用 SDK 提供的事件监听和方法调用，可以实现播放、暂停、录像等功能。例如： ```javascript camera.on('preview', () => { // 预览成功回调 }); camera.stopPreview().then(() => { // 停止预览后的操作 }); ```
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值