要求
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,