Electron - Acquisizione di audio e video
L'acquisizione di audio e video sono caratteristiche importanti se si creano app per la condivisione dello schermo, memo vocali e così via. Sono utili anche se è necessaria un'applicazione per acquisire l'immagine del profilo.
Useremo l' API getUserMedia HTML5 per acquisire flussi audio e video con Electron. Per prima cosa impostiamo il nostro processo principale inmain.js file come segue -
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)Ora che abbiamo impostato il nostro processo principale, creiamo il file HTML che catturerà questo contenuto. Crea un file chiamatoindex.html con il seguente contenuto -
<!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>Il programma sopra genererà il seguente output:
Ora hai lo streaming sia dalla tua webcam che dal tuo microfono. Puoi inviare questo flusso sulla rete o salvarlo nel formato che preferisci.
Dai un'occhiata alla documentazione MDN per acquisire immagini per ottenere le immagini dalla tua webcam e memorizzarle. Ciò è stato fatto utilizzando l' API getUserMedia HTML5 . È inoltre possibile acquisire il desktop dell'utente utilizzando il modulo desktopCapturer fornito con Electron. Vediamo ora un esempio di come ottenere lo stream dello schermo.
Usa lo stesso file main.js come sopra e modifica il file index.html per avere il seguente contenuto:
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)
}Abbiamo utilizzato il modulo desktopCapturer per ottenere le informazioni su ciascuna finestra aperta. Ora puoi catturare gli eventi di una specifica applicazione o dell'intero schermo a seconda del nome che passi a sopraif statement. Questo trasmetterà solo ciò che sta accadendo su quella schermata alla tua app.
Puoi fare riferimento a questa domanda StackOverflow per comprendere l'utilizzo in dettaglio.