闪念录屏工具 -跟随鼠标自动放大· Flash Recorder堪比Focusee的一款录屏工具完全开源且免费一款基于 Electron 的「点击即聚焦」丝滑局部放大录屏工具。点击屏幕任意位置或按下快捷键画面会以鼠标为中心平滑放大到 2x / 3x / 5x停留片刻后自动还原 —— 适合做教程演示、代码讲解、操作高亮类视频。使用链接https://download.csdn.net/download/YYMM999/93246548✨ 功能特性点击即聚焦屏幕任意位置点击鼠标左键即触发局部放大动画丝滑zoom-in → hold → zoom-out快捷键驱动CtrlShiftR开始/停止录制、CtrlShiftZ开关聚焦、CtrlShiftF手动聚焦全部可自定义双击触发支持 ScrollLock / F13-F24 等单键连按两次触发聚焦多录制源整屏 / 应用窗口 / 自定义框选区域自动过滤不可捕获的系统窗口尺寸预设4K / 2K / 1080p / 720p / 竖屏 / 正方形 / 自定义等比输出6 种光标造型箭头 / 圆点 / 圆环 / 光晕 / 十字准星 / 不绘制颜色尺寸可调5 种点击特效扩散圆环 / 粒子爆发 / 聚光灯 / 冲击波 / 脉冲圈导出格式MP4自动 WebM→MP4 转换/ H.264 WebM / VP9 / VP8快照 PNG / JPEG音画同录麦克风 系统声音可仅导出音频安全保存自动写入可写安全目录避开系统关键位置与「受控文件夹访问」保护目录 界面截图主界面主界面左侧为实时预览含光标与点击特效右侧为控制面板录制源 / 聚焦设置 / 光标样式 / 点击特效 / 音频 / 画质 / 导出 / 快捷键️ 架构设计三层结构遵循 Electron 安全最佳实践contextIsolation: true、nodeIntegration: false、CSP 白名单。zoom-recorder/ ├── main.js # 主进程窗口、桌面捕获源、IPC、ffmpeg 转换、保存目录管理 ├── preload.js # contextBridge 安全桥接仅暴露白名单 API ├── index.html # UI 结构预览区 控制面板 ├── renderer.js # 渲染逻辑源选择、预览、MediaRecorder 录制、UI 绑定 ├── zoom-engine.js # 缩放引擎canvas 双缓冲绘制、聚焦状态机、光标/特效 ├── styles.css # 深色主题样式 └── package.json # 依赖与 electron-builder 打包配置三层职责层职责主进程桌面源枚举与过滤、全局鼠标钩子uiohook-napi、全局快捷键、区域选择窗口、WebM→MP4 转换、可写保存目录探测preload通过contextBridge暴露window.api渲染层无法直接访问 Node / 文件系统渲染层getUserMedia桌面流 → 隐藏video作数据源 → canvas 逐帧绘制叠加光标与特效→MediaRecorder录制 核心技术点1. 局部放大引擎zoom-engine.js双画布隐藏sourceCanvas绘制原始捕获帧输出outputCanvas负责裁剪放大与叠加光标特效避免互相污染。三段式状态机zoomingIn → holding → zoomingOut → idle缩放倍数用指数平滑过渡实现「丝滑」感。色彩一致性两个 canvas 的2d上下文均显式指定{ alpha: false, colorSpace: srgb }与捕获流色彩空间对齐防止预乘 alpha 导致画面变淡。2. 触发方式全局点击 快捷键通过原生模块uiohook-napi注册全局鼠标钩子屏幕上任意位置点击都会推送坐标给渲染层触发聚焦全局快捷键用 ElectronglobalShortcut支持动态改键与双击单键连按两次ScrollLock。3. 屏幕源过滤用desktopCapturer.getSources枚举整屏与窗口源过滤掉DWM、输入法、Windows Shell Experience Host等不可捕获或无关的窗口避免用户选到无效源。4. 颜色管理踩坑整屏源「泛白」选择整屏源时画面明显泛白、窗口源正常。经WebCodecs采样捕获帧原始 YUV 元数据确认整屏源由 WGC 输出 BT.601 限幅 I420 帧Chromium 的 HDR/色彩管理链路会进行错误的 YUV→sRGB 转换。最终通过主进程命令行开关组合修复app.commandLine.appendSwitch(force-color-profile,srgb);app.commandLine.appendSwitch(disable-features,HDRCaptureMode,UseHDRTransferFunction,HDRVideoPlayback,VideoCaptureColorManagement,ColorProviderReduction,SkiaColorTransferFunctionReduction);app.commandLine.appendSwitch(force-fieldtrials,WebRTC-HDRVideo/Disabled/);关键坑不要关闭 GPU 硬件加速。软件解码路径的 YUV→RGB 系数不同反而会引入新的偏色。5. MP4 导出WebM 录制 ffmpeg 转换Electron 31 的MediaRecorder.isTypeSupported(video/mp4)返回falseChromium 未内置 MP4 封装。方案按用户选择的编码器录制 WebMVP9 / VP8 / H.264用户期望 MP4 时先落盘临时.webm再用系统ffmpeg转码ffmpeg-y-iinput.webm-c:vlibx264-presetmedium-crf23\-c:aaac-b:a128k-movflagsfaststart output.mp4转换失败自动回退保留 WebM不丢数据。6. 保存目录策略Windows「受控文件夹访问」实战用户曾遇到「没有权限在此位置保存」。排查结论dialog.showSaveDialog会记忆上次目录并忽略defaultPath双击启动时可能定位到system32等无权限目录Windows受控文件夹访问Controlled Folder Access保护「视频 / 文档 / 图片 / 下载」等已知文件夹非白名单应用写入直接返回EPERM且fs.accessSync探测不到该拦截。最终方案不弹保存对话框改用「实际写入探针」探测可写安全目录按序回退E:/F:/D: 盘的 FlashRecorder → 用户主目录 FlashRecorder → 主目录 → cwd/recordings → temp写入失败的目录记入failedDirs集合自动避开用户也可在设置里手动「更改保存位置」。7. 安全实践渲染层启用contextIsolation禁用nodeIntegration仅通过 preload 白名单 API 通信页面声明 CSPdefault-src self禁远程脚本与样式文件写入 / MP4 转换 / 显示所在目录等 IPC 均校验绝对路径且拒绝..穿越ffmpeg 以参数数组方式spawn无 shell 注入面。 运行与打包# 安装依赖自动重建 uiohook-napi 原生模块npminstall# 开发运行npmstart# 打包 Windows 便携版 exe输出到 dist/npmrun distnpm run dist生成dist/闪念录屏-2.0.0.exe单文件便携版双击即用无需安装。提示MP4 转换依赖系统 PATH 中的ffmpeg未安装时录制自动回退为 WebM。 开源协议MIT License