当前位置: 首页 > news >正文

electron录制-镜头缩放、移动

要求

1、当录屏过程中,鼠标点击,镜头应该往点击处拉近,等一段时间还原
2、录屏过程中,可能会发生多次点击,但是点击位置偏差大,可能会导致缩放之后,画面没出来,因此需要移动镜头帧

效果如下

electron录制-镜头缩放

实现思路

1、监听鼠标点击、键盘按下事件
2、对以上监听数据进行排序、整合,例如:多次鼠标点击的情况,如果在4s内发生点击,只存一次点击事件,便于处理只会发生一次缩放;将其他的点击事件存储到children 集合里面,用于处理镜头帧移动;
3、针对视频帧的缩放、移动效果处理,基于 canvas 去做处理;

部份代码

事件数据处理:


const KEY_DOWN_MIN_SEC = 2 // 键盘事件2s内合并
const MOUSE_DOWN_MAX_SEC = 4 // 鼠标点击事件4s内合并
const EFFECT_TIME = 2 // 效果时长
/*** 最后一个点击事件舍弃【结束点击】* 计算缩放帧时间* 返回数组: [ { x, y, type, start, end, t }]* start、end表示视频的播放时长的时间*/
export const getEffectFrames = (recordTimeInfo: any, evenFrames: any) => {// 总时长const { startTime }  = recordTimeInfo// const durtion = Math.floor((endTime - startTime) / 1000)const cutFrames = []let i = 0while (i < evenFrames.length - 1) {const { time, type, use, x, y } = evenFrames[i]const sec = Math.floor((time - startTime) / 1000)let lastx = xlet lasty = yif (type === 'mousedown' && !use) {const item = {...evenFrames[i],start: sec,end: sec,children: [],}evenFrames[i].use = truefor (let j = i; j < evenFrames.length - 1; j++) {const { time: time1, type: type1, use: use1 } = evenFrames[j];const sec0 = Math.floor((time1 - startTime) / 1000)if (type1 === 'keydown' && sec0 - item.end <= KEY_DOWN_MIN_SEC) {item.end = sec0continue}if (type1 === 'mousedown' && !use1) {if (sec0 - item.end > MOUSE_DOWN_MAX_SEC) {i = j - 1break} else {evenFrames[j].use = trueevenFrames[j].start = sec0evenFrames[j].t = sec0 - item.enditem.end = sec0const { x: x1, y: y1} = evenFrames[j]const modx = Math.abs(x1 - lastx)const mody = Math.abs(y1 - lasty)if (modx >= 300 || mody >= 300) {item.children.push(evenFrames[j])lastx = x1lasty = y1}}}}item.end = item.end + EFFECT_TIMEitem.t = item.end - item.startcutFrames.push(item)}i = i + 1}return cutFrames;
}

相关文章:

electron录制-镜头缩放、移动

要求 1、当录屏过程中&#xff0c;鼠标点击&#xff0c;镜头应该往点击处拉近&#xff0c;等一段时间还原 2、录屏过程中&#xff0c;可能会发生多次点击&#xff0c;但是点击位置偏差大&#xff0c;可能会导致缩放之后&#xff0c;画面没出来&#xff0c;因此需要移动镜头帧 …...

红队内网攻防渗透:内网渗透之内网对抗:信息收集篇自动项目本机导出外部打点域内通讯PillagerBloodHound

红队内网攻防渗透 1. 内网自动化信息收集1.1 本机凭据收集类1.1.1、HackBrowserData 快速获取浏览器的账户密码1.1.2、Searchall 快速搜索服务器中的有关敏感信息还有浏览器的账户密码1.1.3、Pillager 适用于后渗透期间的信息收集工具,可以收集目标机器上敏感信息1.2 对外打点…...

2024最新IDEA插件开发+发布全流程 SelectCamelWords[选中驼峰单词](idea源代码)

2024最新IDEA插件开发&#xff08;发布&#xff09;-SelectCamelWords[选中驼峰单词]&#xff08;idea源代码&#xff09; 参考文档 Jetbrains Idea插件开发文档: https://plugins.jetbrains.com/docs/intellij/welcome.html代码地址&#xff1a;https://github.com/yangfeng…...

【网络安全】网络安全基础精讲 - 网络安全入门第一篇

目录 一、网络安全基础 1.1网络安全定义 1.2网络系统安全 1.3网络信息安全 1.4网络安全的威胁 1.5网络安全的特征 二、入侵方式 2.1黑客 2.1.1黑客入侵方式 2.1.2系统的威胁 2.2 IP欺骗 2.2.1 TCP等IP欺骗 2.2.2 IP欺骗可行的原因 2.3 Sniffer探测 2.4端口扫描技术…...

初识 GPT-4 和 ChatGPT

文章目录 LLM 概述理解 Transformer 架构及其在 LLM 中的作用解密 GPT 模型的标记化和预测步骤 想象这样⼀个世界&#xff1a;在这个世界里&#xff0c;你可以像和朋友聊天⼀样快速地与计算机交互。那会是怎样的体验&#xff1f;你可以创造出什么样的应用程序&#xff1f;这正是…...

【C语言】解决C语言报错:Array Index Out of Bounds

文章目录 简介什么是Array Index Out of BoundsArray Index Out of Bounds的常见原因如何检测和调试Array Index Out of Bounds解决Array Index Out of Bounds的最佳实践详细实例解析示例1&#xff1a;访问负索引示例2&#xff1a;访问超出上限的索引示例3&#xff1a;循环边界…...

【C++】一个极简但完整的C++程序

