1. Demo 简介
是什么：ScreenKey Recorder 是一款基于 Python 本地后台服务 + Web 前端的屏幕录制工具，通过 pynput 实现全局鼠标键盘监听（浏览器失焦也能工作），经 WebSocket 实时推送给前端，在 Canvas 上合成屏幕画面 + 鼠标光标 + 点击涟漪 + 键盘字幕后录制为视频，支持一键导出 WebM 格式。
面向谁：编程教育工作者、软件产品经理、测试工程师、游戏 UP 主、在线培训讲师，以及所有需要制作操作演示视频的创作者。
主要功能：
| 功能 | 说明 |
|---|---|
| 全局键鼠捕获 | Python 后台服务实现，浏览器失焦也能正常捕获鼠标和键盘事件 |
| Canvas 合成录制 | 屏幕画面 + 鼠标光标 + 点击涟漪 + 键盘字幕全部合成到视频中 |
| 一键导出 | 录制完成后直接下载 WebM 格式视频，无需后期制作 |
2. Demo 创作思路
灵感来源：我在录制编程教学视频时，经常被学生问"老师你刚才按了什么键跳过去的？"，发现现有方案要么没有键鼠显示功能，要么需要安装复杂客户端，使用门槛很高。
想解决的问题：
-
传统录屏软件没有键鼠操作显示，观众不知道操作者点了哪里、按了什么键
-
有类似功能的软件都需要下载安装，部分还需要付费，使用门槛高
-
纯 Web 端方案在浏览器失焦后无法捕获全局键鼠事件，功能受限
-
录制后还需要后期软件叠加键鼠效果，流程繁琐
为什么做这个方向：选择 Python 后台服务 + WebSocket + Canvas 合成录制的方案，是因为：
-
pynput可以实现操作系统级别的全局键鼠监听，不受浏览器沙箱限制 -
WebSocket 提供低延迟的实时数据传输（~30fps）
-
Canvas 合成后直接录制，所有可视化效果直接烧录到视频，无需后期
-
完全本地运行，保护用户隐私
3. Demo 体验地址
ScreenKey Recorder.zip (18.5 KB)
请下载附件中的 screenkey-recorder.zip 压缩包，解压后用浏览器打开 index.html 即可体验。
使用步骤：
-
解压 ZIP 文件
-
安装依赖：
pip3 install pynput websockets -
运行服务：
python3 server.py -
用 Chrome/Edge/Firefox 打开 http://localhost:8765/index.html
-
点击"开始录制"按钮，选择要录制的屏幕/窗口/标签页
-
在录制过程中操作鼠标和键盘，观察可视化效果
-
点击"停止录制"，然后点击"下载视频"保存文件
4. TRAE 实践过程
CN.2030178013821866:d853b22ea0ab95139bd50fb0ef5b919d_6a4b1f3ec3fffe6d2f3b64b5.6a4df1683b02d60e2a97ccf3.6a4df168c8b5f8bc57dd2bf6:TRAE Work CN.1.0.0.2036.a796de05-4e8a-4ded-ae90-aca0d952a203.no_ppe.T(2026/7/8 14:46:38)
CN.2030178013821866:c52985f74d2bf0f80c9becafe9f0a161_6a4b1f3ec3fffe6d2f3b64b5.6a4dffeb5c8fc068eae1cdb0.6a4dffeb39d84f5b3c9d4e4a:TRAE Work CN.1.0.0.2036.a796de05-4e8a-4ded-ae90-aca0d952a203.no_ppe.T(2026/7/8 15:48:45)
CN.2030178013821866:a90dbc35d09e5e7b96022772b1aa9237_6a4b1f3ec3fffe6d2f3b64b5.6a4e01a25c8fc068eae1cdfb.6a4e01a1e88f1c6adcf0d0cf:TRAE Work CN.1.0.0.2036.a796de05-4e8a-4ded-ae90-aca0d952a203.no_ppe.T(2026/7/8 15:58:28)CN.2030178013821866:db6b723dd1151791a3e7b36476f0b3f8_6a4b1f3ec3fffe6d2f3b64b5.6a4e18b213228c3f2d09074d.6a4e18b2558b8c0b257342e5:TRAE Work CN.1.0.0.2036.a796de05-4e8a-4ded-ae90-aca0d952a203.no_ppe.T(2026/7/8 17:31:25)
