mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

docs: improve desktop capture example (#42957)

Browse source
This commit is contained in:
Shelley Vohr 2024-07-23 11:55:23 +02:00 committed by GitHub
parent daa8244cdf
commit 3c9d4452c6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 50 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
docs/api/desktop-capturer.md
View file

@ -9,80 +9,66 @@ The following example shows how to capture video from a desktop window whose
title is `Electron`: title is `Electron`:
```js ```js
// In the main process. // main.js
const { BrowserWindow, desktopCapturer } = require('electron') const { app, BrowserWindow, desktopCapturer, session } = require('electron')
const mainWindow = new BrowserWindow() app.whenReady().then(() => {
const mainWindow = new BrowserWindow()
desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => { session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
for (const source of sources) { desktopCapturer.getSources({ types: ['screen'] }).then((sources) => {
if (source.name === 'Electron') { // Grant access to the first screen found.
mainWindow.webContents.send('SET_SOURCE', source.id) callback({ video: sources[0], audio: 'loopback' })
return
}
}
})
```
```js @ts-nocheck
// In the preload script.
const { ipcRenderer } = require('electron')
ipcRenderer.on('SET_SOURCE', async (event, sourceId) => {
try {
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: sourceId,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720
}
}
}) })
handleStream(stream) })
} catch (e) {
handleError(e) mainWindow.loadFile('index.html')
}
}) })
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.
```js ```js
const constraints = { // renderer.js
audio: { const startButton = document.getElementById('startButton')
mandatory: { const stopButton = document.getElementById('stopButton')
chromeMediaSource: 'desktop' const video = document.querySelector('video')
}
}, startButton.addEventListener('click', () => {
navigator.mediaDevices.getDisplayMedia({
audio: true,
video: { video: {
mandatory: { width: 320,
chromeMediaSource: 'desktop' height: 240,
frameRate: 30
} }
} }).then(stream => {
} video.srcObject = stream
video.onloadedmetadata = (e) => video.play()
}).catch(e => console.log(e))
})
stopButton.addEventListener('click', () => {
video.pause()
})
``` ```
```html
<!-- index.html -->
<html>
<meta http-equiv="content-security-policy" content="script-src 'self' 'unsafe-inline'" />
<body>
<button id="startButton" class="button">Start</button>
<button id="stopButton" class="button">Stop</button>
<video width="320" height="240" autoplay></video>
<script src="renderer.js"></script>
</body>
</html>
```
See [`navigator.mediaDevices.getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) for more information.
**Note:** `navigator.mediaDevices.getDisplayMedia` does not permit the use of `deviceId` for
selection of a source - see [specification](https://w3c.github.io/mediacapture-screen-share/#constraints).
## Methods ## Methods
The `desktopCapturer` module has the following methods: The `desktopCapturer` module has the following methods: