HTML5: accedere alla videocamera e alla galleria di foto dei dispositivi mobili



Tra le tante facilities introdotte con HTML5 (oltre al già citato localStorage) troviamo anche la possibilità (finalmente) di accedere ai contenuti multimediali dei dispositivi mobili.

HTML Media Capture è compatibile con i seguenti browser mobili:


  • Browser di Android, dalla versione 3.0 in poi
  • Chrome per Android
  • Firefox Mobile 10.0
  • Safari e Chrome su iOS6




L'implementazione è banale, basta infatti aggiungere gli attributi capture accept a un semplice tag <input>:

<input accept="image/*" capture="camera" type="file" />


in questo modo il browser dello smartphone aprirà, alla pressione del tasto corrispondente, il menù che permetterà di scegliere se prelevare la foto dalla galleria di immagini oppure acquisirne una nuova con la fotocamera del terminale.


L'immagine scelta viene poi salvata dal browser in un file temporaneo, accessibile tramite javascript e utilizzabile sia per un semplice POST su un form ma anche per l'utilizzo all'interno della nostra app (e senza utilizzare le primitive di PhoneGap).


Ho realizzato un semplicissimo demo, accessibile da QUESTO INDIRIZZO, questo è il sorgente:


Published: May 21 2013

  • category: