Comment accéder à l'appareil photo avec juste du HTML ?

En HTML, vous pouvez utiliser un <input type="file"> pour accéder directement à l’appareil photo de votre smartphone.

La solution est assez simple : il suffit de définir l’attribut capture de cet <input>.

Cet attribut peut prendre deux valeurs : soit user, soit environment. Avec environment, vous pourrez accéder à l’appareil photo / vidéo de votre téléphone. Avec user, vous pourrez faire un selfie :)

<label for="environment">Capture environment:</label>
  <br>
  <input
    type="file"
    id="environment"
    capture="environment"
    accept="video/*"
  >
  <br><br>
  <label for="user">Capture user:</label>
  <br>
  <input
    type="file"
    id="user"
    capture="user"
    accept="image/*"
  >

Capture environment:


Capture user:

Ces attributs ne sont pas fonctionnels sur desktop, ils sont avant tout utiles sur mobile :

Et si par malheur, votre navigateur n’était pas compatible, vous retomberez sur l’upload de fichier classique.

A partir du moment où vous avez enregistré une photo ou une vidéo directement depuis votre page, elle est accessible comme sur un upload de fichier classique, et vous pourrez ainsi l’envoyer vers votre serveur. Vous pourrez également l’exploiter en JS, via l’API FileReader.

Pas mal non ?

(Crédit photo Matthias Oberholzer / Unsplash)