chore: update ref to docs (🤖)

electron · Jul 23, 2024 · 765caaa · 765caaa
1 parent e9a2d77
commit 765caaa
Showing 1 changed file with 48 additions and 62 deletions.
diff --git 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
+<!-- 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>
+```
 
-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