Comment accéder à un mobile de la caméra à partir d'une application web?
Dans mon application web (pas d'application native) pour les mobiles, je veux prendre une photo et la télécharger, mais je ne veux pas utiliser le logiciel Adobe Flash. Est-il possible de faire cela?
- Quel matériel et quels OS?
- "Page web" signifie, il doit être facilement accessible à partir de tout type de clients/périphériques. Donc, dois-je définir des restrictions?
- Je suppose que, vous souhaitez accéder au matériel de la caméra, non?
- Hmm.. "Caméra" du Mobile, les Téléphones Intelligents / etc.. à partir de la page web.
- Salut, c'est un sujet que je suis en train d'étudier pour mes propres projets. PWAs vous permettre d'utiliser natif fonctions de l'appareil dans les navigateurs modernes: developers.google.com/web/updates/2016/12/imagecapture
Vous devez vous connecter pour publier un commentaire.
De l'iPhone iOS6 et à partir d'Android ICS partir, HTML5 a la balise suivante qui vous permet de prendre des photos à partir de votre appareil:
Capture
peut prendre des valeurs comme l'appareil photo, caméscope et audio.Je pense que cette balise sera certainement pas de travail en iOS5, pas sûr à ce sujet.
<input type="file" accept="image/*;capture=camera">
à la place. Selon le MDN, il n'y a pascapture
attribut pour uneinput
élément.capture="camera"
(Chaîne de caractères) et les plus âgésaccept="image/*;capture=camera"
ont été remplacés en 2012 aveccapture="capture"
(Boolean) . L'attribut est utilisé pour forcer la capture au lieu de sélectionner à partir de la bibliothèque. Voir le spec et Syntaxe Correcte pour HTML Médias CaptureAujourd'hui, au moins avec android c'est relativement facile. Juste normal d'utilisation du fichier d'entrée et de balise lorsque l'utilisateur clique sur le téléphone vous demande si l'utilisateur veut utiliser la caméra (ou les gestionnaires de fichiers, etc..) pour télécharger un fichier. Il suffit de prendre une photo avec l'appareil photo et il sera automatiquement ajouté et téléchargées.
Aucune idée sur l'iphone. Peut-être quelqu'un peut éclairer sur ce point.
EDIT: Iphone fonctionne de la même façon.
Échantillon de la balise d'entrée:
multiple
travaille à la fois sur Android et iOS, voir Syntaxe Correcte pour HTML Médias CaptureSafari & Chrome sur iOS 6+ et Android 2.2+ support HTML Médias de Capture qui vous permet de prendre des photos avec votre appareil photo ou sélectionnez-en une:
<input type="file" accept="image/*">
Voici comment cela fonctionne sur iOS 10:
Android 3.0+ et Safari sur iOS10.3+ également en charge la
capture
attribut qui est utilisé pour accéder directement à la caméra.<input type="file" accept="image/*" capture>
capture="camera"
(String) etaccept="image/*;capture=camera"
(Paramètre) faisaient partie de l'ancien spécifications et ont été remplacés par descapture
(Boolean) le W3C Candidat Recommandation.Documentation à l'appui: ce 2013 O'Reilly livre et mes tests
capture
au lieu decapture="camera"
. Curieux de savoir ce périphérique & version d'Android.Juste pour mettre à jour ce, la norme est maintenant:
pour accéder à l'environnement-face (à l'arrière) de la caméra, et
pour l'utilisateur face à l'avant de la caméra. L'accès à la vidéo, remplacer "vidéo" pour "l'image" dans le nom.
Testé sur iPhone 5c, iOS 10.3.3, firmware 760, fonctionne très bien.
https://www.w3.org/TR/html-media-capture/
eh bien, il ya de nouvelles fonctionnalités de HTML5 pour accéder à l'native de l'appareil photo - "getUserMedia API"
REMARQUE: HTML5 peut gérer la capture de photos à partir d'une page web sur les appareils Android (au moins sur les versions les plus récentes, géré par le Nid d'OS; mais il ne peut pas le manipuler 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 AFFICHER les NAVIGATEURS QUI le prend 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.AppMobi SDK HTML5 promise, l'accès natif les fonctionnalités de l'appareil - y compris la caméra à partir d'un basé sur le HTML5 app, mais n'est plus la filiale de Google. Au lieu de cela, essayez de le Basé sur le HTML5 réponses dans ce post.
Il convient de noter que les fonctions de sécurité ont été mises en œuvre qui requièrent l'application pour être exécuté localement sous localhost, ou par l'intermédiaire du protocole SSL pour GetUserMedia() fonctionne.
J'ai découvert cela en essayant plusieurs démos disponibles et a été déçu quand ils n'ont pas de travail! Voir: De Nouvelles Restrictions De Sécurité
Je ne pense pas que vous le pouvez, il est une W3C projet de l'API d'obtenir l'audio ou de la vidéo, mais il n'y a pas de mise en œuvre encore sur l'un des principaux mobiles de l'OSs.
Deuxième meilleurLa seule option est d'aller avec Dennis suggestion d'utiliser PhoneGap. Cela signifie que vous devez créer une application native et l'ajouter à l'application mobile store.Je ne connais pas de moyen d'accéder à une caméra de téléphone mobile à partir du navigateur web sans mécanisme supplémentaire (c'est à dire Flash ou un certain type de conteneur qui permet d'accéder au matériel de l'API)
Pour ce dernier d'avoir un coup d'oeil à PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html
Avec cela, vous devriez être en mesure d'accéder à la caméra, au moins sur iOS et appareils Android.
Vous aurez envie d'utiliser getUserMedia pour accéder à la caméra.
Ce tutoriel décrit les principes de base de l'accès à un appareil photo à 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 iOS dans Safari ne.