TNotes.electron

Appearance

to top

0049. desktopCapturer 简介 ​

  • desktopCapturer 是什么
  • desktopCapturer 的基本使用流程
  • desktopCapturer 这是主进程中的一个模块，是一个用于处理桌面视频流（你可以理解为就是你眼睛看到的显示屏上的画面数据）的 API。

1. 🔗 desktopCapturer 相关链接 ​

2. 📒 desktopCapturer 是什么 ​

  • Electron 的 desktopCapturer 模块允许开发者 捕获应用所运行的操作系统的屏幕或单独窗口的视频流。这个 API 是 专为在 Electron 应用中捕获屏幕视频或截图而设计的，非常适合开发需要 屏幕分享、视频录制或截图功能 的桌面应用。
  • desktopCapturer 可以捕获 整个屏幕 或 特定应用窗口 的媒体。开发者可以指定捕获特定的屏幕或窗口，甚至是 多个屏幕和窗口。捕获的结果是一个 视频流，可以用于录制视频或实时屏幕分享。desktopCapturer 可以用于视频流捕获，也可以 通过视频流帧获取截图。

3. 📒 desktopCapturer 的基本使用流程 ​

使用 desktopCapturer 模块通常包括以下步骤：

  1. 调用 desktopCapturer.getSources(options) 方法获取源
  • 在 options 可以指定捕获的类型 types（屏幕 screen 或窗口 window，types: ['window', 'screen']）。
  • 返回值是一个 Promise，类型为 Promise<DesktopCapturerSource[]>，其中 DesktopCapturerSource 表示捕获到的源列表。
  1. 从源列表 DesktopCapturerSource[] 中选择一个源
  • 你可以根据需求选择一个或多个捕获源。每个源都是一个对象，其中起作用的是 id 字段，它是一个 window 或者 screen 的唯一标识，如果你是首次接触的话，可能会觉得格式长得有些奇怪 —— window:XX:YY 或者 screen:ZZ:0，这玩意儿是需要在下一步调用 navigator.mediaDevices.getUserMedia() 时传入的参数之一。
  • 这里刻意强调 id 字段，是因为源对象里边还有一个容易混淆的 display_id 字段，在写的时候不要写混淆了。
js
const { BrowserWindow, desktopCapturer } = require('electron')

const mainWindow = new BrowserWindow()

desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
  for (const source of sources) {
    if (source.name === 'Electron') {
      mainWindow.webContents.send('SET_SOURCE', source.id)
      return
    }
  }
})
  1. 获取媒体流
  • 一旦选定了源，就可以使用标准的 Web 技术（如 navigator.mediaDevices.getUserMedia）来请求媒体流。
js
// prealod script...
const { desktopCapturer } = require('electron');

async function captureScreen() {
  // 请求屏幕类型的源
  const inputSources = await desktopCapturer.getSources({ types: ['screen'] });

  try {
    // 请求一个不包含音频的视频流
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: {
        mandatory: {
          chromeMediaSource: 'desktop',
          // 从返回的源列表中选择第一个源（通常代表当前屏幕）
          chromeMediaSourceId: inputSources[0].id
        }
      }
    });

    // 使用这个视频流
    // 该视频流可以用于进一步处理，如显示在页面上、录制或实时传输。
    // ……
  } catch (e) {
    console.error(e);
  }
}

captureScreen();