一、一个极简但完整的C程序 我们编写程序是为了解决问题和任务的。 1、任务&#xff1a; 某个书店将每本售出的图书的书名和出版社&#xff0c;输入到一个文件中&#xff0c;这些信息以书售出的时间顺序输入&#xff0c;每两周店主会手工计算每本书的销售量、以及每个出版社的…...

Lua迭代器详解(附加红点功能实例)

Lua迭代器详解与用法 1. 什么是迭代器2. 为什么需要理解迭代器的原理3. 迭代器的实现0. 闭包1. 有状态迭代器2. 无状态迭代器 4. 红点树系统基础 1. 什么是迭代器 迭代器是一种能让我们遍历一个集合中的所有元素的代码结构。比如常用ipairs()和pairs()。 2. 为什么需要理解迭代…...

锂磷硫(LPS)属于硫化物固态电解质 Li7P3S11是代表性产品

锂磷硫&#xff08;LPS&#xff09;属于硫化物固态电解质 Li7P3S11是代表性产品 锂磷硫&#xff08;LPS&#xff09;&#xff0c;为非晶态材料&#xff0c;是硫化物固态电解质代表性产品之一&#xff0c;具有热稳定性好、成本较低等优点&#xff0c;在固态电解质中离子电导率较…...

PointCloudLib 点云边缘点提取 C++版本

0.实现效果 1.算法原理 PCL(Point Cloud Library)中获取点云边界的算法主要基于点云数据的几何特征和法向量信息。以下是对该算法的详细解释,按照清晰的格式进行归纳: 算法概述 PCL中的点云边界提取算法主要用于从3D点云数据中识别并提取出位于物体边界上的点。这些边界…...

【Qt】QList<QVariantMap>中数据修改

1. 问题 QList<QVariantMap> 类型中&#xff0c;修改QVariantMap中的值。 2. 代码 //有效代码1QVariantMap itemMap itemList.at(0);itemMap.insert("title", "test");itemList.replace(0, itemMap);//有效代码 2itemList.operator [](0).insert(…...

如何避免vue的url中使用hash符号?

目录 1. 安装 Vue Router 2. 配置 Vue Router 使用 history 模式 3. 更新 main.js 4. 配置服务器以支持 history 模式&#xff08;此处需要仔细测试&#xff09; a. Nginx 配置 b. Apache 配置 5. 部署并测试 总结 在 Vue.js 项目中&#xff0c;避免 URL 中出现 # 符号的…...

Java学习 - MySQL存储过程、函数和触发器练习实例

存储过程 存储过程是什么 存储过程是一组已经编译好的SQL语句存储过程优点有什么 安全 性能高 提高代码复用性创建存储过程的语法 DELIMITER $ # 不能加分号CREATE PROCEDURE 存储过程名(IN|OUT|INOUT 参数名 参数类型) BEGIN存储过程语句块 END;$DELIMITER ;创建一个无参的存储…...

【深度神经网络 (DNN)】

深度神经网络 (DNN) 深度神经网络 (DNN) 是机器学习领域中一种强大的工具&#xff0c;它由多层神经元组成&#xff0c;能够学习复杂的数据模式&#xff0c;解决各种任务&#xff0c;如图像识别、语音识别、自然语言处理等。 DNN 的构成&#xff1a; 神经元: DNN 的基本单元&…...

ES全文检索支持繁简和IK分词检索

ES全文检索支持繁简和IK分词检索 1. 前言2. 引入繁简转换插件analysis-stconvert2.1 下载已有作者编译后的包文件2.2 下载源码进行编译2.3 复制解压插件到es安装目录的plugins文件夹下 3. 引入ik分词器插件3.1 已有作者编译后的包文件3.2 只有源代码的版本3.3 安装ik分词插件 4…...

解决Visual Studio Code在Ubuntu上崩溃的问题

解决Visual Studio Code在Ubuntu上崩溃的问题 我正在使用Ubuntu系统&#xff0c;每次打开Visual Studio Code时&#xff0c;只能短暂打开一秒钟&#xff0c;然后就会崩溃。当通过终端使用code --verbose命令启动Visual Studio Code时&#xff0c;出现以下错误信息&#xff1a;…...

【OpenGauss源码学习 —— (ALTER TABLE(SET attribute_option))】

ALTER TABLE&#xff08;SET attribute_option&#xff09; ATExecSetOptions 函数 声明&#xff1a;本文的部分内容参考了他人的文章。在编写过程中&#xff0c;我们尊重他人的知识产权和学术成果&#xff0c;力求遵循合理使用原则&#xff0c;并在适用的情况下注明引用来源。…...

Elasticsearch 数据提取 - 最适合这项工作的工具是什么?

作者&#xff1a;来自 Elastic Josh Asres 了解在 Elasticsearch 中为你的搜索用例提取数据的所有不同方式。 对于搜索用例&#xff0c;高效采集和处理来自各种来源的数据的能力至关重要。无论你处理的是 SQL 数据库、CRM 还是任何自定义数据源&#xff0c;选择正确的数据采集…...

‘浔川画板v5.1’即将上线!——浔川python社

1 简介&#xff1a; 浔川画板是一款专业的数字绘画和漫画创作软件&#xff0c;它为艺术家和设计师提供了丰富的绘画工具、色彩管理功能以及易于使用的界面。用户可以使用浔川画板进行手绘风格的绘画、精细的素描、漫画分格、UI设计等多种创作。该软件支持多种笔刷和特效&#…...

RockChip Android12 System之Datetime

一:概述 本文将针对Android12 Settings二级菜单System中Date&time的UI修改进行说明。 二:Date&Time 1、Activity packages/apps/Settings/AndroidManifest.xml <activityandroid:name="Settings$DateTimeSettingsActivity"android:label="@stri…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...