区域录制，重新定义屏幕捕获：Electron 赋能录屏软件的进阶之旅

前端

2023-11-16 00:33:11

区域录制：提升您的屏幕录制体验

在上一篇文章中，我们探索了使用 Electron 框架构建一个简单的屏幕录制软件，实现了全屏录制的初级功能。然而，在实际应用中，我们经常需要录制屏幕的特定部分，例如特定的窗口、应用程序界面或网页区域。因此，区域录制 功能应运而生。

区域录制：深入了解

区域录制，顾名思义，就是录制屏幕上指定区域内的内容，而不是整个屏幕。这种录制方式的优势在于，它可以更精细地捕获想要的内容，避免录制不必要的部分，从而节省存储空间并提高录制效率。

在 Electron 中实现区域录制功能，主要涉及以下几个步骤：

1. 选择录制区域

用户需要选择要录制的屏幕区域。这可以通过使用 Electron 的 screen 模块获取屏幕尺寸和鼠标位置来实现。

2. 创建录制窗口

在选定录制区域后，需要创建一个新的窗口来承载录制内容。这个窗口的大小和位置应该与录制区域相同。

3. 开始和停止录制

当用户点击录制按钮时，需要启动录制进程。这可以通过使用 Electron 的 desktopCapturer 模块来实现。录制结束后，用户可以点击停止按钮停止录制。

4. 保存录制文件

当录制结束后，需要将录制的内容保存到本地文件中。这可以通过使用 Electron 的 fs 模块来实现。

代码实现：构建区域录制功能

为了更好地理解区域录制功能的实现过程，让我们以一个简单的 Electron 应用为例，一步一步地讲解代码细节。

初始化 Electron 应用程序

const { app, BrowserWindow, screen } = require('electron');

创建主窗口

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

获取屏幕尺寸和鼠标位置

const { width, height } = screen.getPrimaryDisplay().workAreaSize;

监听鼠标点击事件

mainWindow.on('mousedown', (event) => {
  // 记录鼠标点击的位置
  const { x, y } = event.screenPosition;

  // 计算录制区域的宽高
  const width = x2 - x1;
  const height = y2 - y1;

  // 创建录制窗口
  const recordWindow = new BrowserWindow({
    x: x1,
    y: y1,
    width: width,
    height: height,
    transparent: true,
    frame: false,
    alwaysOnTop: true
  });

  // 开始录制
  recordWindow.webContents.capturePage().then((image) => {
    // 保存录制文件
    const fs = require('fs');
    const path = require('path');
    const filePath = path.join(__dirname, 'recording.png');
    fs.writeFileSync(filePath, image.toPNG());
  });
});

停止录制

mainWindow.on('mouseup', (event) => {
  // 停止录制
  recordWindow.close();
});

扩展思考：打造更强大的区域录制功能

以上的代码实现了一个简单的区域录制功能，但我们还可以进一步扩展，使其更加强大和实用。例如，我们可以添加以下功能：

自定义录制区域： 允许用户自定义录制区域的大小和位置，并实时显示录制区域的边界。
录制控制按钮： 在录制窗口中添加录制控制按钮，以便用户可以方便地开始、暂停和停止录制。
录制文件保存选项： 允许用户选择录制文件的保存位置和格式。

这些功能的实现涉及到更多的代码细节，但基本原理与上述代码类似。

常见问题解答

1. 如何在录制过程中调整录制区域？

答：在使用鼠标选择录制区域时，您可以按住 Shift 键，然后拖动区域边界以调整其大小和位置。

2. 我可以在录制过程中添加注释或绘制形状吗？

答：默认情况下，Electron 不支持在录制过程中添加注释或绘制形状。但是，您可以使用第三方库或扩展程序来实现此功能。

3. 如何在录制过程中更改录制帧率？

答：您可以使用 Electron 的 desktopCapturer 模块来指定录制帧率。例如：

desktopCapturer.getSources({ types: ['screen'] }, (error, sources) => {
  if (error) throw error;

  const source = sources.find(source => source.name === 'Entire screen');

  navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: source.id,
        frameRate: 30
      }
    }
  });
});