web-dev-qa-db-fra.com

Accès à la caméra via le navigateur

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 ce travail dans iOS. Est-ce que quelqu'un est au courant d'une solution pour cela?

ioshtml5camera
150
Julia

Vous pouvez essayer ceci:

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

mais il doit être iOS 6 + pour fonctionner. Cela vous donnera un joli dialogue pour que vous choisissiez soit de prendre une photo, soit d’en télécharger une de votre album, par exemple.

Screenhot

Vous trouverez un exemple ici: Capture de données de caméra/image sans PhoneGap

122
Xeroxoid

Depuis 2015, cela fonctionne maintenant .

<input type="file">

Cela demandera à l'utilisateur de télécharger n'importe quel fichier. Sur iOS 8.x, il peut s'agir d'une vidéo, d'une photo ou d'une photo/vidéo de la photothèque.

iOS/iPhone photo/video/file upload

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

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

31
Simon East

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

Il semble que les superpositions et les fonctionnalités plus avancées ne soient pas encore disponibles, mais cela devrait fonctionner dans de nombreux cas d'utilisation.

EDIT: Le w3c a une spécification selon laquelle iOS6 Safari semble implémenter un sous-ensemble de. L'attribut capture est notamment manquant.

25
user295691

Je pense que celui-ci fonctionne. Enregistrer une vidéo ou un 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 iOS 6, vous trouverez plus de détails à l'adresse obtenir le support utilisateur

10
siniradam

L'application Picup est un moyen de prendre des photos 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.

4
rakensi

Cette question a déjà quelques années mais à cette époque, 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).

Cet Google Developers article fournit une explication détaillée de toutes les manières (?) De savoir comment importer des données d'image/de caméra dans une application Web, de "travailler partout" (même dans les navigateurs de bureau) à "travailler". uniquement sur les appareils mobiles modernes et à jour 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 du presse-papier
  • Accéder à la caméra de manière interactive (nécessaire si l'application doit donner un retour instantané sur ce qu'elle "voit", comme les codes QR)
2
Christoph