关于海康威视web视频插件开发，iframe、弹出页面上视频框偏移问题

最新推荐文章于 2024-05-13 02:03:41 发布
最新推荐文章于 2024-05-13 02:03:41 发布
阅读量6.3k 收藏 9
点赞数 7
分类专栏： 项目上遇到的问题 文章标签： 海康 海康威视 WEB控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37743655/article/details/107238601
版权

这是官方文档（视频WEB插件V1.4.0开发指南）给的说明，也不说原因和解决方法，可恶！！！（其他新版本不清楚）

这是之前的。。。。

后来发现实例化对象oWebControl上有这两个属性：oDocOffset.top，oDocOffset.left

默认都是0，

如果容器是div，以div左上角定位对齐，

如果是弹出框，iframe形式，则是以document左上角对齐，

修改如下：

oWebControl.oDocOffset.top = 88;
oWebControl.oDocOffset.left = 498;

果然可以。。。

位置需要一点点调整。。。。

仅为自己做笔记，顺便分享给遇到共同问题的人，如有错误，请不吝赐教

CHAOS00007
关注
  • 7
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 30
    评论
专栏目录
Web端 嵌入海康视频监控组件
ColdCoder的博客
05-23 2759
Web端 嵌入海康视频监控组件 最近今天在做一个监控系统，需要嵌入海康的SDK。之前做这块的人已经走了，无奈只能从头开始。然而，去下载了海康的SDK使用文档，真的是想死的心都有了，看一遍完全没啥感觉。问了一下度娘，看到很多骗阅读量的无用分享，于是决定记录分享一下自己的成功调用。 第一步：与其他分享一样，先把海康的三个js文件引入到根html文件，楼主做的是VUE项目，所以放在了public文件夹下的index.html中。 <script src="jquery-1.12.4.min.js">&
解决海康视频插件错位以及点击页面出现闪烁的情况
weixin_44005989的博客
05-06 3868
此问题在我不屑的探索中终于摸清楚了！！ 首先博主的问题是由于多页面造成的，比如layadmin框架，海康视频插件错位的原因是因为主页面中嵌入的子页面都是以iframe的方式，我大胆的猜测海康视频是单页面的，因为它读取div元素的位值，以及style中的css属性，都是没有父级概念的。 ...
解决海康视频插件遮挡弹窗问题
m0_54281860的博客
04-11 1994
1.若是同文件可直接使用方法，点击弹窗时隐藏，退出弹窗时显示，可避免遮挡问题。2.若是非同文件，使用本地存储与定时调用来解决遮挡问题。
2024年前端最全海康威视web控件开发的正确姿势(1)，2024年最新面试都面试些什么
2401_84619606的博客
05-13 304
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
海康视频 iframe layui 弹窗 偏移
是夜色太荒芜的专栏
05-11 1734
最近升级老系统的海康视频到v1.4，遇到layui的弹窗弹出的iframe视频框，不能随拖拽而变换位置。 问题是因为海康视频插件不支持随屏幕变化而自适应。需要手动控制。文档中已明确指出。 修改后的代码已上传github 需要在插件初始化和拖拽时，设置偏移位置自适应。 在弹窗的sucess、moveEnd（拖拽）方法中自动刷新偏移量。 var offsetLeft=layero.find('iframe')["prevObject"][0].offsetLeft offsetLeft为弹窗的最上层ifram
海康摄像头插件嵌入iframe时视频播放插件位置问题
wv112406的博客
04-01 887
参考：https://juejin.cn/post/6857670423971758094。原因：没有按照iframe相对位置计算视频插件位置。
vue用iframe播放海康视频
weixin_42674490的博客
02-28 3076
由于项目需要同时显示两个相机的视频，使用上一篇文章封装的组件无法完成，因为当时webVideoCtrl.js是直接定义在全局的，$相当于一整个项目的window,无论怎么使用都只能在第一次定义的dom位置显示视频（如果有更好的方法欢迎评论区告知），因此使用了iframe隔离window。 1.在public地址下添加iframe.html 2.iframe.html <!doctype html> <html> <head> <title></
海康威视的视频web端（vue开发）的实时预览、录像回放和页面拖拽
热门推荐
hbjiankely的博客
11-20 2万+
效果图 实现步骤 1. 安装海康web插件，去海康威视官网上下载，官方不支持Mac，只支持Windows https://open.hikvision.com/ 2. 在index.html引入js文件，安装包里面有 <script src="static/jquery-1.12.4.min.js"></script> <script src=...
Vue集成海康威视 视频WEB插件 V1.5.3视频插件
最新发布
06-06
在本文中，我们将深入探讨如何在Vue.js项目中集成海康威视的视频WEB插件V1.5.3，以便实现高效的视频监控和管理功能。Vue.js是一款轻量级的前端JavaScript框架，以其易用性和灵活性而广受欢迎。而海康威视作为全球...
5个海康威视视频插件WebComponents
06-17
在海康威视的视频插件中，Shadow DOM可能会用于隐藏和管理播放器内部的DOM结构，确保样式只作用于该组件本身，不会影响到页面上的其他元素。 2. **Custom Elements**：Custom Elements API允许开发者定义新的HTML...
海康 web 插件
05-08
网页插件版本：V3.0.3.3 (64位)。 谷歌浏览器45版本以上已经完全屏蔽第三方控件，建议使用45版本以下的谷歌浏览器
海康视频web插件，亲测可用
10-20
海康视频web插件，直接打开demo就可以使用。。。。。。
开发调用海康威视摄像头的web端页面
05-22
点击webComponents.exe安装 注意版本号和 32位 64位（这里跟正一下 木有64位尴尬尴尬） 如果没有合适的 请去官网下载 第二步：将文件夹中 demo.js demo.css webVideoCtrl.js 这3个文件导入你的项目，还需要jquery 没有的小伙伴可以导开发包里面的1.7
海康威视摄像头WEB无插件开发包 V3.2（官方版本）
06-17
"海康威视摄像头WEB无插件开发包 V3.2（官方版本）"是海康威视为开发者提供的一种高效、便捷的在线视频流处理工具，旨在帮助开发者在网页端实现对海康威视摄像头的实时监控功能，而无需依赖任何浏览器插件。...
海康威视 视频WEB插件 含最新版测试demo
10-29
提供适用于Windows桌面操作系统IE、Chrome、Firefox浏览器的实时视频预览和录像回放功能，支持32/64位Chrome、Firefox、IE11浏览器，支持32位IE10浏览器（兼容64位IE10）。
iframe嵌入海康威视摄像头监控视频画面
yangyifan_0811的专栏
04-16 1527
必须配置的播放参数为cameraIndexCode, 查找办法为：运行管理中心 - 状态监控 - 搜索artemis - api网关artemis - 选项卡api管理 - 查询监控点 - 在线调试 - 认证信息 - 输入appkey和appsecret - body改为{ "pageNo": 1, "pageSize": 100} - 发送请求 -拷贝json文件 - 找到cameraIndex。"ip": "", // 综合安防管理平台的ip地址，直接写ip，不要加https。
vue iframe 海康威视3.0使用笔记
qq_38388578的博客
04-18 691
访问 2、谷歌打开chrome://flags/#block-insecure-private-network-requests。注意：1、以本地ip访问不能用。上传接口去掉token校验。
使用iframe实现视频监控
weixin_44090040的博客
08-01 1442
iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容 iframe常用属性: 1.frameborder:是否显示边框，1(yes),0(no) 2.height:框架作为一个普通元素的高度，建议在使用css设置。 3.width:框架作为一个普通元素的宽度，建议使用css设置。 4.name:框架的名称，window.frames[name]时专用的属性。 5.scrolling:框架的是否滚动。yes,no,auto。 6.src：内框架的地址，可以使页..
海康威视web插件开发包 vue
07-27
海康威视是一家知名的摄像头和监控设备制造商，他们提供了一套名为WEB插件开发包的工具，可以帮助开发人员在Vue框架中集成海康威视的监控设备功能。 该插件开发包基于Vue.js，是一种用于构建用户界面的现代JavaScript框架。Vue.js具有轻量级、简洁易用、灵活快速等特点，因此非常适用于开发单页面应用程序。 通过使用海康威视的WEB插件开发包，开发人员可以使用Vue.js框架创建一个交互式的监控设备管理系统。该开发包提供了一系列API和组件，可以方便地实现视频预览、录像回放、云台控制等功能。 在使用该开发包之前，开发人员需要先准备好所需的开发环境，包括安装Node.js和Vue CLI等工具。然后，可以通过运行一些命令来创建一个新的Vue项目，并安装海康威视的WEB插件开发包。 在项目中，开发人员可以使用Vue的组件化开发方式，将界面划分为小的可复用组件，再通过组合这些组件来构建应用程序。同时，开发人员可以利用Vue的响应式数据绑定机制，实时更新监控设备的状态和数据。 此外，海康威视web插件开发包还提供了丰富的文档和示例代码，可以帮助开发人员快速上手和理解如何使用该开发包。开发人员可以根据文档中的指导进行开发，并根据实际需求对插件进行定制和扩展。 总之，海康威视web插件开发包与Vue框架的结合可以帮助开发人员快速构建功能强大的监控设备管理系统。这个开发工具包提供了丰富的API和组件，使开发人员能够轻松实现海康威视设备的各种功能，并提供了详细的文档和示例代码，方便开发人员学习和使用。
评论 30
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值