Uso pratico di HTML Media Capture nei form

La recente introduzione in Safari per iOS del supporto all'estensione HTML Media Capture, rappresenta un'occasione per approfondire questa funzionalità che consente di utilizzare i campi di input dei form per l'upload di contenuti multimediali catturati tramite fotocamera o microfono. Tecnicamente parliamo di una specifica che estende l'interfaccia HTMLInputElement tramite l'attributo capture.

Quest'ultimo permette di effettuare un'esplicita richiesta di accesso agli strumenti per la cattura dei media e, quando esso viene specificato, l'user agent dovrebbe procedere con l'invocazione al file picker associato al tipo di controllo scelto per la cattura. Nello stesso modo, quando si utilizza l'attributo capture si stabilisce anche che l'user agent non dovrà memorizzare il media catturato, ciò non dovrà avvenire né tramite meccanismi di data storage, né localmente e tantomeno in remoto.

L'eventuale salvataggio del media potrà essere effettuato tramite script, che avrà accesso al contenuto tramite il file picker rappresentato dall'oggetto FileList, ma in ogni caso le procedure di storage funzioneranno al di fuori dello scope di HTML Media Capture.

A livello pratico tale funzionalità può essere essere impiegata per interagire con dispositivi differenti, l'esempio successivo mostra come catturare un'immagine utilizzando la fotocamera di un device ed effettuarne l'upload attraverso un form HTML:

nello stesso modo si potrà procedere alla cattura di un file audio tramite il microfono:

o di un video:

Come è semplice notare, a variare sono i valori da associare all'attributo accept che devono essere modificati a seconda del fatto che si voglia catturare un'immagine (image/*), un file audio (audio/*) o un filmato (video/*). Anche il valore dell'attributo capture cambia sulla base del media che deve essere catturato e non viene definito esplicitamente soltanto nel caso si desideri effettuare l'upload di un file audio.

capture provvederà quindi ad interrogare il device più adatto a catturare la tipologia di media richiesto sulla base di quanto specificato per l'attributo accept.

Per approfondire: HTML Media Capture specification