harryi3t/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div>
      <h3>Take a Screenshot</h3>
      <i>Supports: Win, macOS, Linux <span>|</span> Process: Renderer</i>
       <div>
        <div>
          <div>
            <button id="screen-shot">View Demo</button>
            <span id="screenshot-path"></span>
          </div>
          <p>This demo uses the <code>desktopCapturer</code> module to gather screens in use and select the entire screen and take a snapshot of what is visible.</p>
          <p>Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.</p>
        </div>
    </div>
    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

## main.js
const { BrowserWindow, app } = require('electron')

let mainWindow = null

function createWindow () {
  const windowOptions = {
    width: 600,
    height: 300,
    title: 'Desktop Capturer',
    webPreferences: {
      nodeIntegration: true
    }
  }

  mainWindow = new BrowserWindow(windowOptions)
  mainWindow.loadFile('index.html')

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.on('ready', () => {
  createWindow()
})

## renderer.js
const {desktopCapturer} = require('electron')
const {screen, shell} = require('electron').remote

const fs = require('fs')
const os = require('os')
const path = require('path')

const screenshot = document.getElementById('screen-shot')
const screenshotMsg = document.getElementById('screenshot-path')

screenshot.addEventListener('click', (event) => {
  screenshotMsg.textContent = 'Gathering screens...'
  const thumbSize = determineScreenShotSize()
  let options = { types: ['screen'], thumbnailSize: thumbSize }

  desktopCapturer.getSources(options, (error, sources) => {
    if (error) return console.log(error)

    sources.forEach((source) => {
      const sourceName = source.name.toLowerCase()
      if (sourceName === 'entire screen' || sourceName === 'screen 1') {
        const screenshotPath = path.join(os.tmpdir(), 'screenshot.png')

        fs.writeFile(screenshotPath, source.thumbnail.toPNG(), (error) => {
          if (error) return console.log(error)
          shell.openExternal(`file://${screenshotPath}`)

          const message = `Saved screenshot to: ${screenshotPath}`
          screenshotMsg.textContent = message
        })
      }
    })
  })
})

function determineScreenShotSize () {
  const screenSize = screen.getPrimaryDisplay().workAreaSize
  const maxDimension = Math.max(screenSize.width, screenSize.height)
  return {
    width: maxDimension * window.devicePixelRatio,
    height: maxDimension * window.devicePixelRatio
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	</head>
	<body>
	<div>
	<h3>Take a Screenshot</h3>
	<i>Supports: Win, macOS, Linux <span>\|</span> Process: Renderer</i>
	<div>
	<div>
	<div>
	<button id="screen-shot">View Demo</button>
	<span id="screenshot-path"></span>
	</div>
	<p>This demo uses the <code>desktopCapturer</code> module to gather screens in use and select the entire screen and take a snapshot of what is visible.</p>
	<p>Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.</p>
	</div>
	</div>
	<script>
	// You can also require other files to run in this process
	require('./renderer.js')
	</script>
	</body>
	</html>
	const { BrowserWindow, app } = require('electron')

	let mainWindow = null

	function createWindow () {
	const windowOptions = {
	width: 600,
	height: 300,
	title: 'Desktop Capturer',
	webPreferences: {
	nodeIntegration: true
	}
	}

	mainWindow = new BrowserWindow(windowOptions)
	mainWindow.loadFile('index.html')

	mainWindow.on('closed', () => {
	mainWindow = null
	})
	}

	app.on('ready', () => {
	createWindow()
	})
	const {desktopCapturer} = require('electron')
	const {screen, shell} = require('electron').remote

	const fs = require('fs')
	const os = require('os')
	const path = require('path')

	const screenshot = document.getElementById('screen-shot')
	const screenshotMsg = document.getElementById('screenshot-path')

	screenshot.addEventListener('click', (event) => {
	screenshotMsg.textContent = 'Gathering screens...'
	const thumbSize = determineScreenShotSize()
	let options = { types: ['screen'], thumbnailSize: thumbSize }

	desktopCapturer.getSources(options, (error, sources) => {
	if (error) return console.log(error)

	sources.forEach((source) => {
	const sourceName = source.name.toLowerCase()
	if (sourceName === 'entire screen' \|\| sourceName === 'screen 1') {
	const screenshotPath = path.join(os.tmpdir(), 'screenshot.png')

	fs.writeFile(screenshotPath, source.thumbnail.toPNG(), (error) => {
	if (error) return console.log(error)
	shell.openExternal(`file://${screenshotPath}`)

	const message = `Saved screenshot to: ${screenshotPath}`
	screenshotMsg.textContent = message
	})
	}
	})
	})
	})

	function determineScreenShotSize () {
	const screenSize = screen.getPrimaryDisplay().workAreaSize
	const maxDimension = Math.max(screenSize.width, screenSize.height)
	return {
	width: maxDimension * window.devicePixelRatio,
	height: maxDimension * window.devicePixelRatio
	}
	}