Come accedere alla fotocamera di un cellulare da un'app Web?

191

Nella mia app Web (non app nativa) per dispositivi mobili, voglio scattare una foto e caricarla, ma non desidero utilizzare Adobe Flash. C'è un modo per fare questo?

html mobile camera

— 夏期劇場
fonte

2

"Pagina Web" significa che dovrebbe essere facilmente accessibile da qualsiasi tipo di client / dispositivo. Quindi, dovrei impostare delle restrizioni?

— 夏期劇場

1

Presumo che tu voglia accedere alla videocamera hardware, giusto?

— Dennis Traub,

Hmm .. "Camera" dei cellulari Smart Phone / ecc. Dalla pagina web.

— 夏期劇場

Ciao, questa è una materia che sto attualmente studiando per i miei progetti. Le PWA ti consentono di utilizzare le funzionalità dei dispositivi nativi nei browser moderni: developers.google.com/web/updates/2016/12/imagecapture

— palmaone

260

In iPhone iOS6 e da Android ICS in poi, HTML5 ha il seguente tag che ti consente di scattare foto dal tuo dispositivo:

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

Capture può assumere valori come fotocamera, videocamera e audio.

Penso che questo tag sicuramente non funzionerà in iOS5, non ne sono sicuro.

— Ashish
fonte

32

Ecco un ottimo tutorial: html5rocks.com/en/tutorials/getusermedia/intro

— Micah

2

GetUserMedia non è richiesto qui.

— Ray Nicholus,

Ottengo un "getUserMedia () non supportato da questo dispositivo" - ma sono su Safari e ho iOS7 - perché? - Dan appena modificato

— Dan

10

Penso che forse il codice dovrebbe essere <input type="file" accept="image/*;capture=camera">invece. Secondo MDN, non esiste alcun captureattributo per un inputelemento.

— Kenny Evitt,

9

Sia capture="camera"(String) che il precedente accept="image/*;capture=camera"sono stati sostituiti nel 2012 con capture="capture"(Boolean). L'attributo viene utilizzato per forzare l'acquisizione anziché selezionarla dalla libreria. Vedi le specifiche e la sintassi corretta per HTML Media Capture

— Octavian Naicu

36

Oggi almeno con Android è relativamente facile. Basta usare il normale tag di input del file e quando l'utente fa clic sul telefono il telefono chiederà se l'utente desidera utilizzare la fotocamera (o i file manager ecc.) Per caricare un file. Basta scattare una foto con la fotocamera e verrà automaticamente aggiunta e caricata.

Nessuna idea su iPhone. Forse qualcuno può illuminare su questo. EDIT: Iphone funziona in modo simile.

Esempio del tag di input:

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

— Tuxie
fonte

puoi farlo per più file come: multiple = "multiple"

— parseguy

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

— parseguy

multiplefunziona sia su Android che su iOS, vedi Sintassi corretta per HTML Media Capture

— Octavian Naicu

Non sono sicuro per altri dispositivi Apple, almeno questa soluzione funziona anche su iPad ora.

— cytsunny,

29

Solo per aggiornare questo, lo standard ora è:

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

per accedere alla telecamera (posteriore) rivolta verso l'ambiente e

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

per fotocamera frontale (frontale). Per accedere al video, sostituire "video" con "immagine" nel nome.

Testato su iPhone 5c, con iOS 10.3.3, firmware 760, funziona bene.

https://www.w3.org/TR/html-media-capture/

— user3204365
fonte

23

Safari e Chrome su iOS 6+ e Android 2.2+ supportano HTML Media Capture che ti consente di scattare foto con la fotocamera del tuo dispositivo o selezionarne una esistente:

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

Ecco come funziona su iOS 10:

Android 3.0+ e Safari su iOS10.3 + supportano anche l' captureattributo utilizzato per saltare direttamente alla videocamera.

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

capture="camera"(String) e accept="image/*;capture=camera"(Parameter) facevano parte delle vecchie specifiche e sono stati sostituiti da capture(Boolean) la W3C Candidate Advice.

Documentazione di supporto: questo libro O'Reilly del 2013 e i miei test

— Ottaviano Naicu
fonte

Il mio su Android passa direttamente a Selezione foto, ma non mi dà l'opzione per Fotocamera anche quando ho impostato capture = "camera" .... totalmente bloccato

— Benyaman

