Skip to content

Commit 7237f69

Browse files
zekezeke
committed
Merge pull request electron#139 from electron/desktop-capture
Add Desktop Capture Demo
2 parents 8ac7fa1 + f6d1503 commit 7237f69

File tree

4 files changed

+84
-1
lines changed

4 files changed

+84
-1
lines changed

‎index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
<link rel="import" href="sections/system/app-sys-information.html">
2626
<link rel="import" href="sections/system/clipboard.html">
2727
<link rel="import" href="sections/printing/pdf.html">
28+
<link rel="import" href="sections/printing/desktop-capturer.html">
2829
</head>
2930
<body>
3031

@@ -82,6 +83,7 @@ <h5 class="nav-category">
8283
Printing
8384
</h5>
8485
<button type="button" id="button-pdf" data-section="pdf" class="nav-button"><em>Print</em> to PDF</button>
86+
<button type="button" id="button-desktop-capturer" data-section="desktop-capturer" class="nav-button">Take a <em>Screenshot</em></button>
8587
</div>
8688

8789
<footer class="nav-footer">

‎renderer-process/printing/desktop-capturer.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const electron = require('electron')
2+
const desktopCapturer = electron.desktopCapturer
3+
const electronScreen = electron.screen
4+
const shell = electron.shell
5+
6+
const fs = require('fs')
7+
const os = require('os')
8+
const path = require('path')
9+
10+
const screenshot = document.getElementById('screen-shot')
11+
const screenshotMsg = document.getElementById('screenshot-path')
12+
13+
screenshot.addEventListener('click', function (event) {
14+
screenshotMsg.textContent = 'Gathering screens...'
15+
const thumbSize = determineScreenShotSize()
16+
let options = { types: ['screen'], thumbnailSize: thumbSize }
17+
18+
desktopCapturer.getSources(options, function (error, sources) {
19+
if (error) return console.log(error)
20+
21+
sources.forEach(function (source) {
22+
if (source.name === 'Entire screen' || source.name === 'Screen 1') {
23+
var screenshotPath = path.join(os.tmpdir(), 'screenshot.png')
24+
25+
fs.writeFile(screenshotPath, source.thumbnail.toPng(), function (error) {
26+
if (error) return console.log(error)
27+
shell.openItem(screenshotPath)
28+
var message = 'Saved screenshot to: ' + screenshotPath
29+
screenshotMsg.textContent = message
30+
})
31+
}
32+
})
33+
})
34+
})
35+
36+
function determineScreenShotSize () {
37+
var screenSize = electronScreen.getPrimaryDisplay().workAreaSize
38+
var maxDimension = Math.max(screenSize.width, screenSize.height)
39+
return {
40+
width: maxDimension * window.devicePixelRatio,
41+
height: maxDimension * window.devicePixelRatio
42+
}
43+
}

‎renderer-process/printing/pdf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@ printPDFBtn.addEventListener('click', function (event) {
77
})
88

99
ipc.on('wrote-pdf', function (event, path) {
10-
var message = 'Wrote PDF to: ~' + path
10+
var message = 'Wrote PDF to: ' + path
1111
document.getElementById('pdf-path').innerHTML = message
1212
})

‎sections/printing/desktop-capturer.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template class="task-template">
2+
<section id="desktop-capturer-section" class="section js-section u-category-printing">
3+
<header class="section-header">
4+
<div class="section-wrapper">
5+
<h1>
6+
<svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-printing"></use></svg>
7+
Take a screenshot
8+
</h1>
9+
<h3>The <code>desktopCapturer</code> module in Electron can be used to access any media, such as audio, video, screen and window, that is available through the <code>getUserMedia</code> web API in Chromium.</h3>
10+
11+
<p>Open the <a class="u-exlink" href="hhttp://electron.atom.io/docs/v0.37.5/api/desktop-capturer">full API documentation</a> in your browser.</p>
12+
</div>
13+
</header>
14+
15+
<div class="demo">
16+
<div class="demo-wrapper">
17+
<button id="print-pdf-demo-toggle" class="js-container-target demo-toggle-button">Take a Screenshot
18+
<div class="demo-meta u-avoid-clicks">Supports: Win, OS X, Linux</div>
19+
</button>
20+
<div class="demo-box">
21+
<div class="demo-controls">
22+
<button class="demo-button" id="screen-shot">View Demo</button>
23+
<span class="demo-response" id="screenshot-path"></span>
24+
</div>
25+
<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>
26+
<p>Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.</p>
27+
<h5>Renderer Process</h5>
28+
<pre><code data-path="renderer-process/printing/desktop-capturer.js"></pre></code>
29+
</div>
30+
</div>
31+
</div>
32+
33+
<script type="text/javascript">
34+
require('./renderer-process/printing/desktop-capturer')
35+
</script>
36+
37+
</section>
38+
</tempalte>

0 commit comments

Comments
 (0)