Building a Screen Recording Application with Electron, React, Vite, and FFmpeg

Screen‑recording software is familiar to most users, and this guide shows how to build a custom recorder using Electron , which is well‑suited for desktop capture scenarios. The application includes resolution adjustment, frame‑rate control, and the ability to save recordings as webm , mp4 , or gif .

The tech stack consists of electron , ffmpeg , vite , and antd . The author prefers a React+Vite setup and uses the electron‑vite starter to scaffold the project.

After running npm create @quick-start/electron a basic framework is generated. A simple configuration page is created with Ant Design dropdowns for resolution, frame‑rate, and output format, stored persistently in localStorage .

Configuration options are defined as JavaScript constants:

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 communication between the renderer and main processes is demonstrated. The renderer sends configuration data with window.electron.ipcRenderer.send(RECORD_EVNET.SET_CONFIG, options) , while the main process receives it via ipcMain.on . The reverse direction is also shown, where the main process sends an event to the renderer.

A system‑tray menu is added to start, stop, or quit the recorder, using Electron's Tray and Menu APIs. The tray icon is created from a native image and resized to 16×16 pixels.

To make the window draggable without a frame, the main process injects JavaScript into the renderer after the did‑finish‑load event, listening for mouse events and calling window.moveTo accordingly.

Recording functionality relies on ffmpeg-static to obtain a platform‑specific FFmpeg binary. The appropriate FFmpeg command is built based on the selected extension, frame‑rate, and resolution, then executed with spawn . Example commands for WebM, MP4, and GIF formats are provided, and the process is terminated by sending a SIGINT signal when the user clicks the tray's stop button.

The guide notes a limitation: the current implementation uses the avfoundation input on macOS, which does not work on Windows, and suggests adding Windows support in the future.

Overall, the article delivers a complete, step‑by‑step example of building a functional screen‑recording desktop app with Electron, covering UI, IPC, system tray, window dragging, and media encoding.