最近基于Electron开发了一个音视频应用,遇到了一些坑,特此记录下,希望可以帮助后续的同学。
Electron下载慢
安装electron
时会自动最新的Electron二进制文件,由于文件比较大还容易墙,所以我们可以先配置好环境变量,再运行yarn
或者npm install
1 | export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" |
ELECTRON_MIRROR
表示Electron
镜像地址,切换到国内淘宝源,速度会飞快
Electron 截图
Electron里面其实有专门的截屏函数capturePage, 但必须在主进程进行调用,可以在渲染进程通过remote模快来调用,如下所示:
1 | const takeScreenshot = ( savedFolderName = 'screenShoots' ) => { |
Electron 桌面分享
大家知道,在Google Chrome中可以调用MediaDevices.getDisplayMedia()来进行分享,不过很可惜, Electron
没法使用该方法,具体issues可以参考 getDisplayMedia with Chrome 72 throwing Not Allowed。不过Electron
中提供了desktopCapturer来获取桌面视频流,这样也可以进行屏幕共享。
为了保证代码兼容性,并且在Electron
进行屏幕分享,我们可以重写window.navigator.mediaDevices
方法,保证代码无缝迁移。代码放在preload.js
中即可。
1 | const { desktopCapturer } = require('electron') |
上面的例子只是进行全屏分享,如果想基于某个单独窗口分享,可以遍历desktopCapturer.getSources({ types: ['screen', 'window'] })
返回的数据,弹出窗口,用户选择后进行分享。
Electron 全屏
在网页中,我们可以通过requestFullscreen进入全屏,通过Document.exitFullscreen来退出全屏,不过在Electron,如果应用点击最大化按钮进入全屏后,上面的方法就失效了,我们可以在渲染进程中调用Electron的setFullScreen方法来控制全屏进入和退出 ,如下代码所示:
1 | const utils = { |
关闭应用
这个比较简单,直接调用Electron中的close方法即可。
1 | const close = () => { |
electron-builder 打包后,input输入框粘贴、剪切失效的问题
这个问题很奇怪,直接通过electron src/main/index.js
运行时不会存在该问题,但是通过 electron-builder 构建后会存在该问题。我的Mac上就存在该问题。
解决方案有两个,第一个方案是给应用增加菜单,比如网上的解决方案:
https://github.com/onmyway133/blog/issues/67
1 | const {app} = require('electron') |
因为我们Electron不需要菜单, 所以第一种方式不合适; 所以我换了一种方式,直接在document
中监听onkeydown
事件来手动处理,如下所示:
1 |
|
上面的代码处理了 CTRL + C
、CTRL + V
已经CTRL + X
三种情况,也就是复制、粘贴和剪切三种场景, 用到了HTMLInputElement.setRangeText()
这个函数,解决了在指定光标处复制、粘贴以及剪切等问题。大家感兴趣可以看看。
electron-webpack 构建问题
开发用到了electron-webpack 构建工具,由于我们渲染进程的代码(前端HTML、JavaScript等代码)是其它项目已经写好的,所以不需要进行渲染进程打包,可以在package.json
中关闭渲染进程打包。
1 | { |
既然关闭了渲染进程打包,那么我们已经写好的前端代码放在哪里呢?需要放在static
文件夹, 并且在主进程中可以这样访问:
1 | const mainWindow = new BrowserWindow({ |
通过electron-webpack
打包后,默认引入的第三方库都会默认设置为external
, 所以如果引入了第三方库, 需要改下package.json
, 增加whiteListedModules
配置项,这样webpack才会把第三方法代码一起打包压缩。
1 | "electronWebpack": { |
electron-webpack
打包会默认生成SourceMap
文件, 我们一般生产环境不需要SourceMap
,程序运行时还会报Uncaught Exception: Error: Cannot find module source-map-support/source-map-support.js
错误, 原因是electron-webpack
使用了BannerPlugin插件,默认会在打包后的文件中加入一句require("source-map-support/source-map-support.js").install()
。
我们可以修改electron-webpack
的配置文件来删除BannerPlugin
插件, 在package.json
中增加如下配置:
1 | "electronWebpack": { |
electron.config.js
内容如下所示:
1 |
|
这样就可以解决SourceMap
问题了。
MAC及Windows打包
打包主要使用 electron-builder来进行打包,我的package.json
配置如下:
1 |
|
运行yarn mac
和 yarn windows
就可以生成Mac上的dmg
和windows上的exe
文件。
值得说明的是, 在Mac上是没法直接对Windows环境进行打包的, 所以推荐使用docker来进行打包。安装好Docker
, 命令行进入工程目录,运行如下代码
1 | docker run --rm -ti \ |
进入以后,先运行yarn
, 再运行yarn windows
即可。