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?
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?
Réponses:
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.
<input type="file" accept="image/*;capture=camera">
place. Selon MDN, il n'y a pas d' capture
attribut pour un input
élément.
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
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">
multiple
fonctionne à la fois sur Android et iOS, voir Syntaxe correcte pour HTML Media Capture
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.
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:
Android 3.0+ et Safari sur iOS10.3 + prennent également en charge l' capture
attribut 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
capture
au lieu de capture="camera"
. Curieux de quel appareil et de la version Android.
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).
Vous pouvez utiliser WEBRTC mais malheureusement, il n'est pas pris en charge par tous les navigateurs Web. CI-DESSOUS, LE LIEN POUR MONTRER QUELS NAVIGATEURS le prennent en charge http://caniuse.com/stream
Et ce lien vous donne une idée de la façon dont vous pouvez y accéder (exemple de code). http://www.html5rocks.com/en/tutorials/getusermedia/intro/
getUserMedia
est exagéré, <input type="file" accept="image/*">
fera l'affaire.
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 .
Vous voudrez utiliser getUserMedia pour accéder à la caméra.
Ce tutoriel décrit les bases de l'accès à une caméra d'appareil à partir du navigateur: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf
Remarque: cela fonctionne sur la plupart des appareils Android et sous iOS dans Safari uniquement.
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é
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.
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.