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

参考: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需要转码后端比较麻繁,前端很简单,但有一定时延。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

第二节课《轻松玩转书生·浦语大模型趣味 Demo》

比较匆忙,假期前仿照第一期课程的内容好像被清空了,重新搭建一次。 https://github.com/InternLM/Tutorial/blob/camp2/helloworld/hello_world.md 按照那老师写好的,一步步复制就好了 浦语灵笔2的大概率是会超出显存,先不测试了…

水泥5G智能制造工厂数字孪生可视化平台,推进水泥行业数字化转型

水泥5G智能制造工厂数字孪生可视化平台,推进水泥行业数字化转型。水泥5G智能制造工厂数字孪生可视化平台,是水泥行业数字化转型的关键推手。数字孪生平台运用先进的信息技术和数字化手段,实现水泥生产过程的数字化模拟、可视化监控和智能化管…

泰坦尼克号幸存者数据分析

泰坦尼克号幸存者数据分析 1、泰坦尼克号数据集2、数据集加载与概览3、泰坦尼克号幸存者数据分析4、哪些人可能成为幸存者? 1、泰坦尼克号数据集 泰坦尼克号的沉没是世界上最严重的海难事故之一,造成了大量的人员伤亡。这是一艘号称当时世界上最大的邮轮…

LoRa自组网络设计 6

1 深入了解LoRaWan 1.1 LoRaWan概述 LoRaWAN采用星型无线拓扑 End Nodes 节点 Gateway 网关 Network Server 网络服务器 Application Server 应用服务器 LoRa联盟是2015年3月Semtech牵头成立的一个开放的、非盈利的组织,发起成员还有法国Actility,中国…

[C#]OpenCvSharp使用帧差法或者三帧差法检测移动物体

关于C版本帧差法可以参考博客 [C]OpenCV基于帧差法的运动检测-CSDN博客https://blog.csdn.net/FL1768317420/article/details/137397811?spm1001.2014.3001.5501 我们将参考C版本转成opencvsharp版本。 帧差法,也叫做帧间差分法,这里引用百度百科上的…

C语言数据结构专题(3应用-通讯录的实现)

前言 前面的两节我们弄清了顺序表是什么?顺序表是怎么实现的?此时大家可能有疑问了:顺序表被创造出来具体有什么用呢?那么本节就给大家带来顺序表的应用--通讯录的实现,废话不多说,我们正式进入本节的学习 …

探寻马来西亚服务器托管的优势与魅力

随着全球跨境业务的不断增加,境外服务器成为越来越受欢迎的选择。在这其中,马来西亚服务器备受关注,其机房通常位于马来西亚首都吉隆坡。对于客户群体主要分布在东南亚、澳大利亚和新西兰等地区的用户来说,马来西亚服务器是一个理…

MATLAB近红外光谱分析技术应用

郁磊副教授,主要从事MATLAB编程、机器学习与数据挖掘、数据可视化和软件开发、生理系统建模与仿真、生物医学信号处理,具有丰富的实战应用经验,主编《MATLAB智能算法30个案例分析》、《MATLAB神经网络43个案例分析》相关著作。已发表多篇高水…

JVM基础:类的生命周期详解

JDK版本:jdk8 IDEA版本:IntelliJ IDEA 2022.1.3 文章目录 一. 生命周期概述二. 加载阶段(Loading)2.1 加载步骤2.2 查看内存中的对象 三. 连接阶段(Linking)3.1 连接之验证3.2 连接之准备3.3 连接阶段之解析 四. 初始化阶段(Initialization)4.1 单个类的…

约数与倍数-第12届蓝桥杯选拔赛Python真题精选

[导读]:超平老师的Scratch蓝桥杯真题解读系列在推出之后,受到了广大老师和家长的好评,非常感谢各位的认可和厚爱。作为回馈,超平老师计划推出《Python蓝桥杯真题解析100讲》,这是解读系列的第45讲。 约数与倍数&#…

rust 面向对象编程特性、模式与模式匹配、高级特征

面向对象编程OOP 学习了结构体、枚举,它们可以包含自定义数据字段,也可以定义内部方法,它们提供了与对象相同的功能。 面向对象的四大特征:封装、继承、多态 通过pub标记为公有的结构体,在其他模块中可以访问使用这…

python爬虫———post请求方式(第十四天)

🎈🎈作者主页: 喔的嘛呀🎈🎈 🎈🎈所属专栏:python爬虫学习🎈🎈 ✨✨谢谢大家捧场,祝屏幕前的小伙伴们每天都有好运相伴左右,一定要天天…

C语言【编译和链接】

1.程序执行过程 C语言的编译和链接是将源代码转换为可执行程序的过程。下面是C语言编译和链接的基本步骤: 预处理:在编译前,预处理器会对源代码进行。它会处理以"#"开头的预处理指令,#include和#define,并将…

算法笔记————ST表

运用了倍增思想,从小到大处理 1.【模板】ST 表 // Problem: // P3865 【模板】ST 表 // // Contest: Luogu // URL: https://www.luogu.com.cn/problem/P3865 // Memory Limit: 125 MB // Time Limit: 800 ms // // Powered by CP Editor (https://cpedi…

Kotlin学习日志(一)TextView、Button、Toast的使用(1)

android:layout_width“wrap_content” android:layout_height“wrap_content”/> import kotlinx.android.synthetic.main.activity_main.* 这句话的意思是引进Kotlin的的控件变量自动映射功能,接下来只要是这个activity_main.xml文件中的控件,我…

非关系型数据库——Redis基本操作

目录 一、Redis数据库常用命令 1.Set——存放数据 2.Get——获取数据 3.Keys——获取符合条件的键值 4.Exists——判断键值是否存在 5.Del——删除指定键值 6.Type——获取键值对应的类型 7.Rename——对已有键值重命名(覆盖) 8.Renamenx——对…

160 Linux C++ 通讯架构实战14,epoll 反应堆模型

到这里,我们需要整理一下之前学习的epoll模型,并根据之前的epoll模型,提出弊端,进而整理epoll反应堆模型,进一步深刻理解,这是因为epoll实在是太重要了。 复习之前的epoll的整体流程以及思路。 参考之前写…

虚幻UE5智慧城市全流程开发教学

一、背景 这几年,智慧城市/智慧交通/智慧水利等飞速发展,骑士特意为大家做了一个这块的学习路线。 二、这是学习大纲 1.给虚幻UE5初学者准备的智慧城市/数字孪生蓝图开发教程 https://www.bilibili.com/video/BV1894y1u78G 2.UE5数字孪生蓝图开发教学…

【软件工程】测试规格

1. 引言 1.1简介 本次的测试用例是基于核心代码基本开发完毕,在第一代系统基本正常运行后编写的,主要目的是为了后续开发与维护的便利性。 该文档主要受众为该系统后续开发人员,并且在阅读此文档前最后先阅读本系统的需求文档、概要设计文…

海外视频网站推广实战需掌握的10个关键性数据指标-华媒舍

在海外视频网站推广实战中,了解和掌握一些关键性数据指标是非常重要的。这些指标可以帮助我们评估视频网站的推广效果,优化推广策略,提升用户体验。以下是推广人员在实战中应该了解和关注的十个关键性数据指标: 1. 视频创意点击率…