vue项目中如何集成海康云眸web控件

海康云眸文档地址:https://www.hik-cloud.com/poseidon/index.html

海康云眸web控件下载地址:https://www.hik-cloud.com/poseidon/index.html#/download (需要登录账户才能看到下载的内容,账户请联系公司人员XXX)
目前海康云眸的视频集成方法有以下几种
在这里插入图片描述
针对web版,有3种方案:web视频控件、标准流预览、UIKit

基于需求需要,我们web版选择了两种方案:首页的视频模块采用web控件方案;发起巡店页面的视频播放采用UiKit方案
我们的视频巡店web版需要集成海康云眸web控件(注意是应用程序,不是插件),才能进行视频播放

在这里插入图片描述
集成的过程中,遇到很多问题:

1、使用海康提供的控件,渲染出来的监控框不是页面上的元素而是一个程序,不受样式控制,导致页面的弹框会被覆盖,页面滚动的时候也一直置顶,解决方法:计算弹框的具体位置,拿到弹框相对控件的位置(起点x坐标,起点y坐标,弹框宽,弹框高),通过 oWebControl.JS_CuttingPartWindow、oWebControl.JS_RepairPartWindow进行控件扣除部分窗口和还原部分窗口

### 在 Vue3 中集成和使用 Web 视频控件 #### 准备工作 为了在 Vue3 项目中成功集成海康 Web 控件,需先完成准备工作。确保已获取到官方提供的 SDK 和相关文档[^1]。 #### 安装依赖库 根据官方说明,在 HTML 文件头部引入必要的 JavaScript 库文件: ```html <script id="videonode" src="/path/to/webVideoCtrl.js"></script> <script id="videonode" src="/path/to/jquery-1.7.1.min.js"></script> <script id="videonode" src="/path/to/jsVideoPlugin-1.0.0.min.js"></script> ``` 注意路径应指向实际存放这些脚本的位置[^2]。 #### 初始化组件 创建一个新的 Vue 组件用于封装视频播放功能。在此组件内定义初始化逻辑以及控制方法: ```javascript <template> <div ref="videoContainer" style="width:800px;height:600px;"></div> </template> <script setup> import { onMounted, ref } from 'vue' const videoContainer = ref(null) // 插入初始化代码片段 function initWebVideo() { const containerId = "videoContainer" // 调用插件 API 进行实例化操作... } onMounted(() => { initWebVideo() }) </script> ``` 此部分具体实现细节取决于所选方案的不同而有所差异,建议参照官方文档中的指导来编写相应函数调用来启动视频流服务。 #### 处理兼容性和错误情况 考虑到不同浏览器环境下的表现可能不一致,应当加入适当的异常处理机制以增强稳定性。例如监听加载失败事件并给出友好提示;针对某些特殊场景(如移动端),还需考虑调整布局样式适应屏幕尺寸变化等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值