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.

Process: Main

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' })
    })
    // 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.

Remarque : navigator.mediaDevices.getDisplayMedia ne permet pas l’utilisation de deviceId pour la sélection d’une source - voir spécification.

Méthodes​

Le module desktopCapturer dispose des méthodes suivantes :

desktopCapturer.getSources(options)​

  • 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 the screen contents requires user consent on macOS 10.15 Catalina or higher, which can detected by systemPreferences.getMediaAccessStatus.

Avertissements​

navigator.mediaDevices. etUserMedia ne fonctionne pas sur macOS pour la capture audio en raison d'une limitation fondamentale par laquelle les applications qui veulent accéder à l'audio du système nécessitent une extension du noyau signée. Chromium, et par extension Electron, ne la fournissent pas.

Il est possible de contourner cette limitation en capturant le système audio avec une autre application macOS comme Soundflower et en le passant par un périphérique d'entrée audio virtuel. Ce périphérique virtuel peut ensuite être interrogé avec navigator.mediaDevices.getUserMedia.