使用 Electron 截取桌面截图

Question

我正在使用 Electron 创建一个 Windows 应用程序，该应用程序创建一个全屏透明覆盖窗口。该覆盖层的目的是：

1. 截取整个屏幕的屏幕截图（不是透明的覆盖层本身，而是屏幕“下方”），
2. 通过将图像作为字节流发送到我的 python 服务器来处理该图像，并且
3. 在覆盖层上画一些东西

我陷入了第一步，即屏幕截图捕获过程。

我尝试了选项 1，即使用capturePage()：

this.electronService.remote.getCurrentWindow().webContents.capturePage()
    .then((img: Electron.NativeImage) => { ... }

但这仅捕获我的覆盖窗口（而不是桌面屏幕）。这将是一张对我来说毫无用处的空白图像。

选项 2是使用desktopCapturer：

this.electronService.remote.desktopCapturer.getSources({types: ['screen']}).then(sources => {
    for (const source of sources) {
        if (source.name === 'Screen 1') {
            try {
                const mediaDevices = navigator.mediaDevices as any;
                mediaDevices.getUserMedia({
                    audio: false,
                    video: { // this specification is only available for Chrome -> Electron runs on Chromium browser
                        mandatory: {
                            chromeMediaSource: 'desktop',
                            chromeMediaSourceId: source.id,
                            minWidth: 1280,
                            maxWidth: 1280,
                            minHeight: 720,
                            maxHeight: 720
                        }
                    }
                }).then((stream: MediaStream) => { // stream.getVideoTracks()[0] contains the video track I need
                    this.handleStream(stream);
                });
            } catch (e) {
            }
        }
    }
});

下一步对我来说变得模糊。我该如何处理所获取的内容MediaStream以从屏幕截图中获取字节流？我看到很多如何在网页上显示此流的示例，但我希望将其发送到我的后端。这篇 StackOverflow 文章提到了如何做到这一点，但我没有让它正常工作。这就是我的实施方式handleStream()：

import * as MediaStreamRecorder from 'msr';

private handleStream(stream: MediaStream): void {
    recorder.stop()
    const recorder = new MediaStreamRecorder(stream);
    recorder.ondataavailable = (blob: Blob) => { // I immediately get a blob, while the linked SO page got an event and had to get a blob through event.data
        this.http.post<Result>('http://localhost:5050', blob);
    };

    // make data available event fire every one second
    recorder.start(1000);
}

blobPython 服务器不接受。检查内容后Blob，我怀疑这是一段视频。我用以下代码验证了这一点：

let url = URL.createObjectURL(blob);
window.open(url, '_blank')

这会在新窗口中打开 blob。它显示的视频可能只有半秒，但我想要一个静态图像。那么如何从中获取特定的快照呢？我也不确定简单地在 POST 正文中发送 Javascript blob 格式是否能让 Python 正确解释它。在 Java 中，它只需发送byte[]图像即可工作，因此我验证了 Python 服务器实现是否按预期工作。

除了使用之外的任何建议desktopCapturer也都可以。这个实现也捕获了我的鼠标，但我不想拥有它。我必须承认，我没想到这个功能实现起来如此困难。

Answer 1

以下是截取桌面屏幕截图的方法：

const { desktopCapturer } = require('electron')

document.getElementById('screenshot-button').addEventListener('click', () => { // The button which takes the screenshot
    desktopCapturer.getSources({ types: ['screen'] })
        .then( sources => {
            document.getElementById('screenshot-image').src = sources[0].thumbnail.toDataURL() // The image to display the screenshot
        })
})

使用“屏幕”将截取整个桌面的屏幕截图。使用“Windows”将仅截取应用程序的屏幕截图。

另请参阅这些文档：https ://www.electronjs.org/docs/api/desktop-capturer

Answer 2

desktopCapturer只拍摄视频。所以你需要从中获取一个帧。您可以使用 html5canvas来实现这一点。这是一个示例： https://ourcodeworld.com/articles/read/280/creating-screenshots-of-your-app-or-the-screen-in-electron-framework

或者，使用 npm 上提供的一些第三方屏幕截图库。我发现的需要在linux上安装ImageMagick，但也许还有更多，或者不需要支持linux。您需要在主电子进程中执行此操作，在该进程中您可以执行在节点中可以执行的任何操作。