電子UI BrowserWindow凍結主BrowserWindow

Question

代碼參考：https://github.com/aredfox/screencapturer

問題描述： Here爲electron應用程式，其保持按鈕 「開始捕獲」 一個 「主窗口」。一旦點擊了，它就向主進程發送一個事件，然後主進程啓動一個新的，獨立的，名爲「captureWindow」的「BrowserWindow」對象，並擁有自己的capture.html和capture.js。在capture.js中，每三秒製作一個屏幕截圖並保存到c：\ temp \ screencap（這是一個用於演示問題的演示應用程序，因此我暫時沒有對此進行配置和硬編碼）。每次在'craptureWindow'中捕獲都會凍結，這是我預期的結果。但是，'mainWindow'對象也凍結了，我沒有想到它會這樣做。 我應該如何處理這個問題，以便在另一個「BrowserWindow」對象中運行進程時，mainWindow不會凍結？我認爲電子BrowserWindows（或「標籤」）有一個單獨的線程？

---

EDIT 20/12/2016 可能是罪魁禍首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

如果你想跨平臺捕捉屏幕截圖，我會建議使用下面的方法，而不是依賴內置的electron-api。不是說他們不好，但他們不適合每隔三秒拍攝一些截圖。

我的解決方案是npm-module desktop-screenshot - 和一個名爲hazardous的npm軟件包，因爲這需要在Windows &上執行。

我最終實現的代碼就是這樣 - 它可能是您的問題的靈感/例子。

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