@Benyaman Prova con captureinvece di capture="camera". Curioso quale dispositivo e versione Android.

— Ottaviano Naicu il

L'ho fatto, su Android 5.0 apparentemente Phonegap non ha l'acquisizione HTML incorporata. Quindi non può catturare cose, nessun camrecord, nessun audio, nessuna fotocamera. Ho dovuto costruire un lavoro in giro.

— Benyaman,

5

bene, c'è una nuova funzionalità HTML5 per accedere alla fotocamera del dispositivo nativo - "getUserMedia API"

NOTA: HTML5 è in grado di gestire l'acquisizione di foto da una pagina Web su dispositivi Android (almeno nelle ultime versioni, eseguite dal sistema operativo Honeycomb; ma non può gestirlo su iPhone ma iOS 6).

— Louis
fonte

oh scusa è call setUserMedia API

— Louis

4

Puoi usare WEBRTC ma sfortunatamente non è supportato da tutti i browser web. QUI SOTTO È IL LINK PER MOSTRARE QUALE BROWSERS lo supporta http://caniuse.com/stream

E questo link ti dà un'idea di come puoi accedervi (codice di esempio). http://www.html5rocks.com/en/tutorials/getusermedia/intro/

— Michael Sultana
fonte

2

WebRTC ed getUserMediaè eccessivo, <input type="file" accept="image/*">farà il trucco.

— Ottaviano Naicu,

4

SDK HTML5 di AppMobi una volta prometteva l'accesso alla funzionalità del dispositivo nativo, inclusa la fotocamera, da un'app basata su HTML5, ma non è più di proprietà di Google. Prova invece le risposte basate su HTML5 in questo post .

— Dave Everitt
fonte

1

Non credo che Google abbia alcuna proprietà su AppMobi o sui loro prodotti.

— fakeguybrushthreepwood,

Ah - il mio errore, perché è sul Chrome Web Store - riferimento Google rimosso. Ecco i veri partner: appmobi.com/?page_id=468

— Dave Everitt

3

Ti consigliamo di utilizzare getUserMedia per accedere alla videocamera.

Questo tutorial illustra le basi dell'accesso a una fotocamera del dispositivo dal browser: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf

Nota: funziona sulla maggior parte dei dispositivi Android e solo su iOS in Safari.

— Aaron Benjamin
fonte

1

Va notato che sono state implementate funzionalità di sicurezza che richiedono l'esecuzione dell'app localmente in localhost o tramite SSL per far funzionare GetUserMedia ().

L'ho scoperto quando ho provato diverse demo disponibili e sono rimasto deluso quando non hanno funzionato! Vedi: Nuove restrizioni di sicurezza

— Anthony Griggs
fonte

0

Non credo che tu possa - c'è una bozza API W3C per ottenere audio o video, ma non è ancora stata implementata su nessuno dei principali sistemi operativi mobili.

~~Secondo migliore~~ L'unica opzione è seguire il suggerimento di Dennis di usare PhoneGap. Ciò significa che devi creare un'app nativa e aggiungerla all'app store / marketplace per dispositivi mobili.

— Kevin
fonte

mi dispiace ripubblicare - stavo cercando di vedere se hai aggirato l'eccezione NPE con il client jersey su Android. bloccato :(

— negromante il

0

Non conosco alcun modo per accedere alla fotocamera di un telefono cellulare dal browser Web senza alcun meccanismo aggiuntivo (ad esempio Flash o qualche tipo di contenitore che consente l'accesso all'API hardware)

Per quest'ultimo, dai un'occhiata a PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html

Con questo dovresti essere in grado di accedere alla videocamera almeno su dispositivi iOS e basati su Android.

— Dennis Traub
fonte

4

Ciò richiede ancora l'installazione di un'app sul dispositivo mobile, che è ciò che penso che l'OP voglia evitare.

— Michael Petrotta,

@MichaelPetrotta conosci un modo migliore?

— Dennis Traub,

2

Non credo che ciò che l'OP chiede sia possibile.

— Michael Petrotta,

@MichaelPetrotta è quello che penso anche io. E il modo migliore che mi viene in mente sarebbe PhoneGap, dal momento che funziona su iOS (cosa che Flash non fa). Tuttavia è nativo, vero, ma consente almeno un po 'di accesso multipiattaforma alle telecamere da una pagina Web.

— Dennis Traub,