Comment accéder à la caméra d'un mobile depuis une application Web?


191

Dans mon application Web (pas d'application native) pour mobiles, je souhaite prendre une photo et la télécharger, mais je ne souhaite pas utiliser Adobe Flash. Y a-t-il un moyen de faire ça?


2
«Page Web» signifie qu'elle doit être facilement accessible depuis n'importe quel type de clients / appareils. Alors, dois-je définir des restrictions?
夏 期 劇場

1
Je suppose que vous voulez accéder à la caméra matérielle, non?
Dennis Traub

Hmm .. "Caméra" des téléphones intelligents mobiles / etc. de la page Web.
夏 期 劇場

Salut, c'est un sujet que j'étudie actuellement pour mes propres projets. Les PWA vous permettent d'utiliser les fonctionnalités natives des appareils dans les navigateurs modernes: développeurs.google.com
web

Réponses:


260

Dans iPhone iOS6 et à partir d'Android ICS, HTML5 possède la balise suivante qui vous permet de prendre des photos à partir de votre appareil:

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

Capture peut prendre des valeurs telles que l'appareil photo, le caméscope et l'audio.

Je pense que cette balise ne fonctionnera certainement pas sous iOS5, je n'en suis pas sûr.


32
Voici un excellent tutoriel: html5rocks.com/en/tutorials/getusermedia/intro
Micah

2
GetUserMedia n'est pas requis ici.
Ray Nicholus

J'obtiens un "getUserMedia () non pris en charge par cet appareil" - mais je suis en safari et j'ai ios7 - pourquoi? - Dan vient de modifier
Dan

10
Je pense que le code devrait peut-être être à la <input type="file" accept="image/*;capture=camera">place. Selon MDN, il n'y a pas d' captureattribut pour un inputélément.
Kenny Evitt

9
Les deux capture="camera"(String) et les plus âgés accept="image/*;capture=camera"ont été remplacés en 2012 avec capture="capture"(Boolean). L'attribut est utilisé pour forcer la capture au lieu de sélectionner dans la bibliothèque. Voir les spécifications et la syntaxe correcte pour HTML Media Capture
Octavian Naicu

36

De nos jours, au moins avec Android, c'est relativement facile. Utilisez simplement la balise d'entrée de fichier normale et lorsque l'utilisateur clique dessus, le téléphone demandera si l'utilisateur souhaite utiliser l'appareil photo (ou les gestionnaires de fichiers, etc.) pour télécharger un fichier. Prenez simplement une photo avec l'appareil photo et elle sera automatiquement ajoutée et téléchargée.

Aucune idée de l'iphone. Peut-être que quelqu'un peut éclairer là-dessus. EDIT: Iphone fonctionne de la même manière.

Exemple de la balise d'entrée:

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

pouvez-vous faire cela pour plusieurs fichiers comme: multiple = "multiple"
parseguy

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

multiplefonctionne à la fois sur Android et iOS, voir Syntaxe correcte pour HTML Media Capture
Octavian Naicu

Pas sûr pour les autres appareils Apple, au moins cette solution fonctionne également sur iPad maintenant.
cytsunny

29

Juste pour mettre à jour ceci, la norme est maintenant:

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

pour accéder à la caméra (arrière) orientée vers l'environnement, et

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

pour caméra (avant) face à l'utilisateur. Pour accéder à la vidéo, remplacez «vidéo» par «image» dans le nom.

Testé sur iPhone 5c, exécutant iOS 10.3.3, firmware 760, fonctionne bien.

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


23

Safari et Chrome sur iOS 6+ et Android 2.2+ prennent en charge HTML Media Capture qui vous permet de prendre des photos avec l'appareil photo de votre appareil ou d'en sélectionner une existante:

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

Voici comment cela fonctionne sur iOS 10:

entrez la description de l'image ici

Android 3.0+ et Safari sur iOS10.3 + prennent également en charge l' captureattribut utilisé pour accéder directement à la caméra.

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

capture="camera"(String) et accept="image/*;capture=camera"(Parameter) faisaient partie des anciennes spécifications et ont été remplacés par capture(Boolean) la recommandation candidate du W3C.

Documentation de support: ce livre O'Reilly 2013 et mes tests


Le mien sur Android passe directement à Sélection de photos, mais ne me donne pas l'option de l'appareil photo même lorsque j'ai défini capture = "camera" .... totalement bloqué
Benyaman

@Benyaman Essayez avec captureau lieu de capture="camera". Curieux de quel appareil et de la version Android.
Octavian Naicu

Je l'ai fait, sur Android 5.0 apparemment, Phonegap n'a pas de capture HTML intégrée. Donc, il ne peut pas capturer des choses, pas de camrecord, pas d'audio, pas de caméra. J'ai dû construire un travail autour.
Benyaman

5

Eh bien, il existe une nouvelle fonctionnalité HTML5 pour accéder à la caméra native du périphérique - "API getUserMedia"

REMARQUE: HTML5 peut gérer la capture de photos à partir d'une page Web sur les appareils Android (au moins sur les dernières versions, exécutées par le système d'exploitation Honeycomb; mais il ne peut pas le gérer sur les iPhones mais iOS 6).


