title: Electron UI BrowserWindow freezes main BrowserWindow
body: <p><strong>Code reference</strong>: <a href="https://github.com/aredfox/screencapturer" rel="nofollow noreferrer">https://github.com/aredfox/screencapturer</a></p>
  
  <p><strong>Problem description</strong>:
  <a href="https://github.com/aredfox/screencapturer" rel="nofollow noreferrer">Here</a> is an <a href="http://electron.atom.io" rel="nofollow noreferrer">electron</a> app with a "MainWindow" that holds a button "Start capture". Once clicked it fires an event to the main process, the main process then launches a new, seperate, "BrowserWindow" object called 'captureWindow' with it's own capture.html and capture.js associated. In capture.js, every three seconds a screenshot is made and saved to c:\temp\screencap (this is a demo app to illustrate a problem, thus I did not make this configurable and hard coded the path in for now). Every time a capture is made in the 'craptureWindow' it freezes, which I expected it to. But, the 'mainWindow' object freezes as well, which I did not expect it to do. <strong>How should I handle this, so thaty the mainWindow does not freeze when a process is being run in another "BrowserWindow" object? I assumed electron BrowserWindows (or "tabs") had a seperate thread?</strong></p>
  
  <hr>
  
  <p>EDIT 20/12/2016
  Possible culprit is desktopCapturer.getSources().</p>
  
  <p>ADDENDUM: Found that the issue must be inside the codeblock of <code>getMainSource</code>, because when I cache that "source" result it doesn't freeze the whole of electron. Thus it must be that the filter method or getting the screen itself is causing the issue of the freeze.</p>
  
  <pre><code>function getMainSource(desktopCapturer, screen, done) {
      const options = {
          types: ['screen'], thumbnailSize: screen.getPrimaryDisplay().workAreaSize
      }
      desktopCapturer.getSources(options, (err, sources) =&gt; {
          if (err) return console.log('Cannot capture screen: ', err)
  
          const isMainSource = source =&gt; source.name === 'Entire screen' || source.name === 'Screen 1'
          done(sources.filter(isMainSource)[0])
      })
  }
  </code></pre>
  
  <p>The solution though is not caching the result of getMainSource (aka the "source"), as it will result in the same image data each time of course. I verified that by writing to file as png, and indeed each screenshot then was the exact same, even though enough had changed on the desktop. <strong>TODO:</strong> Possible option is to setup a video stream and save an image from the stream?</p>