electron开发录屏客户端踩坑小结

2,331 阅读3分钟

 近期使用electron开发桌面录屏工具,过程中遇到一些坑点,记录一下,以供自己和他人参考。

一,录屏技术方案落地过程

1)web capture api,获取全屏没问题,但是截取部分屏幕无法实现 ——无法满足功能

2)aperture.js是基于swift,windows无法使用 ——不能跨平台

3)基于webassembly编译的 ffmpeg-asm.js ——性能太差

4)二进制ffmpeg包,——满足需求,mac,windows都支持,

二,坑点小结:

1,利用nsis脚本清理windows注册表中的url scheme

windows下app卸载后url scheme不会自动清除,要手动从注册表删除,否则会导致用户无法从接入方二次下载(因为未注销url scheme导致接入方逻辑判定当前为已安装状态)。

经查,nsis安装和卸载时也可以执行自定义脚本,官方用例中可以用shell命令,但是,当把命令行工具中验证有效的shell命令放入nsis脚本,无效。

又经过一番研究,原来nsis对操作注册表有专门的api(注册表操作在nsis不能用shell,其他很多命令,比如echo什么的可以用),传送门:nsis.sourceforge.io/FileAssoc 。调用api删除对应项目即可。

2,在url schem调起本地客户端时,用window.onblur + 时间戳判断用户是否已安装

url scheme调起app目前未发现相关事件或回调或api,但若是已注册的scheme,一定会有弹窗,window就会blur,再结合时间戳排除其他情况下的blur。未安装则页面静默。

由此,饶了个弯决了该问题,效果还是不错的。

3,Mac下实现安装后立即启动

electron中有往操作系统添加url scheme的api,前提是app至少运行一次,相关代码才会执行。由于Mac下dmg文件安装是类似拷贝文件的过程,所以无法在“安装结束”时做如何操作,比如立即运行。经查,发现打包为pkg文件可以在postinstall 添加shell脚本(传送门 www.electron.build/configurati… ),让app立即启动。如此实现了安装后立即启动。

4,解决pkg方式打包后无法自动更新

虽然pkg包通过添加shell脚本可以实现立即运行,但是又发现打包为pkg时自动更新失效。经查,electron builder官方文档表示自动更新Mac下只支持dmg格式(传送门 www.electron.build/auto-update ),无奈···

后来,仔细看了下pkg自动更新报错,发现是缺少app-update.yml描述文件,于是尝试在安装后的目录里用shell手动写入描述文件,自动更新恢复。有时候真需要想象力去解决问题,官方文档说不行也不一定不行,验证了一句古话:尽信书不如无书。

三,小结:客户端开发体会

•node api几乎都可用(操作本地文件等很方便)

•没有浏览器web开发的跨域限制,调用后端很友好

•可直接或间接调用底层api,开发潜力较大(比如录屏中借助二进制包ffmpeg,间接访问底层api实现较高自由度的屏幕录制)

•客户端开发让人又爱又恨,恨是因为这个探索的过程常常让人秒变小白,有时候出了问题不知从何查起。爱是因为可以将前端的边界拓展到更远,总的来说这是一件好事。