La cattura dello schermo è una potente funzionalità spesso utilizzata in applicazioni di screen recording, piattaforme di live streaming e app di videoconferenza. Javascript offre API moderne, come il metodo getDisplayMedia(), per catturare i contenuti dello schermo.
Le API di cattura dello schermo, disponibili tramite l’oggetto navigator.mediaDevices, forniscono alle applicazioni web l’accesso allo schermo, alla finestra o alla scheda del browser dell’utente. Restituiscono un oggetto MediaStream, che può essere visualizzato in un elemento tag <video>.
Come visto in precedenza, il metodo principale è getDisplayMedia(), progettato specificamente per catturare il contenuto dello schermo. Tale metodo richiede l’autorizzazione esplicita dell’utente, garantendo il rispetto della privacy.
Esiste inoltre anche un altro metodo, chiamato getUserMedia(), utilizzato specificamente per l’accesso alla webcam e al microfono.
Come utilizzare Screen Capture API
In questa function:
videoElemè un tag<video>precedentemente creato- Il metodo getDisplayMedia() è utilizzato per ottenere l’oggetto
MediaStream - Infine, possiamo impostare la proprietà
srcObjectdel video tag per ottenere lo stream displayMediaOptionsè un oggetto di configurazione per definire determinati requisiti
Opzioni di configurazione
Come visto nel paragrafo precedente, getDisplayMedia() accetta come parametro un oggetto di configurazione che permette di specificare i requisiti audio e video.
Ad esempio:
- Video: è possibile specificare se ottenere il video o meno. Può essere un
booleanoo un oggetto per definire parametri, come la risoluzione o il frame rate. - Audio: anche in questo caso, è possibile specificare se ottenere l’audio o meno. Può essere un
booleanocome il video o un oggetto per definire parametri, come la cancellazione dell’eco o la soppressione del rumore.
Esempio di un oggetto di configurazione semplice (gdmOptions) e di uno più complesso:
Screen capture API e device
L’altro metodo offerto da queste API è getUserMedia(), con cui è possibile accedere alla webcam dell’utente.
Il codice è simile al precedente: viene restituito lo Stream con questo metodo, impostiamo la proprietà dell’elemento video tag, e possiamo ottenere il video e l’audio allo stesso modo.
Come utilizzare le Screen Capture API per la registrazione dello schermo
Il metodo getDisplayMedia() consente agli utenti di catturare e registrare i propri schermi. Il codice di esempio riportato di seguito mostra come gli utenti possono selezionare una finestra o una scheda specifica da condividere. Mentre la condivisione è attiva, tutte le azioni eseguite all’interno della scheda o della finestra selezionata vengono registrate e visualizzate in un elemento <video>. Una volta che l’utente interrompe la condivisione, il contenuto registrato può essere rivisto direttamente all’interno del browser.
Questa applicazione dell’API per la cattura dello schermo è particolarmente efficace, in quanto consente agli utenti di creare semplici registrazioni dello schermo nel proprio browser senza alcuna applicazione di terze parti. Il contenuto acquisito può successivamente essere utilizzato in vari contesti, come tutorial o presentazioni.
Questa funzionalità può essere integrata in applicazioni web più complesse in diversi settori. A fini didattici, ad esempio, può arricchire i programmi di e-learning, consentendo ai professori di registrare lezioni. In ambito customer service, può essere utilizzata per consentire agli utenti di risolvere i problemi attraverso sessioni utente. Per gli strumenti di collaborazione, può essere utilizzata per agevolare il flusso di lavoro e consentire la condivisione dei materiali per riferimenti futuri.
Combinando getDisplayMedia() con altre API, come MediaRecorder, gli sviluppatori possono inoltre migliorare l’esperienza di registrazione fornendo funzionalità aggiuntive, come il salvataggio delle registrazioni su file, il caricamento su cloud storage o la modifica direttamente nel browser.
Come utilizzare le Screen Capture API per fare uno screenshot
Un altro ambito di utilizzo interessante di queste API è quello di ottenere screenshot dello schermo dell’utente, una feature simile a quella di registrazione dello schermo. Ad esempio, l’utente può scegliere di condividere una determinata scheda, finestra o schermata, e il contenuto condiviso verrà trasmesso in un elemento.
A questo punto, il flusso video viene inserito in un elemento del browser che ci consente di ottenere uno screenshot dell’immagine, che può rappresentare un fotogramma specifico dello schermo condiviso. Una volta catturata l’immagine, il flusso può essere interrotto per impedire ulteriori registrazioni.
Questo approccio è particolarmente efficace perché l’elemento <canvas> fornisce un’ampia gamma di strumenti di disegno e modifica. Gli sviluppatori possono utilizzare le sue proprietà per manipolare lo screenshot, sovrapporre annotazioni, aggiungere elementi grafici, o personalizzare l’immagine in base ai requisiti dell’applicazione. Ad esempio, gli utenti possono aggiungere testo, evidenziare aree specifiche o applicare filtri direttamente sullo screenshot acquisito.
Parte di codice per effettuare uno screenshot:
Sicurezza e privacy
Le Screen Capture API sono progettate con specifici vincoli di sicurezza. Gli utenti, infatti, devono concedere esplicitamente il permesso di condividere il proprio schermo e l’audio. Il browser mostrerà un’interfaccia nativa per consentire all’utente di confermare quale parte dello schermo condividere. Le applicazioni web non possono catturare lo schermo senza il consenso dell’utente. L’API può inoltre essere utilizzata solo in connessione sicura (HTTPS).
Per motivi di privacy, l’API non consente agli sviluppatori di aggirare queste restrizioni.
Gestione degli errori
Quando utilizziamo le API di Screen Capture, possono verificarsi alcuni errori. Ad esempio, l’utente potrebbe non concedere il permesso all’applicazione web di ottenere il video o l’audio. In questo caso, l’API genererà un errore e bisognerà gestirlo nel modo corretto.
Un esempio di gestione di un errore possiamo vederlo nel codice sopra. L’API genererà un errore di cui andremo a controllare la proprietà name. A quel punto se il nome dell’errore corrisponderà a NotAllowedError andremo ad avvertire l’utente della necessità di fornire il consenso per la condivisione della webcam per utilizzare la funzionalità in questione. Nel caso in cui venga generato un errore diverso a quel punto mostreremo un errore generico.
Limiti
Anche queste API presentano alcuni limiti:
- Prestazioni: la condivisione dello schermo può essere pesante in termini di risorse utilizzate, soprattutto per i video ad alta risoluzione.
- Interazione con l’utente: l’utente deve sempre concedere l’autorizzazione per l’operazione e questo introduce un’altra azione obbligatoria.
- Compatibilità del browser: non tutti i browser supportano queste API allo stesso modo: è quindi importante controllare prima la documentazione. I dispositivi mobile, inoltre, non supportano il metodo
getDisplayMedia().
Conclusioni
Le Screen Capture API sono un’importante innovazione per lo sviluppo di applicazioni web moderne. Grazie alla loro semplicità e potenzialità intrinseche, è possibile implementare strumenti avanzati per la condivisione e la registrazione dello schermo. Tuttavia, risulta fondamentale comprenderne i limiti e rispettare le regole sulla privacy degli utenti.
Autore: Niccolò Naso, Front-end Developer @ Bitrock
