Electron - Capture audio et vidéo

La capture audio et vidéo sont des caractéristiques importantes si vous créez des applications pour le partage d'écran, des mémos vocaux, etc. Elles sont également utiles si vous avez besoin d'une application pour capturer l'image de profil.

Nous utiliserons l' API getUserMedia HTML5 pour capturer des flux audio et vidéo avec Electron. Commençons par mettre en place notre processus principal dans lemain.js fichier comme suit -

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

let win

// Set the path where recordings will be saved
app.setPath("userData", __dirname + "/saved_recordings")

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
}

app.on('ready', createWindow)

Maintenant que nous avons mis en place notre processus principal, créons le fichier HTML qui capturera ce contenu. Créez un fichier appeléindex.html avec le contenu suivant -

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Audio and Video</title>
   </head>
   
   <body>
      <video autoplay></video>
      <script type = "text/javascript">
         function errorCallback(e) {
            console.log('Error', e)
         }

         navigator.getUserMedia({video: true, audio: true}, (localMediaStream) => {
            var video = document.querySelector('video')
            video.src = window.URL.createObjectURL(localMediaStream)
            video.onloadedmetadata = (e) => {
               // Ready to go. Do some stuff.
            };
         }, errorCallback)
      </script>
   </body>
</html>

Le programme ci-dessus générera la sortie suivante -

Vous avez maintenant le flux de votre webcam et de votre microphone. Vous pouvez envoyer ce flux sur le réseau ou l'enregistrer dans un format que vous aimez.

Consultez la documentation MDN pour capturer des images pour obtenir les images de votre webcam et les stocker. Cela a été fait à l'aide de l' API HTML5 getUserMedia . Vous pouvez également capturer le bureau de l'utilisateur à l'aide du module desktopCapturer fourni avec Electron. Voyons maintenant un exemple de la façon d'obtenir le flux d'écran.

Utilisez le même fichier main.js que ci-dessus et modifiez le fichier index.html pour avoir le contenu suivant -

desktopCapturer.getSources({types: ['window', 'screen']}, (error, sources) => {
   if (error) throw error
   for (let i = 0; i < sources.length; ++i) {
      if (sources[i].name === 'Your Window Name here!') {
         navigator.webkitGetUserMedia({
            audio: false,
            video: {
               mandatory: {
                  chromeMediaSource: 'desktop',
                  chromeMediaSourceId: sources[i].id,
                  minWidth: 1280,
                  maxWidth: 1280,
                  minHeight: 720,
                  maxHeight: 720
               }
            }
         }, handleStream, handleError)
         return
      }
   }
})

function handleStream (stream) {
   document.querySelector('video').src = URL.createObjectURL(stream)
}

function handleError (e) {
   console.log(e)
}

Nous avons utilisé le module desktopCapturer pour obtenir les informations sur chaque fenêtre ouverte. Vous pouvez désormais capturer les événements d'une application spécifique ou de tout l'écran en fonction du nom que vous passez au dessusif statement. Cela diffusera uniquement ce qui se passe sur cet écran vers votre application.

Vous pouvez vous référer à cette question StackOverflow pour comprendre l'utilisation en détail.

↰ Previous page Next page ↱

Electron - Capture audio et vidéo

Tutoriel Electron

Ressources utiles électroniques