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将基本功能都封装成函数了

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Vue是一种用于构建用户界面的JavaScript框架,而海康摄像头是一种监控设备,用于视频监控系统。在Vue中对接海康摄像头源码可以实现Web应用程序中实时显示和控制海康摄像头的视频流。 首先,需要下载并安装海康摄像头的相关SDK,并了解SDK的使用方法以及提供的接口。然后,在Vue项目中引入SDK的相关依赖,可以使用npm或者直接将SDK文件导入项目中。 接下来,在Vue组件中创建一个视频播放器的容器元素,用于展示摄像头的视频流。在组件的生命周期钩子函数中,使用SDK的接口初始化视频播放器,并传入摄像头的地址或者ID,接收视频流并在容器中进行播放。可以根据需要设置播放器的参数,例如视频的清晰度、是否支持录像等。 此外,可以在Vue组件中实现控制摄像头的功能。通过SDK提供的接口,可以实现摄像头的云台控制、焦距调节、镜头旋转等操作。可以通过为组件绑定事件监听器,监听用户的操作并调用相应的SDK接口来实现这些功能。 对于需要实时监控多个海康摄像头的情况,可以在Vue中动态生成多个视频播放器容器,并根据需要对每个摄像头分别进行初始化和控制。 总之,通过在Vue项目中对接海康摄像头的源码,可以实现Web应用程序中展示摄像头的实时视频流,并实现摄像头的控制功能,为用户提供更便捷的视频监控体验。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值