Accès à la caméra via le navigateur

150

Nous créons un site Web HTML5 pour mobile et devons accéder à la caméra via le navigateur Web sans être une application native. Nous avons du mal à faire fonctionner cela sous iOS. Quelqu'un est-il au courant d'une solution pour cela?

ios html camera

— Julia
source

124

Vous pouvez essayer ceci:

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

mais cela doit être iOS 6+ pour fonctionner. Cela vous donnera un bon dialogue pour que vous choisissiez de prendre une photo ou d'en télécharger une à partir de votre album, c'est-à-dire

Capture d'écran

Un exemple peut être trouvé ici: Capture de données de caméra / image sans PhoneGap

— Xeroxoid
source

5

C'est génial sur Android aussi!

— Matt

1

Belle démo pour le téléchargement sur un serveur. Quelqu'un sait comment modifier cela pour enregistrer l'image dans un album local sur l'appareil?

— K.Niemczyk

2

Le seul problème est que, au moins sur l'iphone (ios 7.0.4) au moins au moment où il crée une image temporaire nommée always 'image.jpg'. Donc, si vous téléchargez quelques images sous la même forme, elles se remplacent l'une l'autre à cause du même nom à moins que vous ne fassiez quelque chose pour les renommer, soyez prudent!

— aleation

@ K.Niemczyk: avez-vous déjà compris cela? si c'est le cas, je serais intéressé par la solution. J'ai trouvé ça: dev.w3.org/2009/dap/camera (voir les exemples 6-7 pour le stockage local)

— lamarant

1

Brillant. Voici un violon pour tous ceux qui souhaitent tester ce code sur leur appareil.

— Simon Est

33

En 2015, il maintenant fonctionne .

<input type="file">

Cela demandera à l'utilisateur de télécharger n'importe quel fichier. Sur iOS 8.x, cela peut être une vidéo d'appareil photo, une photo d'appareil photo ou une photo / vidéo de la bibliothèque de photos.

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

C'est comme ci-dessus, mais limite les téléchargements aux photos uniquement à partir de l'appareil photo ou de la bibliothèque, pas de vidéos.

— Simon Est
source

1

Existe-t-il un moyen d'empêcher les utilisateurs de choisir un fichier dans la bibliothèque de photos? Je souhaite accepter uniquement une image nouvellement prise.

— Daryl

@Daryl pas sur iOS. Android prend en charge l' captureattribut qui fait exactement cela. Voir la syntaxe correcte pour HTML Media Capture

— Octavian Naicu

Dois-je fermer cette fenêtre contextuelle Prendre une photo ou une vidéo et une bibliothèque de photos après un certain temps, sans cliquer dessus.

— Pritish

ressemble aux fonctions vidéo n'est plus là?

— Martian2049

25

Dans iOS6, Apple prend en charge cela via la <input type="file">balise. Je n'ai pas trouvé de lien utile dans la documentation destinée aux développeurs d'Apple, mais il y a un exemple ici .

Cela ressemble à des superpositions et des fonctionnalités plus avancées ne sont pas encore disponibles, mais cela devrait fonctionner dans de nombreux cas d'utilisation.

EDIT: Le w3c a une spécification dont iOS6 Safari semble implémenter un sous-ensemble de. L' captureattribut est notablement absent.

— user295691
source

10

Je pense que celui-ci fonctionne. Enregistrement d'une vidéo ou audio;

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

ou (nouvelle méthode)

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

Si ce n'est pas le cas, fonctionnera probablement sur ios6, plus de détails peuvent être trouvés sur get user media

— Siniradam
source

4

L' application Picup est un moyen de prendre des photos à partir d'une page HTML5 et de les télécharger sur votre serveur. Cela nécessite une programmation supplémentaire sur le serveur, mais à part PhoneGap, je n'ai pas trouvé d'autre moyen.

— rakensi
source

5

Dans iOS8, vous n'avez plus besoin de Picup. HTML5 prend en charge <input type = "file" accept = "image / *" id = "capture" capture = "camera">. Vérifié dans Safari et Chrome.

— rakensi

1

Cette question date déjà de quelques années, mais pendant ce temps, certaines possibilités supplémentaires ont évolué, comme accéder directement à la caméra, afficher un aperçu et capturer des instantanés (par exemple pour la numérisation de code QR).

Ce développeur Google article de fournit une explication approfondie de tous (?) Les moyens d'obtenir des données d'image / caméra dans une application Web, du "travail partout" (même dans les navigateurs de bureau) au "travail uniquement sur des -date appareils mobiles avec appareil photo ". Avec de nombreux conseils utiles.

Méthodes expliquées:

Demander une URL
Entrée de fichier (couverte par la plupart des autres articles ici)
Glisser-déposer (utile pour les navigateurs de bureau)
Coller à partir du presse-papiers
Accédez à la caméra de manière interactive (nécessaire si l'application a besoin de donner un retour instantané sur ce qu'elle "voit", comme les codes QR)

— Christoph
source