HTML5: applicare effetti in realtime al flusso video della webcam



In un precedente post ho spiegato come utilizzare WebRTC per accedere alle immagini acquisite dalla webcam.


Oggi estendiamo il progetto e cerchiamo di applicare degli effetti in realtime al video.


La prima domanda che mi si potrebbe porre è: perchè non utilizzare i Filtri CSS?
Per un motivo semplice: il demo che voglio sviluppare, oltre ad applicare gli effetti al flusso video della webcam si occupa anche di salvarne degli snapshot.
I filtri CSS vengono applicati sopra il canvas/video, non ne modificano il contenuto: sono in pratica delle maschere che non alterano il contenuto dell'oggetto e che verrebbero ignorate in fase di salvataggio.

La soluzione che ho ideato è tuttavia abbastanza pesante per quanto concerne l'utilizzo delle risorse: senza dubbio ci sono grandi margini di ottimizzazione.

In pratica utilizzo il codice del precedente post per dirottare il flusso multimediale della webcam su un oggetto VIDEO nascosto, successivamente avvio un ciclo che 30 volte al secondo realizza uno snapshot del video, applica i filtri sull'immagine ottenuta e la copia sull'oggetto CANVAS.

Il codice per la realizzazione dei filtri (righe 8-52) e la loro applicazione sull'immagine (righe 59-67) l'ho tratto da questo ottimo articolo di John Robinson.



Compatibile con Safari, Chrome e Firefox

Published: June 14 2013

  • category: