diff --git a/docs/api/desktop-capturer.md b/docs/api/desktop-capturer.md index 5eba3efaa157..f415e1481929 100644 --- a/docs/api/desktop-capturer.md +++ b/docs/api/desktop-capturer.md @@ -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 + + + +
+ + + + + + +``` + +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: