diff --git a/docs/latest/api/desktop-capturer.md b/docs/latest/api/desktop-capturer.md
index bfd215c4..e256e61e 100644
--- a/docs/latest/api/desktop-capturer.md
+++ b/docs/latest/api/desktop-capturer.md
@@ -16,79 +16,65 @@ 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
- }
- }
+ session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
+ desktopCapturer.getSources({ types: ['screen'] }).then((sources) => {
+ // Grant access to the first screen found.
+ callback({ video: sources[0], audio: 'loopback' })
+ })
+ })
+
+ mainWindow.loadFile('index.html')
})
```
-```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)
- }
+```js
+// 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
+ }
+ }).then(stream => {
+ video.srcObject = stream
+ video.onloadedmetadata = (e) => video.play()
+ }).catch(e => console.log(e))
})
-function handleStream (stream) {
- const video = document.querySelector('video')
- video.srcObject = stream
- video.onloadedmetadata = (e) => video.play()
-}
-
-function handleError (e) {
- console.log(e)
-}
+stopButton.addEventListener('click', () => {
+ video.pause()
+})
```
-To capture video from a source provided by `desktopCapturer` the constraints
-passed to [`navigator.mediaDevices.getUserMedia`][] must include
-`chromeMediaSource: 'desktop'`, and `audio: false`.
+```html
+
+
+
+
+
+
+
+
+
+
+```
-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.
+See [`navigator.mediaDevices.getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) for more information.
-```js
-const constraints = {
- audio: {
- mandatory: {
- chromeMediaSource: 'desktop'
- }
- },
- video: {
- mandatory: {
- chromeMediaSource: 'desktop'
- }
- }
-}
-```
+**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