电子/ NodeJS及其在setInterval /异步代码中的应用

Question

我正在开发一个电子应用程序，该应用程序每3秒使用电子api完成截图捕获，并将其写入给定的目标路径。我已经设置了一个独立的BrowserWindow，捕获代码在其中运行(参见下面的代码结构)一个setInterval()“循环”，但是每当捕获发生时，应用程序就会冻结一会儿。我认为这是对文件source.thumbnail.toPng()或writeScreenshot()方法的调用，ScreenCapturer.jshtml.js。

我建立了这个结构，好像这是我要走的路，但很明显，这不是。WebWorkers也帮不了我，因为我需要节点模块，如fs、path和desktopCapturer (来自电子)。

当间隔代码(如文件ScreenCapturer.jshtml.js中的代码)运行时(因为我认为呈现程序进程是独立的进程)，人们将如何在不阻塞主线程的情况下完成这种任务？

我的代码作为参考

main.js (主进程)

// all the imports and other
// will only show the import that matters
import ScreenCapturer from './lib/capture/ScreenCapturer';  

app.on('ready', () => {
   // Where I spawn my main UI
   mainWindow = new BrowserWindow({...});
   mainWindow.loadURL(...);
   // Other startup stuff

   // Hee comes the part where I call function to start capturing
   initCapture();
});

function initCapture() {
    const sc = new ScreenCapturer();
    sc.startTakingScreenshots();
}

ScreenCapturer.js (主进程使用的模块)

'use strict';

/* ******************************************************************** */
/* IMPORTS */
import { app, BrowserWindow, ipcMain } from 'electron';
import url from 'url';
import path from 'path';
/* VARIABLES */
let rendererWindow;
/*/********************************************************************///
/*///*/

/* ******************************************************************** */
/* SCREENCAPTURER */
export default class ScreenCapturer {
    constructor() {
        rendererWindow = new BrowserWindow({
            show: true, width: 400, height: 600,
            'node-integration': true,
            webPreferences: {
                webSecurity: false
            }
        });                        
        rendererWindow.on('close', () => {
            rendererWindow = null;
        });
    }

    startTakingScreenshots(interval) {
        rendererWindow.webContents.on('did-finish-load', () => {
            rendererWindow.openDevTools();
            rendererWindow.webContents.send('capture-screenshot', path.join('e:', 'temp'));
        }); 
        rendererWindow.loadURL(
            url.format({
                pathname: path.join(__dirname, 'ScreenCapturer.jshtml.html'),
                protocol: 'file:',
                slashes: true
            })
        );                       
    }    
}
/*/********************************************************************///
/*///*/

ScreenCapturer.jshtml.js (加载在呈现器浏览器窗口中的thml文件)

<html>
    <body>
        <script>require('./ScreenCapturer.jshtml.js')</script>
    </body>
</html>

ScreenCapturer.jshtml.js (从呈现程序进程中的html文件加载的js文件)

import { ipcRenderer, desktopCapturer, screen } from 'electron';
import path from 'path';
import fs from 'fs';
import moment from 'moment';
let mainSource;

function getMainSource(mainSource, desktopCapturer, screen, done) {
    if(mainSource === undefined) {
        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]);        
        });
    } else {
        done(mainSource);
    }
}
function writeScreenshot(png, filePath) {
    fs.writeFile(filePath, png, err => {        
        if (err) { console.log('Cannot write file:', err); }
        return;       
    });
}

ipcRenderer.on('capture-screenshot', (evt, targetPath) => {    
    setInterval(() => {          
        getMainSource(mainSource, desktopCapturer, screen, source => {
            const png = source.thumbnail.toPng();
            const filePath = path.join(targetPath, `${moment().format('yyyyMMdd_HHmmss')}.png`);
            writeScreenshot(png, filePath);
        });
    }, 3000);
});

Answer 1

我放弃了用电子传递的API。我建议使用desktop-screenshot package -> https://www.npmjs.com/package/desktop-screenshot。这对我来说是跨平台的(linux，mac，win)。Note on windows我们需要套餐，因为否则当用asar打包电子应用程序时，它将无法在desktop-screenshot中执行脚本。更多的信息，在危险包裹的网页。

下面是我的代码的大致工作方式，请不要复制/粘贴，因为它可能不适合您的解决方案！！但是，它可能会给出一个指示，说明您如何解决这个问题。

/* ******************************************************************** */
/* 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);
            }
        });
    }
}
/*/********************************************************************///