Electron UI BrowserWindow 冻结主 BrowserWindow

Question

代码参考：https://github.com/aredfox/screencapturer

问题描述： Here 是一个 electron 应用程序，带有一个“MainWindow”，其中包含一个“开始捕获”按钮。一旦单击它会向主进程触发一个事件，然后主进程会启动一个新的、单独的“BrowserWindow”对象，称为“captureWindow”，它自己的 capture.html 和 capture.js 相关联。在 capture.js 中，每三秒制作一次屏幕截图并将其保存到 c:\temp\screencap（这是一个演示应用程序来说明问题，因此我暂时没有对其进行配置和硬编码路径）。每次在“craptureWindow”中进行捕获时，它都会冻结，这是我所期望的。但是，“mainWindow”对象也冻结了，这是我没想到的。 我应该如何处理这个问题，以便在另一个“BrowserWindow”对象中运行进程时主窗口不会冻结？我假设电子 BrowserWindows（或“标签”）有一个单独的线程？

---

编辑 2016 年 12 月 20 日 可能的罪魁祸首是 desktopCapturer.getSources()。

附录：发现问题必须在 getMainSource 的代码块内，因为当我缓存该“源”结果时，它不会冻结整个电子。因此，一定是过滤方法或获取屏幕本身导致了冻结问题。

function getMainSource(desktopCapturer, screen, done) {
    const options = {
        types: ['screen'], thumbnailSize: screen.getPrimaryDisplay().workAreaSize
    }
    desktopCapturer.getSources(options, (err, sources) => {
        if (err) return console.log('Cannot capture screen: ', err)

        const isMainSource = source => source.name === 'Entire screen' || source.name === 'Screen 1'
        done(sources.filter(isMainSource)[0])
    })
}

虽然解决方案不是缓存 getMainSource（又名“源”）的结果，因为它当然每次都会产生相同的图像数据。我通过以 png 格式写入文件来验证这一点，实际上每个屏幕截图都是完全相同的，即使桌面上已经发生了足够多的变化。 TODO： 可能的选项是设置视频流并从流中保存图像？

Answer 1

如果您想跨平台捕获屏幕截图，我建议您使用以下方法，而不是依赖内置的电子 API。并不是说它们不好，而是它们不适合例如每三秒截屏一次。

对我来说，解决方案是 npm 模块 desktop-screenshot - 和一个名为 hazardous 的 npm 包，因为这是在 Windows 和 asar 执行时需要的。

我最终实现的代码是这样的 - 它可能是您的问题的灵感来源/示例。

/* ******************************************************************** */
/* MODULE IMPORTS */
import { remote, nativeImage } from 'electron';
import path from 'path';
import os from 'os';
import { exec } from 'child_process';
import moment from 'moment';
import screenshot from 'desktop-screenshot';
/* */
/*/********************************************************************///

/* ******************************************************************** */
/* CLASS */
export default class ScreenshotTaker {    
    constructor() {
        this.name = "ScreenshotTaker";        
    }

    start(cb) {
        const fileName = `cap_${moment().format('YYYYMMDD_HHmmss')}.png`;
        const destFolder = global.config.app('capture.screenshots');
        const outputPath = path.join(destFolder, fileName);        
        const platform = os.platform();
        if(platform === 'win32') {
            this.performWindowsCapture(cb, outputPath);
        }
        if(platform === 'darwin') {
            this.performMacOSCapture(cb, outputPath);
        }
        if(platform === 'linux') {
            this.performLinuxCapture(cb, outputPath);
        }
    }

    performLinuxCapture(cb, outputPath) {
        // debian
        exec(`import -window root "${outputPath}"`, (error, stdout, stderr) => {
            if(error) {
                cb(error, null, outputPath);
            } else {
                cb(null, stdout, outputPath);
            }
        });
    }
    performMacOSCapture(cb, outputPath) {
        this.performWindowsCapture(cb, outputPath);
    }
    performWindowsCapture(cb, outputPath) {
        require('hazardous');
        screenshot(outputPath, (err, complete) => {
            if(err) {
                cb(err, null, outputPath);
            } else {
                cb(null, complete, outputPath);
            }
        });
    }
}
/*/********************************************************************///