🔴
Capture Screen Contents
There are a couple of steps you'll need to do if you want to use the Screen Capture API in your Desktop App.
Get the user's media access status
todesktop.systemPreferences.getMediaAccessStatus(
'screen'
);
This will return a
Promise
which will resolve to not-determined
, granted
, denied
, restricted
or unknown
On Windows and macOS 10.14 Mojave or lower the response will always be
granted
. macOS 10.15 Catalina or higher requires consent for screen
access. To get that consent just run the code below, it will automatically ask for permission
Say we wanted to get a user's screens and windows
const sources = await todesktop.desktopCapturer.getSources({
types: ["window", "screen"],
thumbnailSize: {
height: 720,
width: 1000,
},
});
This will return an array of sources
[
{
appIcon: null,
display_id: "",
id: "window:60230:0",
name: "Developer Tools - http://localhost:3000/",
thumbnail: "data:image/png;base64,iV..."
},
...
]
You'll need a way of choosing which screen/window to capture. Unlike in a browser, your Desktop app will need to implement its own UI for this.
For example if you wanted to reproduce a browsers selection feature you could loop through the sources and listen to
click
events on each.<div id="desktop-capturer-sources"></div>
<button id="get-sources">Get Sources</button>
<style>
#desktop-capturer-sources {
display: flex;
width: 60%;
height: 400px;
background-color: white;
box-shadow: #c4c4c4 2px 4px 5px 2px;
flex-wrap: wrap;
overflow: auto;
justify-content: center;
}
.desktop-source {
min-width: 30%;
padding: 1rem;
margin: 0.25rem;
}
.desktop-source > img {
width: 250px;
}
</style>
<script>
window.onload = () => {
document
.getElementById("get-sources")
.addEventListener("click", () => getSources());
};
const getSources = async () => {
const sources = await ...;
const container = document.getElementById("desktop-capturer-sources");
sources.forEach((source) => {
const el = document.createElement("div");
el.className = "desktop-source";
const img = document.createElement("img");
img.src = source.thumbnail;
el.appendChild(img);
// We'll create the getStream func later
el.addEventListener("click", () => getStream(source.id));
container.appendChild(el);
});
};
</script>
This will give you something like:

Getting Screens / Windows in Desktop App
After choosing a source we'll use its
id
and navigator.mediaDevices.getUserMedia
to get the stream.const getStream = async (id) => {
let stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: "desktop",
chromeMediaSourceId: id,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720,
},
},
});
}
If you have a
<video>
in your HTML
you can then useconst video = document.querySelector("video");
video.srcObject = stream;
video.onloadedmetadata = (e) => video.play();
Exposes the
destopCapturer.getSources
electron API: https://www.electronjs.org/docs/api/desktop-capturerAccepts an options object:
types
String[] - The types of desktop sources to be captured, eitherscreen
orwindow
.thumbnailSize
{width: number, height: number} (optional) - Default is150
x150
.fetchWindowIcons
Boolean (optional) - Default value isfalse
Returns a
Promise
which resolves into an array of DesktopCapturerSource
objects each having:id
String - The id of a window or screen that can be used as achromeMediaSourceId
latername
String - The name of the screen (Entire Screen
orScreen <index>
) or the window's titlethumbnail
String - A data Url of the imagedisplay_id
String - A unique identifier that will correspond to theid
propertyappIcon
String - A data Url of the app Icon ornull
if type is screen
Last modified 2yr ago