Accesso alla telecamera tramite browser

150

Stiamo creando un sito Web HTML5 per dispositivi mobili e dobbiamo ottenere l'accesso alla videocamera tramite il browser Web senza essere un'app nativa. Abbiamo problemi a far funzionare questo in iOS. Qualcuno è a conoscenza di una soluzione per questo?

ios html camera

— Julia
fonte

124

Puoi provare questo:

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

ma per funzionare deve essere iOS 6+ . Questo ti darà un bel dialogo per scegliere se scattare una foto o caricarne una dal tuo album

Screenhot

Un esempio può essere trovato qui: Acquisizione di dati di foto / foto senza PhoneGap

— Xeroxoid
fonte

5

Questo è FANTASTICO anche su Android!

— Matt,

1

Bella demo per il caricamento su un server. Qualcuno sa come modificarlo per salvare l'immagine in un album locale sul dispositivo?

— K.Niemczyk,

2

L'unico problema è che, almeno su iPhone (iOS 7.0.4) almeno al momento crea un'immagine temporanea chiamata sempre 'image.jpg'. Quindi, se carichi alcune immagini nello stesso modulo, si sovrascrivono a vicenda a causa dello stesso nome, a meno che tu non faccia qualcosa per rinominarle, fai attenzione!

— aleation

@ K.Niemczyk: l'hai mai capito? in tal caso sarei interessato alla soluzione. Ho trovato questo: dev.w3.org/2009/dap/camera (vedi esempi 6-7 per l'archiviazione locale)

— lamarant

1

Brillante. Ecco un violino per chiunque voglia testare questo codice sul proprio dispositivo.

— Simon East,

33

A partire dal 2015, ora funziona e basta .

<input type="file">

Ciò richiederà all'utente il caricamento di qualsiasi file. Su iOS 8.x questo può essere un video della fotocamera, una foto della fotocamera o una foto / video dalla Libreria foto.

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

Questo è come sopra, ma limita i caricamenti alle foto solo dalla fotocamera o dalla libreria, senza video.

— Simon Oriente
fonte

1

Esiste un modo per impedire agli utenti di scegliere un file dalla libreria di foto? Voglio accettare solo un'immagine appena scattata.

— Daryl,

@Daryl non su iOS. Android supporta l' captureattributo che fa proprio questo. Vedi Sintassi corretta per HTML Media Capture

— Octavian Naicu

devo chiudere questo popup Take Photo o Video e Photo Library dopo qualche tempo in cui l'utente non fa clic su di esso.

— Pritish,

sembra che le funzioni video non ci siano più?

— Martian2049,

25

In iOS6, Apple lo supporta tramite il <input type="file">tag. Non riuscivo a trovare un link utile per documentazione per sviluppatori di Apple, ma c'è un esempio qui .

Sembra sovrapposizioni e funzionalità più avanzate non sono ancora disponibili, ma questo dovrebbe funzionare per molti casi d'uso.

EDIT: Il w3c ha una specifica che iOS6 Safari sembra implementare un sottoinsieme di. L' captureattributo è notevolmente mancante.

— user295691
fonte

10

Penso che questo funzioni. Registrazione di un video o audio;

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

o (nuovo metodo)

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

In caso contrario, probabilmente funzionerà su iOS6, maggiori dettagli sono disponibili su get user media

— siniradam
fonte

4

L' app Picup è un modo per scattare foto da una pagina HTML5 e caricarle sul tuo server. Richiede una programmazione aggiuntiva sul server, ma a parte PhoneGap, non ho trovato un altro modo.

— rakensi
fonte

5

In iOS8 non hai più bisogno di Picup. HTML5 supporta <input type = "file" accept = "image / *" id = "capture" capture = "camera">. Verificato in Safari e Chrome.

— rakensi,

1

Questa domanda ha già alcuni anni, ma in quel momento si sono evolute alcune possibilità aggiuntive, come l'accesso diretto alla fotocamera, la visualizzazione di un'anteprima e l'acquisizione di istantanee (ad esempio per la scansione del codice QR).

Questo articolo di Google Developers fornisce una spiegazione approfondita di tutti (?) I modi in cui ottenere dati di immagini / telecamere in un'applicazione Web, dal "lavoro ovunque" (anche nei browser desktop) al "lavoro solo su moderni, aggiornati -date dispositivi mobili con fotocamera ". Insieme a molti consigli utili.

Metodi spiegati:

Chiedi un URL
File input (coperto dalla maggior parte degli altri post qui)
Trascina selezione (utile per i browser desktop)
Incolla dagli Appunti
Accedi alla telecamera in modo interattivo (necessario se l'applicazione deve fornire un feedback immediato su ciò che "vede", come i codici QR)

— Christoph
fonte