HTML5: accedere alla webcam



La cattura audio/video è stata per parecchio tempo una sorta di 'pietra filosofale' dello sviluppo per il web:  per anni è stato obbligatorio fare affidamento su plugins da installare nel browser (Flash/ Silverlight).

HTML5 fortunatamente viene in soccorso del povero web developer con un nuovo protocollo chiamato WebRTC (Web Real Time Communications).

La specifica è controllata dal W3C WebRTC Working Group e Google, Opera, Mozilla, e pochi altri stanno lavorando per implementare le nuove funzionalità sui loro browser.




Il metodo getUserMedia() fornisce i mezzi per accedere ai flussi multimediali di webcam e microfono: vediamo come utilizzarlo per realizzare una semplice webapp che acceda alla webcam e ci permetta di scattare delle foto:

La funzione init() (righe 8-33) per prima cosa realizza un layer di compatibilità cross-browser (righe 9-10), in seguito richiama il metodo navigator.getUserMedia e nella funziona di callBack dirotta lo stream  della webcam sull'oggetto video (righe 19/21).

La funzione snapshot() utilizza l'oggetto canvas nascosto (riga 66) come appoggio per accogliere l'istantanea presa dall'oggetto video (riga 45), estrarne l'immagine in base64 e visualizzarla nell'oggetto img (riga 46).

Prima però, il canvas ha necessità di essere ridimensionato in rapporto alle dimensioni dell'oggetto video (righe 37-43).

WebRTC è supportato correttamente da Chrome e Firefox.




Published: June 05 2013

  • category: