Aller au contenu principal

desktopCapturer

Accède aux informations des sources de médias pouvant être utilisées pour capturer l'audio et la vidéo à partir du bureau en utilisant l'API navigator.mediaDevices.getUserMedia.

ProcessMain

L'exemple suivant montre comment faire pour capturer la vidéo à partir d'une fenêtre dont le titre est Electron :

// main.js
const { app, BrowserWindow, desktopCapturer, session } = require('electron')

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow()

  session.defaultSession.setDisplayMediaRequestHandler(
    (request, callback) => {
      desktopCapturer.getSources({ types: ['screen'] }).then(
        (sources) => {
          // Grant access to the first screen found.
          callback({ video: sources[0], audio: 'loopback' })
        },
        () => {
          // Deny the request if no sources could be retrieved, for example
          // when the user cancels the PipeWire picker on Linux.
          callback(null)
        }
      )
      // If true, use the system picker if available.
      // Note: this is currently experimental. If the system picker
      // is available, it will be used and the media request handler
      // will not be invoked.
    },
    { useSystemPicker: true }
  )

  mainWindow.loadFile('index.html')
})
// 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))
})

stopButton.addEventListener('click', () => {
  video.pause()
})
<!-- 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>

Voir la documentation de navigator.mediaDevices.getDisplayMediapour plus d'informations.

Note

navigator.mediaDevices.getDisplayMedia does not permit the use of deviceId for selection of a source - see specification.

Méthodes​

Le module desktopCapturer dispose des méthodes suivantes :

desktopCapturer.getSources(options)​

History
  • Objet options
    • types string[] - Un tableau de string qui répertorie les types de sources devant être capturées, les types disponibles pouvant être soit screen soit window.
    • thumbnailSize Size (facultatif) - Taille pour laquelle la miniature de la source de média doit être redimensionnée. La valeur par défaut est 150 x 150. Définissez la largeur ou la hauteur à 0 lorsque vous n'avez pas besoin de les vignettes. Cela permettra de gagner le temps de traitement nécessaire pour capturer le contenu de chaque fenêtre et écran.
    • fetchWindowIcons boolean (facultatif) - Définir à true pour activer la récupération des icônes de fenêtre. La valeur par défaut est faux. Lorsque false la propriété appIcon des sources retourne null. Même si une source a l'écran de type.

Returns Promise<DesktopCapturerSource[]> - Resolves with an array of DesktopCapturerSource objects, each DesktopCapturerSource represents a screen or an individual window that can be captured.

Note
  • Capturing audio requires NSAudioCaptureUsageDescription Info.plist key on macOS 14.2 Sonoma and higher - read more. * Capturing the screen contents requires user consent on macOS 10.15 Catalina or higher, which can detected by systemPreferences.getMediaAccessStatus.

Avertissements​

Linux​

desktopCapturer.getSources(options) only returns a single source on Linux when using Pipewire.

PipeWire supports a single capture for both screens and windows. If you request the window and screen type, the selected source will be returned as a window capture.

macOS versions 14.2 or higher​

NSAudioCaptureUsageDescription Info.plist key must be added in order for audio to be captured by desktopCapturer. If instead you are running Electron from another program like a terminal or IDE then that parent program must contain the Info.plist key.

This is in order to facilitate use of Apple's CoreAudio Tap API by Chromium, which is gated behind the "System Audio Recording" privacy permission. macOS attributes that permission to the responsible process, so when running unpackaged from a terminal or IDE it is the terminal or IDE that must be granted access.

[!WARNING] If the permission is missing or has been denied, desktopCapturer still produces an audio track, but it is created in the ended state and never delivers samples. No warning or error is surfaced to JavaScript.

Since Electron 39, Chromium uses the CoreAudio Tap API by default for system audio capture on macOS 14.2 and later. There is no automatic fallback to the older ScreenCaptureKit-based "Screen & System Audio Recording" path if tap creation fails, and as of Electron 45 the MacCatapLoopbackAudioForScreenShare feature flag that previously allowed opting back into it has been removed upstream and no longer has any effect.

macOS versions 12.7.6 or lower​

navigator.mediaDevices.getUserMedia does not work on macOS versions 12.7.6 and prior for audio capture due to a fundamental limitation whereby apps that want to access the system's audio require a signed kernel extension. Chromium, et par extension Electron, ne la fournissent pas. Only in macOS 13 and onwards does Apple provide APIs to capture desktop audio without the need for a signed kernel extension.

It is possible to circumvent this limitation by capturing system audio with another macOS app like BlackHole or Soundflower and passing it through a virtual audio input device. This virtual device can then be queried with navigator.mediaDevices.getUserMedia.