如何在 MacOS 上的内容中显示电子应用程序窗口的 windowid答案

【问题标题】：How to display windowid of electron app window in its content on MacOS如何在 MacOS 上的内容中显示电子应用程序窗口的 windowid
【发布时间】：2021-07-24 13:36:37
【问题描述】：

我有一个最简单的电子应用程序 https://github.com/electron/electron-quick-start

当前显示Node.js、Chromium 和Electron 的版本。除了这个版本的详细信息，我想显示这个电子应用程序窗口的windowid，这样这个windowid 就可以用于 MacOS 上的窗口捕获。

我可以使用Quartz Window Services 找到windowid，但我想有办法只使用电子，因为电子正在创建浏览器窗口。

如何在电子本身中找到windowid？

【问题讨论】：

标签： node.js macos electron core-graphics

【解决方案1】：

const { desktopCapturer } = require('electron')

function getWindowId() {
  desktopCapturer.getSources({ types: ['window'] }).then(async sources => {
    for (const source of sources) {
      if (source.name === 'Hello World!') {
        return source.id.split(':')[1]
      }
    }
  })
}

参考：https://www.electronjs.org/docs/api/desktop-capturer

【讨论】：

【解决方案2】：

win.getMediaSourceId()

返回String - 以 DesktopCapturerSource 的 id 格式的窗口 id。例如“window:1324:0”。

更准确地说，格式是window:id:other_id，其中id 在Windows 上是HWND，在macOS 上是CGWindowID (uint64_t)，在Linux 上是Window (unsigned long)。 other_id 用于识别网页内容（标签），因此在同一个顶级窗口中。

例子：

// In the main process.
const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 600 })

// Load a remote URL
win.loadURL('https://github.com')

// Or load a local HTML file
win.loadURL(`file://${__dirname}/app/index.html`)

// Print window id
console.log('window id is', win.getMediaSourceId())

【讨论】：