Prendre une photo en html5

J'ai lu beaucoup de moyens pour acquérir une image à partir d'une page html5.
Je ne sais toujours pas ce qui est le mieux pour mes besoins:

  • un large soutien pour les navigateurs et os: au moins: chrome, firefox, android par défaut, safari
  • Je n'ai pas besoin en temps réel d'acquisition. L'utilisateur doit appuyer sur un bouton pour prendre une photo, demander au système de caméra de l'application

Il existe au moins trois solutions :

  • <input type="file" accept="image/*;capture=camera">
  • Navigator.getUserMedia() (il semble obsolète)
  • MediaDevices.getUserMedia() (il semble expérimental)

De toute façon, je vois beaucoup d'exemples pour intégrer la caméra dans la page (w/getUserMedia) donc je ne sais pas si je peux compter uniquement sur la première méthode.

getUserMedia n'est pas obsolète, il a juste changé de nom pour navigator.mediaDevices.getUserMedia. Si vous voulez prendre des photos en haute résolution sur un téléphone, rendez-vous avec #1, depuis getUserMedia est limitée à la résolution de la vidéo de l'atm.
Ok, merci. J'ai été confondu par ce lien: developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia je ne comprenais pas, il a juste changé le nom, mais c'est la même classe!
Elle renvoie une promesse plutôt que de prendre de la réussite et de l'échec des rappels, mais autrement, c'est la même chose.

OriginalL'auteur Mark | 2016-06-29

  1. 9

    Utilisant WebRTC de l'API getUserMedia va couvrir tous les navigateurs modernes en dehors de Safari: http://caniuse.com/#feat=stream

    Ici est un exemple de page qui utilise getUserMedia pour prendre une photo (avec un lien vers un page décrivant le code). La plupart des getUserMedia démos afficher le flux vidéo dans un visible espace de la toile, mais ce n'est pas obligatoire. Vous pouvez capturer une image à l'aide de getUserMedia sans afficher le flux vidéo dans un visible toile.

    Malheureusement, Apple a été lents à adopter les Api WebRTC donc je pense que le fichier d'entrée de la balise est sur le meilleur de votre peut espérer, à moins que vous êtes prêt à utiliser quelque chose comme Cordoue. Ici est une description de la façon d'utiliser le fichier d'entrée de la balise.

    La Media Capture d'API est candidat à une recommandation qui signifie qu'il est sur son chemin pour devenir un standard, cependant, je ne sais pas du tout les navigateurs qui implémentent la recommandation du W3C en cours (à l'aide d'une simple capture d'attribut dans la balise d'entrée). Le <input type="file" accept="image/*"> style semble seulement être pris en charge par les navigateurs mobiles.

    En résumé, si vous voulez avoir une large prise en charge du navigateur dans le proche avenir, vous allez avoir besoin d'un soutien à la fois des méthodes jusqu'à ce qu'Apple lance l'appui Api WebRTC ou jusqu'à ce que les autres navigateurs de bureau, commencer à soutenir les Médias de Capture de l'API (ou la variante avec la capture de l'attribut qui est actuellement pris en charge par les navigateurs mobiles).

    Autant je comprends l'API getUserMedia permet d'intégrer la sortie de la caméra dans la page web. Parce que je n'ai pas besoin d'incorporer quelque chose, mais juste d'acquérir et de processus en arrière-plan) d'une image, je pense que la première méthode est encore mieux.
    J'ai mis à jour ma réponse. Si vous voulez une large prise en charge du navigateur dans un avenir proche, malheureusement, vous aurez probablement besoin de soutien les deux méthodes. À moins que votre utilisation est juste mobile, auquel cas la balise d'entrée de la méthode peut suffire (même si elle peut changer légèrement à un certain point, compte tenu de la recommandation du W3C). J'ai aussi noté dans ma mise à jour getUserMedia n'a pas besoin d'afficher la vidéo en direct. La plupart des démos de le montrer parce que c'est plus intéressant de cette manière à des fins de démonstration.
    Ok, bien que mon utilisation est uniquement pour les mobiles, il est intéressant de savoir getUserMedia n'a pas besoin de montrer la vidéo en direct.
    Safari dans iOS11 et macOS high sierra va venir avec getUserMedia de soutien.

    OriginalL'auteur kanaka