共计 4882 个字符，预计需要花费 13 分钟才能阅读完成。
前言
公众号：【可乐前端】，期待关注交换，分享一些有意思的前端常识
录屏软件对于咱们来说都不生疏了，明天咱们要做的事件是实现本人的录屏软件。载体应用Electron，因为它更适宜录制桌面的场景。咱们明天实现的录屏软件会包含上面的性能
- 分辨率调节
- 帧率调节
- 反对保留为
webm、mp4、gif格局
本文用到的技术包含：
electronffmpegviteantd
上面话不多说，咱们马上进入实战环节
环境搭建
我集体习惯的技术栈是 React+Vite，所以这次搭建这个Electron 脚手架的时候我也往这方面去搭建。搭建过程中发现了一个很好的脚手架工具——electron-vite。须要搭建 Electron 我的项目的兄弟们也能够思考用这个。性能还是非常弱小的，用起来非常难受，很多货色都预设好了
间接上面的一条命令就能够搭建一个根底框架：
npm create @quick-start/electron搭建完框架之后，上面当初写一下简略的配置页面，因为咱们是配置录制的各种参数的。配置页面如下：
就是应用了 antd 下了几个下拉框，还是比较简单的。
这里写的是渲染过程的代码，所以咱们写在了 renderer/src/App.jsx 里。做 Electron 开发心里须要分明，这种页面相干的，就写在渲染过程里，跟咱们平时写 web 页面无异。
另外，咱们的配置必定是要长久化存储的，所以我会把这些配置存储在 l ocalStorage里。
useEffect(() => {
// 清晰度
setLocal(DEFINITION, definition)
}, [definition])
useEffect(() => {
// 帧率
setLocal(FRAME_RATE, frameRate)
}, [frameRate])
useEffect(() => {
// 产物拓展名
setLocal(EXT, ext)
}, [ext])以下是三个下拉框的选项配置，能够略微看一下，后续会作为参数应用到录屏性能中
const DEFINITION_LIST = [{ label: '超清', value: '3840x2160'},
{label: '高清', value: '1280x720'},
{label: '标清', value: '720x480'}
]
const FRAME_RATE_LIST = [{ label: '高', value: '60'},
{label: '中', value: '30'},
{label: '低', value: '15'}
]
const EXT_LIST = [{ label: 'webm', value: 'webm'},
{label: 'mp4', value: 'mp4'},
{label: 'gif', value: 'gif'}
]IPC 通信
在 Electron 中，包含渲染过程跟主过程。渲染过程就是咱们写的页面，主过程就是跟 Electron 窗体相干的，或者是须要调用一些 node 模块的逻辑。在主过程跟渲染过程是须要互相通信的，这里的通信形式就是IPC。
上面介绍两个例子，帮忙了解这两个过程如何通信
渲染过程发，主过程收
上面须要在主过程中实现录屏的性能，所以咱们页面的配置须要发送到主过程。那么就能够通过这种形式发送到主过程中。
// 渲染过程发送
useEffect(() => {
const options = {
definition,
frameRate,
ext
}
window.electron.ipcRenderer.send(RECORD_EVNET.SET_CONFIG, options)
}, [definition, frameRate, ext])
而主过程则能够通过上面的形式来接管
import {ipcMain} from 'electron'
let config = {}
ipcMain.on(RECORD_EVNET.SET_CONFIG, (e, data) => {config = data})主过程发，渲染过程收
上面介绍另外一种，主过程发送给渲染过程
// 主过程发送
const mainWindow = new BrowserWindow({
width: 900,
height: 670,
show: false,
// frame: false,
// autoHideMenuBar: true,
...(process.platform === 'linux' ? { icon} : {}),
webPreferences: {preload: join(__dirname, '../preload/index.js'),
sandbox: false
}
})
mainWindow.webContents.send('event-name', { name:'jayliang'})渲染过程接管
window.electron.ipcRenderer.on('event-name', callback)系统托盘
上面要实现的是系统托盘的性能，不便咱们在各个窗口的时候也能疾速唤起录屏以及进行录屏。
具体代码实现如下
import {
Menu,
Tray,
nativeImage,
} from 'electron'
let trayIcon = nativeImage.createFromPath(icon)
// 设置图标大小
trayIcon = trayIcon.resize({width: 16, height: 16})
const tray = new Tray(trayIcon)
const contextMenu = Menu.buildFromTemplate([
{
label: '开始',
type: 'normal',
click: startRecording
},
{
label: '进行',
type: 'normal',
click: stopRecording
},
{type: 'separator'},
{label: '退出', type: 'normal', role: 'quit'}
])
tray.setToolTip('你的利用名称')
tray.setContextMenu(contextMenu)可拖拽窗体
这个性能跟录屏软件无关，感觉这是一个很有意思的性能，就把它实现了哈哈哈。实现的办法也很简略，具体代码如下
mainWindow.webContents.on('did-finish-load', () => {
mainWindow.webContents.executeJavaScript(`
document.addEventListener('mousedown', (e) => {if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
window.isDragging = true;
offset = {x: e.screenX - window.screenX, y: e.screenY - window.screenY};
}
});
document.addEventListener('mousemove', (e) => {if (window.isDragging) {const { screenX, screenY} = e;
window.moveTo(screenX - offset.x, screenY - offset.y);
}
});
document.addEventListener('mouseup', () => {window.isDragging = false;});
`)
})下面是在主过程中监听渲染过程的加载实现事件，往渲染过程中注入了一段 javascript 代码。这段 js 代码次要做的事件也是监听鼠标事件，而后调用 moveTo 办法来挪动整个窗体。
实现录制
好的，后面啰嗦了那么多。终于到实现真正的录制性能的时候了。先装置一下 ffmpeg，这里应用的是ffmpeg-static 这个库，装置这个库的时候它会辨认你的操作系统，而后去装置编译好的 ffmpeg 二进制文件，最初导出的是一个 ffmpeg 的门路。
它外面用的下载链接可能会超时，所以能够设置一个镜像地址：
export FFMPEG_BINARIES_URL=https://cdn.npmmirror.com/binaries/ffmpeg-static打包的命令记得改一下，为的是装置不同操作系统的ffmpeg
"build:win": "rm -rf ./node_modules && npm run build && electron-builder --win --config",
"build:mac": "rm -rf ./node_modules && npm run build && electron-builder --mac --config",
"build:linux": "rm -rf ./node_modules && npm run build && electron-builder --linux --config"装置完之后就能够实现开始录制以及进行录制性能了，实现的代码如下：
import ffmpegPath from 'ffmpeg-static'
const startRecording = async () => {
let ffmpegCommand
const {ext, frameRate, definition} = config
const fileName = `${app.getPath('downloads')}/${+new Date()}.${ext}`
if (ext === 'webm') {ffmpegCommand = `${ffmpegPath} -f avfoundation -framerate ${frameRate} -video_size ${definition} -i "1" -c:v libvpx-vp9 -c:a libopus ${fileName}`
} else if (ext === 'mp4') {ffmpegCommand = `${ffmpegPath} -f avfoundation -framerate ${frameRate} -video_size ${definition} -i "1" -vsync vfr -c:v libx264 -preset ultrafast -qp 0 -c:a aac ${fileName}`
} else if (ext === 'gif') {ffmpegCommand = `${ffmpegPath} -f avfoundation -framerate ${frameRate} -video_size ${definition} -i "1" -vf "fps=15" -c:v gif ${fileName}`
}
ffmpegProcess = spawn(ffmpegCommand, { shell: true})
ffmpegProcess.stderr.on('data', (data) => {console.error(`FFmpeg Error: ${data}`)
})
ffmpegProcess.on('exit', (code, signal) => {console.log(`Recording process exited with code ${code} and signal ${signal}`)
})
}
const stopRecording = () => {if (ffmpegProcess) {ffmpegProcess.kill('SIGINT') // 发送中断信号进行录制
}
}解释一下下面的代码，ext是拓展名、frameRate是帧率、definition是分辨率，这些都是从渲染过程中获取的。
不同的录制产物对应不同的 ffmpeg 命令，开始录制时应用 spawn 开启一个子过程去调用 ffmpeg 录制，并保留子过程的饮用，在点击托盘的进行按钮时，向子过程发送进行命令。
这样咱们就能够欢快的录制屏幕，并保留为咱们想要的样子啦
以上还是存在有余：avfoundation是用在 mac 的采集库，在 Windows 下应该是用不了的，所以心愿后续有工夫也把 windows 版本给兼容了～
最初
至此，咱们就实现了本人的一个录屏小工具。如果你有一些其余的想法，欢送评论区一起交换，如果你感觉对你有用的话，点点关注点点赞吧～
