![BongoCat_Mac(一)_Electron如何监听鼠标键盘事件——ioHook BongoCat_Mac(一)_Electron如何监听鼠标键盘事件——ioHook](/img/no_img.png)
运行环境
macOS High Sierra系统 10.13.6 node v14.2.0 electron v8.0.0项目
http://gitee.com/xuanyusan/bongocat_for_mac关于BongoCat
Bongo Cat是一款用于装饰直播/视频/桌面的工具,它能根据鼠标、键盘、手柄操作做出相应的动作,具有高度的可定制性。 它是由一个越南的高中生开发的,github项目地址是这个链接。后来在B友的改动下有了更丰富的功能。其中晓辰XChen做的改动是我最喜欢,具体的效果大家可以看一下这个视频。
这个项目有Windows版和Unix版,但是没有macOS版,B友的改动也多是Windows。
我本来是想看看能不能直接把原项目的Unix版本在macOS上编出来,但是失败了。
libxdo这一块就编译不过去,
x11等模块编过了但是链接的时候会找不到库,怎么解决我暂时没有什么好的方法。
于是我放弃了原先的想法,打算自己使用
Electron+
Vue3来实现一下,这么做的主要灵感来源是 Electron-elf和 bongo.cat两个项目。
项目计划
在确定了计划的可行性后,我对项目做了简单的规划。这个项目我打算分三步做:
第一步实现macOS监听鼠标按键并传输信息到Electron窗口; 第二步实现自制贴图和动画,让鼠标按键信息可以控制动画播放; 第三步实现live2d,使得角色神态动作更自然丰富。macOS鼠标键盘监听实现方案
❌ 注册快捷键
能不能用注册快捷键来进行键盘监听是我一开始考虑的方法,但是注册快捷键的话存在劫持的问题。也就是会影响我们正常使用的输入、复制和粘贴等行为。
menu的
accelerator和
globalShortcut注册的快捷键都一样。所以这明显是不行的。
❌ HTML自身的一些监听
HTML自身的一些监听也是不能实现全局的鼠标键盘监听的,他们往往只能处理窗口内的鼠标键盘事件,我们又不可能把应用直接覆盖整个窗口。
ioHook
后来我转而考虑
ioHook这个模块,
ioHook是
Node.js进行全局鼠标键盘监听的模块。
但是我实际测试的时候发现
ioHook对版本的要求十分严格,在
Node v14.2.0+
ioHook 0.9.3+
NODE_MODULE_VERSION 83的情况下
ioHook的键盘监听是不成功的。只有
command和
shift是可以触发监听的。鼠标效果还可以。
好在本项目是用
Electron开发,
Electron 8.0.0+
ioHook 0.9.3+
NODE_MODULE_VERSION 76是可以触发监听的。接下来介绍一下ioHook的安装和使用。
ioHook的安装 和大多数
node模块一样,
ioHook可以通过
npm安装。
npm i ioHook -S # 由于Electron在打包的时候只拷贝dependencies的模块,所以这里要加一下-S参数
ioHook的重编译
ioHook安装的时候,会根据本地
Node的版本进行编译,也就是在
node_modules/iohook/builds目录下会生成类似
node-v83-darwin-x64的编译文件。如果没有,大概是网不好,编译所需文件没有下下来,因为我们本来就要重编译,这一次下不下来就无所谓了。
我们需要的是
electron-v76-darwin-x64这样的编译文件,也就是我们要的是
Electron运行环境下的编译产物,
NODE_MODULE_VERSION也要和
Electron的版本匹配。
而要获得符合要求的编译文件,首先得先找到当前
Electron对应的
NODE_MODULE_VERSION。 方法1.
node-abi
npm i node-abi -g node -e "const nodeABI = require('node-abi');console.log(nodeABI.getAbi('`electron --version`','electron'))"这样就可以获得符合
Electron版本对应的
NODE_MODULE_VERSION,比如我的
Electron是v8.0.0,
NODE_MODULE_VERSION就是76。 方法2. 查询
ioHook提供的支持信息 另外,不想在本地安装
node-abi的可以直接查
ioHook的配置文件(
node_modules/iohook/package.json)支持的对应关系,我这里贴出一部分。因为上文也提到
ioHook对版本支持很严格,所以看它文档里写的支持其实是更稳妥的选择。
"supportedTargets": [ // ...electron [ "electron", "11.0.0", "85" ], [ "electron", "12.0.0", "87" ], // ...node [ "node", "14.0.0", "83" ], [ "node", "15.0.0", "88" ] ]
拿到
NODE_MODULE_VERSION就可以在主项目的
package.json加入这个配置。这里是加在第一个层级,和scripts并列的地方。
"iohook": { "targets": [ "electron-76" /* 这里76是指我本地的NODE_MODULE_VERSION */ ] }
然后
npm rebuild就可以了,成功的话会在
node_modules/iohook/builds下会生成
electron开头的编译文件。没有就是网不好,好好检查一下网络问题以及自己的网络是否能访问
github。 一直不行的话,可以考虑改一下
ioHook模块下的安装文件(
node_modules/iohook/install.js)
<<<<<<< 源文件32行开始的内容 console.log('Downloading prebuild for platform:', currentPlatform); let downloadUrl = 'https://github.com/wilix-team/iohook/releases/download/v' + pkgVersion + '/' + currentPlatform + '.tar.gz'; ============ console.log('Downloading prebuild for platform:', currentPlatform); let downloadUrl = 'https://hub.fastgit.org/wilix-team/iohook/releases/download/v' + pkgVersion + '/' + currentPlatform + '.tar.gz'; >>>>>>>> 我的修改
重编译之后就可以在electron的运行环境里实验效果了。
macOS鼠标键盘监听实现效果
想要直接看效果的话可以下载我的项目,只支持Mac。Windows直接下Bongo cat mver就好了,也不用折腾,B站也有很多教程。
温馨提示: 我还没有做任何优化,特别是mousemove等高频事件没有做节流和防抖,所以试一下就好,不要长期运行。
git clone http://gitee.com/xuanyusan/bongocat_for_mac.git cd bongocat_for_mac npm install # 因为我已经在package.json配置好了,所以顺利的话不用rebuild,不顺利的话就参照教程改install.js文件吧 # 如果安装失败,记得rebuild一下 npm start
附录——ioHook与macOS pro 2017键盘对照表
考虑到ioHook监听获取的keycode和rawcode和js的keyCode差别较大,而且网上也没有其他的对照表,这里给出一份ioHook与macOS pro 2017的键盘对照表,其他操作系统是否可以使用需要自己测试一下。