Prendre une photo de html5
J'ai lu de nombreuses façons d'acquérir une image à partir d'une page html5. Je ne sais toujours pas quel est le meilleur pour mes besoins:
- large prise en charge des navigateurs et des systèmes d'exploitation: au moins: chrome, firefox, Android par défaut, safari
- Je n'ai pas besoin d'une acquisition en temps réel. L'utilisateur doit appuyer sur un bouton pour prendre une photo, en demandant l'application caméra système
Il existe au moins trois solutions:
<input type="file" accept="image/*;capture=camera">Navigator.getUserMedia()(il semble obsolète)MediaDevices.getUserMedia()(cela semble expérimental)
Quoi qu'il en soit, je vois beaucoup d'exemples pour intégrer l'appareil photo dans la page (w/ getUserMedia) Donc je ne sais pas si je peux me fier uniquement à la première méthode.
L'utilisation de l'API getUserMedia WebRTC va couvrir tous les navigateurs modernes à l'exception de Safari: http://caniuse.com/#feat=stream
Ici est un exemple de page qui utilise getUserMedia pour prendre une image fixe (avec un lien vers un page décrivant le code). La plupart des démos getUserMedia montrent le flux vidéo dans une zone de canevas visible, mais ce n'est pas obligatoire. Vous pouvez capturer une image à l'aide de getUserMedia sans afficher le flux vidéo dans un canevas visible.
Malheureusement, Apple a été lent à adopter les API WebRTC, donc je pense que la balise d'entrée de fichier est la meilleure que vous puissiez espérer à moins que vous ne souhaitiez utiliser quelque chose comme Cordova. ici est une description de l'utilisation de la balise d'entrée de fichier.
Media Capture API est une recommandation candidate, ce qui signifie qu'il est en passe de devenir une norme, cependant, je ne connais aucun navigateur qui implémente la recommandation W3C actuelle (en utilisant un attribut de capture nu dans la balise d'entrée). Le <input type="file" accept="image/*"> Le style ne semble actuellement pris en charge que par les navigateurs mobiles.
En résumé, si vous souhaitez avoir une large prise en charge de navigateur dans un avenir proche, vous devrez prendre en charge les deux méthodes jusqu'à ce que Apple commence à prendre en charge les API WebRTC ou jusqu'à ce que d'autres navigateurs de bureau commencent à prendre en charge Media Capture API (ou la variante avec l'attribut de capture actuellement pris en charge par les navigateurs mobiles).