Electron录屏开发教程：集成ffmpeg实现多格式录制

前言

录屏软件在日常生活中十分常见，本文将指导如何基于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网页开发的逻辑一致。

此外，为确保配置信息的持久化存储，我们将设置数据保存在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版本以完善跨平台支持。

以上即为使用Electron自制录屏软件的详细内容，更多关于Electron录屏的资料请关注本站其它相关文章！

基于Electron与ffmpeg实现桌面录屏软件

前言