Scatta una foto da html5

Question

Ho letto molti modi per acquisire un'immagine da una pagina html5. Sono ancora sicuri di quale è la migliore per le mie esigenze:

• ampio supporto per i browser e sistema operativo: almeno: Chrome, Firefox, di default Android, safari
• Non ho bisogno di acquisizione in tempo reale. L'utente deve premere un pulsante per scattare una foto, che richiede l'applicazione della fotocamera del sistema

Ci sono almeno tre soluzioni:

• <input type="file" accept="image/*;capture=camera">
• Navigator.getUserMedia() (sembra deprecato)
• MediaDevices.getUserMedia() (sembra sperimentale)

In ogni caso, vedo un sacco di examp per incorporare la fotocamera nella pagina (w/ getUserMedia), quindi non so se posso fare affidamento solo sul primo metodo.

Answer 1

Utilizzando l'API WebRTC getUserMedia sta andando a coprire tutti i browser moderni oltre a Safari: http://caniuse.com/#feat=stream

Here è una pagina di esempio che utilizza getUserMedia di prendere un fermo immagine (con un link ad una page che descrive il codice). La maggior parte delle demo getUserMedia mostra il flusso video in un'area di area visibile, ma non è necessario. È possibile acquisire un'immagine utilizzando getUserMedia senza visualizzare il flusso video in un'area visibile.

Sfortunatamente, Apple è stata lenta nell'adottare le API WebRTC, quindi penso che il tag di input del file sia il migliore che si possa sperare lì, a meno che non si desideri utilizzare qualcosa come Cordova. Here è una descrizione di come utilizzare il tag di input del file.

Il Media Capture API è un suggerimento candidato che significa che sta per diventare uno standard, tuttavia, non conosco alcun browser che implementa l'attuale raccomandazione W3C (utilizzando un attributo di acquisizione nuda nel tag di input). Lo stile <input type="file" accept="image/*"> attualmente sembra essere supportato solo dai browser mobili.

In breve, se si desidera disporre di un ampio supporto per browser nel prossimo futuro, sarà necessario supportare entrambi i metodi fino a quando Apple inizia a supportare le API WebRTC o finché altri browser desktop non iniziano a supportare l'API Media Capture (o la variante con l'attributo capture attualmente supportato dai browser mobili).