如何选择适合你的开源截图、录屏和录像的跨平台桌面软件框架？

2022-12-28 17:30:18

跨平台开源桌面软件的终极指南：截图、录屏和录像

摘要

身处数字时代，截图、录屏和录像已成为我们的日常工作流程不可或缺的一部分。如果你正在寻找一款功能强大且易于使用的跨平台桌面软件来满足这些需求，那么本文将为你提供全面指南。我们将探索使用 Electron、React、Vite 和 TypeScript 构建这样一款软件框架的步骤，并提供详细的代码示例供你参考。

Electron：跨平台桌面应用的基石

Electron 是一个流行的开源框架，它让开发者能够使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序。这意味着你可以编写一次代码，并在 Windows、macOS 和 Linux 上运行你的应用程序。Electron 提供了对操作系统底层功能的访问，例如文件系统、通知和菜单，这使得构建功能强大的桌面应用程序成为可能。

React：高效的用户界面开发

React 是一种流行的 JavaScript 库，用于构建交互式用户界面。它采用组件化的方法，使你能够轻松地创建和组合可重用的 UI 组件。React 的声明式编程风格简化了复杂的 UI 开发，使你能够专注于应用程序的逻辑而不用担心其视觉呈现。

Vite：现代构建工具

Vite 是一个现代的构建工具，可以显著加快开发和打包你的应用程序的速度。它使用内存中的构建，这消除了文件系统 I/O 并加快了构建过程。Vite 还提供热模块替换 (HMR)，允许你在保存更改时实时看到应用程序的更新。

TypeScript：提高代码质量

TypeScript 是 JavaScript 的一个超集，添加了可选的静态类型。这有助于提高代码的质量和可维护性，因为它可以及早发现类型错误，并通过自动完成功能增强开发体验。TypeScript 与 React 和 Electron 很好的集成，让你可以充分利用这些框架的功能。

构建软件框架

现在我们已经了解了构建块，让我们一步一步地了解如何构建我们的跨平台桌面软件框架：

安装 Electron、React、Vite 和 TypeScript： 通过终端或命令提示符运行以下命令：

npm install electron react react-dom vite typescript

创建新的 Electron 项目： 使用 Electron Forge CLI 运行以下命令：

electron-forge init my-app

安装 React 和 Vite： 在你的项目目录中运行以下命令：

npm install --save-dev react react-dom vite

配置 Vite： 创建一个 vite.config.js 文件并添加以下内容：

export default {
  build: {
    outDir: 'dist',
  },
  server: {
    port: 3000,
  },
};

创建你的第一个 React 组件： 创建一个 App.jsx 文件并添加以下内容：

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

export default App;

将你的 React 组件添加到 Electron 应用程序： 在 main.js 文件中，添加以下代码：

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadURL('http://localhost:3000');

  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow();
  }
});

运行你的应用程序： 使用以下命令运行你的应用程序：

electron .

添加截图、录屏和录像功能

现在我们已经建立了基本的软件框架，让我们添加截图、录屏和录像功能：

安装相关库：

截图： 安装 electron-screen-capture 库
录屏： 安装 electron-desktop-capturer 库
录像： 安装 electron-media-recorder 库

创建截图功能：

const screenshot = () => {
  const display = screen.getPrimaryDisplay();
  const bounds = display.bounds;

  const image = screen.capture({
    x: bounds.x,
    y: bounds.y,
    width: bounds.width,
    height: bounds.height,
  });

  // 将图片保存到文件
  image.saveToFile('screenshot.png');
};

创建录屏功能：

const startRecording = () => {
  // 获取所有屏幕源
  desktopCapturer.getSources({ types: ['screen'] }, (error, sources) => {
    if (error) throw error;

    // 选择第一个屏幕源
    const source = sources[0];

    // 创建 MediaRecorder 实例
    const recorder = new MediaRecorder(source.id);

    // 监听录制开始事件
    recorder.addEventListener('start', () => {
      // 将录制的视频流发送到主进程
      ipcRenderer.send('start-recording');
    });

    // 监听录制停止事件
    recorder.addEventListener('stop', () => {
      // 将录制的视频流发送到主进程
      ipcRenderer.send('stop-recording');
    });

    // 开始录制
    recorder.start();
  });
};

const stopRecording = () => {
  // 停止录制
  recorder.stop();
};

创建录像功能：

const startRecording = () => {
  // 创建新的 MediaRecorder 实例
  const recorder = new MediaRecorder(source.id);

  // 监听录制开始事件
  recorder.addEventListener('start', () => {
    // 显示录制状态
    dialog.showMessageBox({
      title: 'Recording',
      message: 'Recording in progress...',
    });
  });

  // 监听录制停止事件
  recorder.addEventListener('stop', () => {
    // 隐藏录制状态
    dialog.showMessageBox({
      title: 'Recording',
      message: 'Recording stopped.',
    });

    // 将录制的视频文件保存到磁盘
    const file = dialog.showSaveDialog({
      title: 'Save Video',
      filters: [{ name: 'Videos', extensions: ['mp4'] }],
    });

    if (file) {
      recorder.saveAs(file);
    }
  });

  // 开始录制
  recorder.start();
};