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 = 0
	while (i < evenFrames.length - 1) {
		const { time, type, use, x, y } = evenFrames[i]
		const sec = Math.floor((time - startTime) / 1000)
		let lastx = x
		let lasty = y
		if (type === 'mousedown' && !use) {
			const item = {
				...evenFrames[i],
				start: sec,
				end: sec,
				children: [],
			}
			evenFrames[i].use = true
			for (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 = sec0
					continue
				}
				if (type1 === 'mousedown' && !use1) {
					if (sec0 - item.end > MOUSE_DOWN_MAX_SEC) {
						i = j - 1
						break
					} else {
						evenFrames[j].use = true
						evenFrames[j].start = sec0
						evenFrames[j].t = sec0 - item.end
						item.end = sec0
						const { 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 = x1
							lasty = y1
						}
					}
				}
			}
			item.end = item.end + EFFECT_TIME
			item.t = item.end - item.start
			cutFrames.push(item)
		}
		i = i + 1
	}
	return cutFrames;
}
相关推荐
可观测性用观测云3 分钟前
前端错误可观测最佳实践
前端
恋猫de小郭4 分钟前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
一枚前端小能手25 分钟前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码25 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
Cyan_RA931 分钟前
计算机网络面试题 — TCP连接如何确保可靠性?
前端·后端·面试
谢尔登31 分钟前
【CSS】层叠上下文和z-index
前端·css
鹏多多33 分钟前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
AryaNimbus35 分钟前
你不知道的 Cursor系列(三):再也不用死记硬背 Linux 命令,终端 Cmd+K 来帮你!
前端·ai编程·cursor
uhakadotcom36 分钟前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
Mintopia42 分钟前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc