前言

公众号：【可乐前端】，期待关注交换，分享一些有意思的前端常识

录屏软件对于咱们来说都不生疏了，明天咱们要做的事件是实现本人的录屏软件。载体应用Electron，因为它更适宜录制桌面的场景。咱们明天实现的录屏软件会包含上面的性能

  • 分辨率调节
  • 帧率调节
  • 反对保留为webm、mp4、gif格局

本文用到的技术包含：

  • electron
  • ffmpeg
  • vite
  • antd

上面话不多说，咱们马上进入实战环节

环境搭建

我集体习惯的技术栈是React+Vite，所以这次搭建这个Electron脚手架的时候我也往这方面去搭建。搭建过程中发现了一个很好的脚手架工具——electron-vite。须要搭建Electron我的项目的兄弟们也能够思考用这个。性能还是非常弱小的，用起来非常难受，很多货色都预设好了

间接上面的一条命令就能够搭建一个根底框架：

npm create @quick-start/electron

搭建完框架之后，上面当初写一下简略的配置页面，因为咱们是配置录制的各种参数的。配置页面如下：

就是应用了antd下了几个下拉框，还是比较简单的。

这里写的是渲染过程的代码，所以咱们写在了renderer/src/App.jsx里。做Electron开发心里须要分明，这种页面相干的，就写在渲染过程里，跟咱们平时写web页面无异。

另外，咱们的配置必定是要长久化存储的，所以我会把这些配置存储在localStorage里。

  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版本给兼容了～

最初

至此，咱们就实现了本人的一个录屏小工具。如果你有一些其余的想法，欢送评论区一起交换，如果你感觉对你有用的话，点点关注点点赞吧～