Vue集成海康websdk实现摄像头预览

  1. 选择以及下载相应的websdk:
    海康开放平台下载相应的sdk,web3.0不支持高版本浏览器,web3.2需要摄像头支持摄像头取流,web3.3支持高版本浏览器
    在这里插入图片描述
    我这选择的是3.3的。
  2. 可以先测试下开发包是否可以成功访问,修改用ip、户名、密码。端口一般使用默认80,点击登录,然后选择相应已登录设备,通道列表,点击开始预览可以看到画面即可。
  3. 将web集成到Vue:
    我这只需显示摄像头画面,所以只用了一个web元素
    在这里插入图片描述
    引入jquery和webVideoCtrl.js(需要修改导出模块代码以及jsVideoPlugin-1.0.0.min.js导出模块代码)
    在这里插入图片描述
    从代码中抽取出一些变量:
    在这里插入图片描述
    将官方demo中demo.js的自己需要的代码复制过来
    主要是初始化,登录,预览,退出预览等。官方退出之后没法重新登录预览,这个得修改下。并且,官方demo没有提供销毁插件画面的函数(不过可以自己在jsVideoPlugin-1.0.0.min.js里面找到)
m_pluginOBJECT.JS_DestroyPlugin();
/** 关闭播放插件 */
      this.I_StopWnd= function(){
        if(m_pluginOBJECT ){
          m_pluginOBJECT.JS_HideWnd();
          m_pluginOBJECT.JS_DestroyPlugin();
        }
      };

在vue中调用这个方法即可

// 销毁插件
    destory() {
      WebVideoCtrl.I_StopWnd();
    },

其它的就是需要啥就自己添加了,demo.js将基本功能都封装成函数了

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(() => { // 停止预览后的操作 }); ```
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值