9b29befdc8
Capturing window thmubnails is expensive as it actually uses the window capturer and it records one full frame per window and then downscale to the default size 150x150. When only interested in the window names or the app icons we do not need all of this. Underlying change is merged in chromium72 so this patch only modifies the doc, see: https://chromium.googlesource.com/chromium/src.git/+log/72.0.3626.52/chrome/browser/media/webrtc/native_desktop_media_list.cc Example: desktopCapturer.getSources({thumbnailSize: {width: 0, height: 0}}, ...) Also added a unit test in spec/api-desktop-capturer-spec.js that verifies that the returned thumbails are of type NativeImage and empty, when the user disable fetching thumbnails. notes: Can disable fetching the thumbnails for the DesktopCapturer. https://github.com/electron/electron/issues/14872
121 lines
4.4 KiB
Markdown
121 lines
4.4 KiB
Markdown
# desktopCapturer
|
|
|
|
> Access information about media sources that can be used to capture audio and
|
|
> video from the desktop using the [`navigator.mediaDevices.getUserMedia`] API.
|
|
|
|
Process: [Renderer](../glossary.md#renderer-process)
|
|
|
|
The following example shows how to capture video from a desktop window whose
|
|
title is `Electron`:
|
|
|
|
```javascript
|
|
// In the renderer process.
|
|
const { desktopCapturer } = require('electron')
|
|
|
|
desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
|
|
for (const source of sources) {
|
|
if (source.name === 'Electron') {
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
audio: false,
|
|
video: {
|
|
mandatory: {
|
|
chromeMediaSource: 'desktop',
|
|
chromeMediaSourceId: source.id,
|
|
minWidth: 1280,
|
|
maxWidth: 1280,
|
|
minHeight: 720,
|
|
maxHeight: 720
|
|
}
|
|
}
|
|
})
|
|
handleStream(stream)
|
|
} catch (e) {
|
|
handleError(e)
|
|
}
|
|
return
|
|
}
|
|
}
|
|
})
|
|
|
|
function handleStream (stream) {
|
|
const video = document.querySelector('video')
|
|
video.srcObject = stream
|
|
video.onloadedmetadata = (e) => video.play()
|
|
}
|
|
|
|
function handleError (e) {
|
|
console.log(e)
|
|
}
|
|
```
|
|
|
|
To capture video from a source provided by `desktopCapturer` the constraints
|
|
passed to [`navigator.mediaDevices.getUserMedia`] must include
|
|
`chromeMediaSource: 'desktop'`, and `audio: false`.
|
|
|
|
To capture both audio and video from the entire desktop the constraints passed
|
|
to [`navigator.mediaDevices.getUserMedia`] must include `chromeMediaSource: 'desktop'`,
|
|
for both `audio` and `video`, but should not include a `chromeMediaSourceId` constraint.
|
|
|
|
```javascript
|
|
const constraints = {
|
|
audio: {
|
|
mandatory: {
|
|
chromeMediaSource: 'desktop'
|
|
}
|
|
},
|
|
video: {
|
|
mandatory: {
|
|
chromeMediaSource: 'desktop'
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Methods
|
|
|
|
The `desktopCapturer` module has the following methods:
|
|
|
|
### `desktopCapturer.getSources(options, callback)`
|
|
|
|
* `options` Object
|
|
* `types` String[] - An array of Strings that lists the types of desktop sources
|
|
to be captured, available types are `screen` and `window`.
|
|
* `thumbnailSize` [Size](structures/size.md) (optional) - The size that the media source thumbnail
|
|
should be scaled to. Default is `150` x `150`. Set width or height to 0 when you do not need
|
|
the thumbnails. This will save the processing time required for capturing the content of each
|
|
window and screen.
|
|
* `fetchWindowIcons` Boolean (optional) - Set to true to enable fetching window icons. The default
|
|
value is false. When false the appIcon property of the sources return null. Same if a source has
|
|
the type screen.
|
|
* `callback` Function
|
|
* `error` Error
|
|
* `sources` [DesktopCapturerSource[]](structures/desktop-capturer-source.md)
|
|
|
|
Starts gathering information about all available desktop media sources,
|
|
and calls `callback(error, sources)` when finished.
|
|
|
|
`sources` is an array of [`DesktopCapturerSource`](structures/desktop-capturer-source.md)
|
|
objects, each `DesktopCapturerSource` represents a screen or an individual window that can be
|
|
captured.
|
|
|
|
[`navigator.mediaDevices.getUserMedia`]: https://developer.mozilla.org/en/docs/Web/API/MediaDevices/getUserMedia
|
|
|
|
**[Deprecated Soon](promisification.md)**
|
|
|
|
### `desktopCapturer.getSources(options)`
|
|
|
|
* `options` Object
|
|
* `types` String[] - An array of Strings that lists the types of desktop sources
|
|
to be captured, available types are `screen` and `window`.
|
|
* `thumbnailSize` [Size](structures/size.md) (optional) - The size that the media source thumbnail
|
|
should be scaled to. Default is `150` x `150`. Set width or height to 0 when you do not need
|
|
the thumbnails. This will save the processing time required for capturing the content of each
|
|
window and screen.
|
|
* `fetchWindowIcons` Boolean (optional) - Set to true to enable fetching window icons. The default
|
|
value is false. When false the appIcon property of the sources return null. Same if a source has
|
|
the type screen.
|
|
|
|
Returns `Promise<DesktopCapturerSource[]>` - Resolves with an array of [`DesktopCapturerSource`](structures/desktop-capturer-source.md) objects, each `DesktopCapturerSource` represents a screen or an individual window that can be captured.
|
|
|
|
[`navigator.mediaDevices.getUserMedia`]: https://developer.mozilla.org/en/docs/Web/API/MediaDevices/getUserMedia
|