Electron - Captura de audio y video

La captura de audio y video son características importantes si está creando aplicaciones para compartir pantalla, notas de voz, etc. También son útiles si necesita una aplicación para capturar la imagen de perfil.

Usaremos la API de HTML5 getUserMedia para capturar transmisiones de audio y video con Electron. Primero configuremos nuestro proceso principal en elmain.js archivo de la siguiente manera:

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)

Ahora que hemos configurado nuestro proceso principal, creemos el archivo HTML que capturará este contenido. Crea un archivo llamadoindex.html con el siguiente contenido -

<!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>

El programa anterior generará la siguiente salida:

Ahora tiene la transmisión tanto de su cámara web como de su micrófono. Puede enviar esta transmisión a través de la red o guardarla en el formato que desee.

Eche un vistazo a la documentación de MDN para capturar imágenes para obtener las imágenes de su cámara web y almacenarlas. Esto se hizo utilizando la API getUserMedia de HTML5 . También puede capturar el escritorio del usuario utilizando el módulo desktopCapturer que viene con Electron. Veamos ahora un ejemplo de cómo obtener el flujo de pantalla.

Utilice el mismo archivo main.js que el anterior y edite el archivo index.html para que tenga el siguiente contenido:

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)
}

Hemos utilizado el módulo desktopCapturer para obtener la información sobre cada ventana abierta. Ahora puedes capturar los eventos de una aplicación específica o de toda la pantalla dependiendo del nombre que le pases a la anteriorif statement. Esto transmitirá solo lo que está sucediendo en esa pantalla a su aplicación.

Puede consultar esta pregunta de StackOverflow para comprender el uso en detalle.

↰ Previous page Next page ↱