oh pardon, appelez setUserMedia API
Louis


4

Le SDK HTML5 d'AppMobi a déjà promis un accès aux fonctionnalités natives de l'appareil, y compris la caméra, à partir d'une application HTML5, mais n'appartient plus à Google. À la place, essayez les réponses basées sur HTML5 dans cet article .


1
Je ne pense pas que Google soit propriétaire d'AppMobi ou de ses produits.
fakeguybrushthreepwood

Ah - mon erreur, car c'est sur le Chrome Web Store - référence Google supprimée. Voici les vrais partenaires: appmobi.com/?page_id=468
Dave Everitt


1

Il convient de noter que des fonctionnalités de sécurité ont été implémentées qui nécessitent soit que l'application soit exécutée localement sous localhost, soit via SSL pour que GetUserMedia () fonctionne.

J'ai découvert cela en essayant plusieurs des démos disponibles et j'ai été déçu quand elles ne fonctionnaient pas! Voir: Nouvelles restrictions de sécurité


0

Je ne pense pas que vous puissiez - il existe un projet d'API W3C pour obtenir de l'audio ou de la vidéo, mais il n'y a pas encore d'implémentation sur l'un des principaux systèmes d'exploitation mobiles.

Deuxième meilleur La seule option est d'aller avec la suggestion de Dennis d'utiliser PhoneGap. Cela signifie que vous devez créer une application native et l'ajouter à la boutique / place de marché d'applications mobiles.


désolé de republier - je cherchais à voir si vous aviez contourné l'exception NPE avec le client jersey sur Android. coincé :(
nécromancien

0

Je ne connais aucun moyen d'accéder à la caméra d'un téléphone mobile à partir du navigateur Web sans mécanisme supplémentaire (par exemple, Flash ou un type de conteneur permettant d'accéder à l'API matérielle)

Pour ces derniers, jetez un œil à PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html

Avec cela, vous devriez pouvoir accéder à la caméra au moins sur les appareils iOS et Android.


4
Cela nécessite toujours qu'une application soit installée sur l'appareil mobile, ce que je pense que l'OP veut éviter.
Michael Petrotta

@MichaelPetrotta connaissez-vous un meilleur moyen?
Dennis Traub

2
Je ne crois pas que ce que le PO demande soit possible.
Michael Petrotta

@MichaelPetrotta c'est ce que je pense aussi. Et le meilleur moyen auquel je puisse penser serait PhoneGap, car il fonctionne sur iOS (ce que Flash ne fait pas). C'est toujours natif, c'est vrai, mais permet au moins un peu d'accès multiplateforme aux caméras à partir d'une page Web.
Dennis Traub
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.