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、当录屏过程中,鼠标点击,镜头应该往点击处拉近,等一段时间还原 2、录屏过程中,可能会发生多次点击,但是点击位置偏差大,可能会导致缩放之后,画面没出来,因此需要移动镜头帧 …...
红队内网攻防渗透:内网渗透之内网对抗:信息收集篇自动项目本机导出外部打点域内通讯PillagerBloodHound
红队内网攻防渗透 1. 内网自动化信息收集1.1 本机凭据收集类1.1.1、HackBrowserData 快速获取浏览器的账户密码1.1.2、Searchall 快速搜索服务器中的有关敏感信息还有浏览器的账户密码1.1.3、Pillager 适用于后渗透期间的信息收集工具,可以收集目标机器上敏感信息1.2 对外打点…...

2024最新IDEA插件开发+发布全流程 SelectCamelWords[选中驼峰单词](idea源代码)
2024最新IDEA插件开发(发布)-SelectCamelWords[选中驼峰单词](idea源代码) 参考文档 Jetbrains Idea插件开发文档: https://plugins.jetbrains.com/docs/intellij/welcome.html代码地址: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 模型的标记化和预测步骤 想象这样⼀个世界:在这个世界里,你可以像和朋友聊天⼀样快速地与计算机交互。那会是怎样的体验?你可以创造出什么样的应用程序?这正是…...

【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:访问负索引示例2:访问超出上限的索引示例3:循环边界…...

【C++】一个极简但完整的C++程序
一、一个极简但完整的C程序 我们编写程序是为了解决问题和任务的。 1、任务: 某个书店将每本售出的图书的书名和出版社,输入到一个文件中,这些信息以书售出的时间顺序输入,每两周店主会手工计算每本书的销售量、以及每个出版社的…...
Lua迭代器详解(附加红点功能实例)
Lua迭代器详解与用法 1. 什么是迭代器2. 为什么需要理解迭代器的原理3. 迭代器的实现0. 闭包1. 有状态迭代器2. 无状态迭代器 4. 红点树系统基础 1. 什么是迭代器 迭代器是一种能让我们遍历一个集合中的所有元素的代码结构。比如常用ipairs()和pairs()。 2. 为什么需要理解迭代…...

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

PointCloudLib 点云边缘点提取 C++版本
0.实现效果 1.算法原理 PCL(Point Cloud Library)中获取点云边界的算法主要基于点云数据的几何特征和法向量信息。以下是对该算法的详细解释,按照清晰的格式进行归纳: 算法概述 PCL中的点云边界提取算法主要用于从3D点云数据中识别并提取出位于物体边界上的点。这些边界…...
【Qt】QList<QVariantMap>中数据修改
1. 问题 QList<QVariantMap> 类型中,修改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 模式(此处需要仔细测试) a. Nginx 配置 b. Apache 配置 5. 部署并测试 总结 在 Vue.js 项目中,避免 URL 中出现 # 符号的…...
Java学习 - MySQL存储过程、函数和触发器练习实例
存储过程 存储过程是什么 存储过程是一组已经编译好的SQL语句存储过程优点有什么 安全 性能高 提高代码复用性创建存储过程的语法 DELIMITER $ # 不能加分号CREATE PROCEDURE 存储过程名(IN|OUT|INOUT 参数名 参数类型) BEGIN存储过程语句块 END;$DELIMITER ;创建一个无参的存储…...
【深度神经网络 (DNN)】
深度神经网络 (DNN) 深度神经网络 (DNN) 是机器学习领域中一种强大的工具,它由多层神经元组成,能够学习复杂的数据模式,解决各种任务,如图像识别、语音识别、自然语言处理等。 DNN 的构成: 神经元: 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系统,每次打开Visual Studio Code时,只能短暂打开一秒钟,然后就会崩溃。当通过终端使用code --verbose命令启动Visual Studio Code时,出现以下错误信息:…...
【OpenGauss源码学习 —— (ALTER TABLE(SET attribute_option))】
ALTER TABLE(SET attribute_option) ATExecSetOptions 函数 声明:本文的部分内容参考了他人的文章。在编写过程中,我们尊重他人的知识产权和学术成果,力求遵循合理使用原则,并在适用的情况下注明引用来源。…...

Elasticsearch 数据提取 - 最适合这项工作的工具是什么?
作者:来自 Elastic Josh Asres 了解在 Elasticsearch 中为你的搜索用例提取数据的所有不同方式。 对于搜索用例,高效采集和处理来自各种来源的数据的能力至关重要。无论你处理的是 SQL 数据库、CRM 还是任何自定义数据源,选择正确的数据采集…...
‘浔川画板v5.1’即将上线!——浔川python社
1 简介: 浔川画板是一款专业的数字绘画和漫画创作软件,它为艺术家和设计师提供了丰富的绘画工具、色彩管理功能以及易于使用的界面。用户可以使用浔川画板进行手绘风格的绘画、精细的素描、漫画分格、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…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...

华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制
目录 节点的功能承载层(GATT/Adv)局限性: 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能,如 Configuration …...

DBLP数据库是什么?
DBLP(Digital Bibliography & Library Project)Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高,数据库文献更新速度很快,很好地反映了国际计算机科学学术研…...

【Veristand】Veristand环境安装教程-Linux RT / Windows
首先声明,此教程是针对Simulink编译模型并导入Veristand中编写的,同时需要注意的是老用户编译可能用的是Veristand Model Framework,那个是历史版本,且NI不会再维护,新版本编译支持为VeriStand Model Generation Suppo…...

恶补电源:1.电桥
一、元器件的选择 搜索并选择电桥,再multisim中选择FWB,就有各种型号的电桥: 电桥是用来干嘛的呢? 它是一个由四个二极管搭成的“桥梁”形状的电路,用来把交流电(AC)变成直流电(DC)。…...

篇章二 论坛系统——系统设计
目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...