Conoscere il linguaggio JavaScript, come è facile immaginare, richiede tanta, tanta pratica. Per poter padroneggiare al meglio uno dei linguaggi di programmazione più usati al mondo, un’idea molto valida è quella di sperimentarsi con esercizi o provando a realizzare concretamente qualcosa. In questo articolo, scopriremo insieme come creare un registratore schermo utilizzando JavaScript, creando un piccolo progetto per accrescere il tuo bagaglio da aspirante front-end developer!
Imparare JavaScript creando uno screen recorder
Ci addentreremo nella programmazione JavaScript attraverso questo breve esercizio che ti aiuterà a prendere confidenza con il linguaggio.
In JavaScript, possiamo utilizzare le interfacce MediaDevices e MediaRecorder per registrare lo schermo dell’utente. L’interfaccia MediaDevices chiede all’utente di selezionare e concedere l’autorizzazione per acquisire il contenuto di un display o di una parte dello schermo.
I dati acquisiti sono un MediaStream, che può essere registrato utilizzando l’interfaccia MediaRecorder dell’API MediaStream Recording.
Iniziamo creando il nostro file html.
html>
<head>
</head>
<body>
<button id ="start">Start</button>
<button id ="stop">Stop</button>
</body>
</html>
Procediamo, quindi, per step.
- Chiedere all’utente di selezionare la sorgente di ingresso
Possiamo utilizzare il metodo getDisplayMedia per chiedere agli utenti di selezionare lo schermo da registrare. Possiamo anche scegliere una scheda specifica del browser.
getDisplayMedia è un metodo asincrono che restituisce una promise.
- Creare un MediaRecorder per archiviare MediaStream
Il metodo getDisplayMedia restituirà un tipo stream. Lo utilizzeremo per creare un MediaRecoreder e registrare il video. Il MediaRecorder ha:
- Un metodo di avvio per avviare la registrazione del supporto.
- I dati trasmessi in streaming, ricevuti nell’evento dataavailable.
- Un metodo di arresto per interrompere la registrazione.
- Memorizzare la registrazione dello schermo una volta interrotta
Possiamo interrompere la registrazione con il metodo di arresto del MediaRecorder. Una volta interrotta la registrazione, riceviamo l’evento di stop sul MediaRecorder dove inviamo i Chunk registrati. Partiamo dall’oggetto di tipo RecordChunks.
let start = document.getElementById('start'),
stop = document.getElementById('stop'),
mediaRecorder;
start.addEventListener('click', async function(){
let stream = await recordScreen();
let mimeType = 'video/webm';
mediaRecorder = createRecorder(stream, mimeType);
let node = document.createElement("p");
node.textContent = "Started recording";
document.body.appendChild(node);
})
stop.addEventListener('click', function(){
mediaRecorder.stop();
let node = document.createElement("p");
node.textContent = "Stopped recording";
document.body.appendChild(node);
})
async function recordScreen() {
return await navigator.mediaDevices.getDisplayMedia({
audio: true,
video: { mediaSource: "screen"}
});
}
function createRecorder (stream, mimeType) {
// the stream data is stored in this array
let recordedChunks = [];
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = function (e) {
if (e.data.size > 0) {
recordedChunks.push(e.data);
}
};
mediaRecorder.onstop = function () {
saveFile(recordedChunks);
recordedChunks = [];
};
mediaRecorder.start(200); // For every 200ms the stream data will be stored in a separate chunk.
return mediaRecorder;
}
function saveFile(recordedChunks){
const blob = new Blob(recordedChunks, {
type: 'video/webm'
});
let filename = window.prompt('Enter file name'),
downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = `${filename}.webm`;
document.body.appendChild(downloadLink);
downloadLink.click();
URL.revokeObjectURL(blob); // clear from memory
Questo codice, che apparentemente appare complesso, in realtà può essere comodamente realizzato in poche righe. Programmare in JavaScript è anche questo! Se desideri mp4 o altri formati, dovrai convertirlo utilizzando le API o farlo da solo.
Questo articolo rappresenta un ottimo allenamento per tuffarti in modo più approfondito nel linguaggio JavaScript. Ma le risorse a disposizione per esplorare il linguaggio non sono finite: corri a leggere la nostra guida a Javascript in italiano!
Sei indeciso sul percorso? 💭
Parliamone! Scrivici su Whatsapp e risponderemo a tutte le tue domande per capire quale dei nostri corsi è il più adatto alle tue esigenze.
