mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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

114
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`:
```js
// In the main process.
const { BrowserWindow, desktopCapturer } = require('electron')
// main.js
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 => {
for (const source of sources) {
if (source.name === 'Electron') {
mainWindow.webContents.send('SET_SOURCE', source.id)
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
}
}
session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
desktopCapturer.getSources({ types: ['screen'] }).then((sources) => {
// Grant access to the first screen found.
callback({ video: sources[0], audio: 'loopback' })
})
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
const constraints = {
audio: {
mandatory: {
chromeMediaSource: 'desktop'
// renderer.js
const startButton = document.getElementById('startButton')
const stopButton = document.getElementById('stopButton')
const video = document.querySelector('video')
startButton.addEventListener('click', () => {
navigator.mediaDevices.getDisplayMedia({
audio: true,
video: {
width: 320,
height: 240,
frameRate: 30
}
},
video: {
mandatory: {
chromeMediaSource: 'desktop'
}
}
}
}).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
The `desktopCapturer` module has the following methods: