海康摄像头插件嵌入iframe时视频播放插件位置问题

news2024/12/24 3:37:10

参考:https://juejin.cn/post/6857670423971758094

原因:没有按照iframe相对位置计算视频插件位置。
解决:

$(window).on('resize', resize);

function resize(){
    // 解决iframe中嵌入海康插件初始化问题:
    // 1. 获取iframe相比于窗口的偏移量;
    const offset = window.top.$('.layui-layer-content iframe').offset(); // window.top.$ 取最外层jquery对象才可以获取有视频插件iframe对象;
    if (offset && offset.top) {
        $("#cameraPlugin").css("margin-top", Number(offset.top) + 1 + "px");
        $("#cameraPlugin").css("margin-left", Number(offset.left) + 1 + "px");
        let newWidth = $("#cameraPlugin").width();
        let newheight = $("#cameraPlugin").height();
        if (WebVideoCtrl) {
            WebVideoCtrl.I_Resize(newWidth, newheight);
        }
    }
}

// 视频插件初始化
WebVideoCtrl.I_InitPlugin({
	...,
	cbInitPluginComplete: () => {
		// 初始化成功,调用I_InsertOBJECTPlugin
		WebVideoCtrl.I_InsertOBJECTPlugin("cameraPlugin").then(() => {
			console.log("像机插件初始化成功");
            // 调整插件位置;
            resize();
		})
	}
});


海康WebSdk: https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10&id=4c945d18fa5f49638ce517ec32e24e24
插件版本:WEB3.3控件开发包 V3.3
在这里插入图片描述
海康H5 SDK需要转码后端比较麻繁,前端很简单,但有一定时延。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1562149.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

单V及多V感知在自动驾驶在恶劣环境条件下的感知提升方案

单V及多V感知在自动驾驶在恶劣环境条件下的感知提升方案 附赠自动驾驶学习资料和量产经验:链接 自动驾驶中的视觉感知是车辆在不同交通条件下安全、可持续地行驶的关键部分。然而,在大雨和雾霾等恶劣天气下,视觉感知性能受到多种降级效应的极…

2021-08-06

yarn的简介: Yarn是facebook发布的一款取代npm的包管理工具。 yarn的特点: 速度超快。 Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。 在执行代码…

适用于智能断路器、新能源汽车充电枪锁、电动玩具、电磁门锁等的直流电机驱动芯片D6289ADA介绍

应用领域 适用于智能断路器(家用或工业智能空开)、新能源汽车充电枪锁、电动玩具、电磁门锁、自动阀门等的直流电机驱动。 功能介绍 D6289ADA是一款直流马达驱动芯片,它有两个逻辑输入端子用来控制电机前进、后退及制动。该电路具有良好的抗干…

Qt 实现简易的视频播放器,功能选择视频,播放,暂停,前进,后退,进度条拖拉,视频时长显示

1.效果图 2.代码实现 2.1 .pro文件 QT core gui multimedia multimediawidgets 2.2 .h文件 #ifndef VIDEOPLAYING_H #define VIDEOPLAYING_H#include <QWidget> #include<QFileDialog>#include<QMediaPlayer> #include<QMediaRecorder> #in…

数据分析之Tebleau可视化:折线图、饼图、环形图

1.折线图的绘制 方法一&#xff1a; 拖入订单日期和销售金额&#xff0c;自动生成一个折线图 方法二&#xff1a; 选中订单日期和销售金额&#xff08;摁住ctrl可以选择多个纬度&#xff09; 点击右边的智能推荐&#xff0c;选择折线图 2.双线图的绘制、双轴的设置 方法一&…

手机一键换ip地址,解锁网络自由

在数字化时代&#xff0c;手机已经成为我们生活中不可或缺的一部分。随着移动互联网的快速发展&#xff0c;手机用户对于网络安全和隐私保护的需求也日益增强。其中&#xff0c;IP地址作为手机在网络中的标识&#xff0c;扮演着重要的角色。有时&#xff0c;出于隐私保护或网络…

HTTPS 如何优化?(计算机网络)

硬件优化 因为 HTTPS 是属于计算密集型&#xff0c;应该选择计算力更强的 CPU&#xff0c;而且最好选择支持 AES-NI 特性的 CPU&#xff0c;这个特性可以在硬件级别优化 AES 对称加密算法&#xff0c;加快应用数据的加解密。 软件优化 如果可以&#xff0c;把软件升级成较新的版…

Scala第十五章节(递归的相关概述、Scala阶乘案例、Scala斐波那契数列案例、Scala打印目录文件案例)

章节目标 了解递归的相关概述掌握阶乘案例掌握斐波那契数列案例掌握打印目录文件案例 1. 递归 递归指的就是 方法自己调用自己的情况 . 在涉及到复杂操作时, 我们会经常用到它. 在使用递归时, 要注意以下三点: 递归必须有出口, 否则容易造成 死递归 .递归必须要有规律.构造…

网址打包微信小程序源码 wap转微信小程序 网站转小程序源码 网址转小程序开发

内容目录 一、详细介绍二、效果展示2.效果图展示 三、学习资料下载 一、详细介绍 我们都知道微信小程序是无法直接打开网址的。 这个小程序源码提供了一种将网址直接打包成微信小程序的方法&#xff0c; 使得用户可以在微信小程序中直接访问这些网址内容。 这个源码没有进行加…

如何评估基于指令微调的视觉语言模型的各项能力-MMBench论文解读

1. 传统基准的固有局限 VQAv2:视觉问题回答数据集,主要用于评估视觉理解与推理能力。COCO Caption:图像描述生成数据集,用于评估模型对图像内容的理解与描述能力。GQA:结合常识的视觉问题回答数据集。OK-VQA:需要外部知识的视觉问题回答数据集。TextVQA:图像中包含文本的…

RAG论文 Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks

RAG&#xff08;Retrieval-Augmented Generation&#xff0c;检索增强生成&#xff09;由Facebook在2020年发表的论文 Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks 语言模型存在幻觉 由于知识缺乏&#xff0c;没有实时增量信息没有具体领域的拓展信息…

【MATLAB第103期】#源码分享 | 基于MATLAB的LIME可解释性线性分类预测模型,2020b以上版本

【MATLAB第103期】#源码分享 | 基于MATLAB的LIME可解释性线性分类预测模型&#xff0c;2020b以上版本 一、模型介绍 LIME&#xff08;Local Interpretable Model-agnostic Explanations&#xff09;是一种用于解释复杂机器学习模型预测结果的算法。它由Marco Ribeiro、Sameer…

如何使用极狐GitLab Maven 仓库?

本文作者&#xff1a;徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了如何使用极狐GitLa…

xss-lab 1-10关过关记录

前言 最近发现xss学的知识点都忘干净了&#xff0c;来打一打靶子并且记录一下这些过关经历。 level1 特性&#xff1a; 1.get型传参 2.无任何过滤 过关操作&#xff1a; 直接构造payload传参过关 level2 get型传参 我们在输入框中输入payload发现并没有弹窗。 查看网页…

Python接口自动化测试-篇1(postman+requests+pytest+allure)

Python接口自动化测试是一种使用Python编程语言来编写脚本以自动执行针对应用程序接口&#xff08;APIs&#xff09;的测试过程。这种测试方法专注于检查系统的不同组件或服务之间的交互&#xff0c;确保它们按照预期规范进行通信&#xff0c;而不涉及用户界面&#xff08;UI&a…

2024年04月IDE流行度最新排名

点击查看最新IDE流行度最新排名&#xff08;每月更新&#xff09; 2024年04月IDE流行度最新排名 顶级IDE排名是通过分析在谷歌上搜索IDE下载页面的频率而创建的 一个IDE被搜索的次数越多&#xff0c;这个IDE就被认为越受欢迎。原始数据来自谷歌Trends 如果您相信集体智慧&am…

书生·浦语训练营二期第二次笔记

1. 部署 InternLM2-Chat-1.8B 模型进行智能对话 1.1 配置环境 创建conda环境&#xff0c;安装必要的库 studio-conda -o internlm-base -t demo # 与 studio-conda 等效的配置方案 # conda create -n demo python3.10 -y # conda activate demo # conda install pytorch2.0.…

自定义 Unity Scene 的界面工具

介绍 文档中会进行SceneView的自定义扩展&#xff0c;实现显示常驻GUI和添加自定义叠加层&#xff08;Custom Overlay&#xff09;。 最近项目开发用回了原生的Unity UI相关内容。对于之前常用的FairyGUI来说&#xff0c;原生的UGUI对于UI同学来讲有些不太方便。再加上这次会…

圈子小程序源码-圈子系统成品搭建-APP小程序H5三端源码交付,支持二开!PHP书写,uniAPP后端开发!

【首页】 圈子列表页可分为个人圈子、企业圈子、加入圈子、智诚工业圈子 (平台圈) 四种。 其中重要圈子可选择置顶&#xff0c;方便快速进入:个人圈子和企业圈子数量有限始终位于前位。也可通过搜索快速搜索圈子。 为了实现流量分散入口的集中&#xff0c;将创建企业圈子、发…

服务器设置了端口映射之后外网还是访问不了服务器

目录 排查思路参考&#xff1a; 1、确认服务是否在运行 2、确认端口映射设置是否正确 3、使用防火墙测试到服务器的连通性 4、检查服务内部的配置 5、解决办法 6、学习小分享 我们在一个完整的网络数据存储服务系统设备中都会存有业务服务器、防火墙、交换机、路由器&a…