HTML Media Capture :

Prenez des photos depuis un champ de formulaire avec l'attribut capture

Le 2014-01-16 15:13:39, par Bovino, Rédacteur

HTML Media Capture et l'attribut capture
Mettez à profit les périphériques de votre mobile pour remplir les champ file

HTML5 apporte de nombreuses nouvelles fonctionnalités, notamment concernant les formulaires.

Nous allons voir dans ce billet la spécification HTML Media Capture.
Celle-ci permet d'élargir les capacités des champs de formulaires de type file.
Jusqu'à présent, les champs de formulaires de type file permettaient juste d'ouvrir une fenêtre pour récupérer dans le système de fichiers celui (ou ceux) à envoyer avec le formulaire.
Il est dorénavant possible d'utiliser ces mêmes champs pour utiliser l'un des périphériques de capture (audio, vidéo ou image) pour créer le fichier à envoyer.

Comment le mettre en œuvre ?
La mise en place d'un tel système est particulièrement simple.
Il suffit d'ajouter au champ un attribut capture et le tour est joué ! Cet attribut étant de type booléen, c'est-à-dire que sa seule présence (sans valeur ou quelle que soit sa valeur) suffit à indiquer au navigateur le comportement souhaité.

Enfin... il suffit... pas tant que ça en fait.
En réalité, l'attribut capture n'est pas suffisant, en effet, ce seul attribut ne permet pas de savoir quel type de media est demandé, donc quel périphérique utiliser.
Il est donc nécessaire de préciser aussi l'attribut accept avec une valeur correspondant au type mime souhaité.

Notez que l'attribut capture n'oblige pas l'utilisateur à utiliser un périphérique : il lui est demandé s'il veut envoyer un fichier existant ou s'il veut utiliser le périphérique approprié.

Exemples.
Voici les trois cas possibles d'utilisation à l'heure actuelle :

Code html :

1
2
3
4
5
6
7
8
9
<form action="..." method="post" enctype="multipart/form-data"> 
    <!-- Pour une image (appareil photo) --> 
    <input type="file" name="image" accept="image/*" capture> 
    <!-- Pour une vidéo (caméra) --> 
    <input type="file" name="video" accept="video/*" capture> 
    <!-- Pour un son (micro) --> 
    <input type="file" name="son" accept="audio/*" capture> 
    <input type="submit" value="Upload"> 
</form>

Compatibilité.
À l'heure actuelle, seuls les navigateurs pour mobiles et tablettes semblent supporter cette fonctionnalité.

Voir la table de compatibilité pour mobiles.
Mais gageons que les versions desktop des navigateurs vont l'implémenter rapidement.

Voir les spécifications du W3C (comprenant des exemples plus avancés).
Cette nouvelle fonctionnalité vous semble-t-elle utile ?
Dans quel type d'application envisageriez-vous de l'utiliser ?

Discussion forum

4 commentaires

SylvainPV
Rédacteur/Modérateur

Notez que l'attribut capture n'oblige pas l'utilisateur à utiliser un périphérique : il lui est demandé s'il veut envoyer un fichier existant ou s'il veut utiliser le périphérique approprié.

Ce qui est déjà le cas quand on ne précise pas cet attribut capture (sur mon smartphone Android en tout cas). Donc je ne vois pas bien la différence

le 16/01/2014 à 17:59
Bovino
Rédacteur

Certes, certains navigateurs proposent cette possibilité sans avoir besoin de l'attribut capture (ceci dit, uniquement pour les photos et vidéos d'après ce que j'ai pu lire). Notamment le navigateur Andoid (Webkit) depuis Android OS 3.0 et iOS Safari.

Mais ce n'est pas le cas des autres navigateurs Mobiles qui implémentent cette fonctionnalité en respectant la spécification.

le 17/01/2014 à 16:41
SylvainPV
Rédacteur/Modérateur

En fait, en regardant de plus près la spec du W3C:

When the capture attribute is specified, the user agent should invoke a file picker of the specific capture control type.

In this specification, the term capture control type refers to a specialized type of a file picker control that is optimized, for the user, for directly capturing media of a MIME type specified by the accept attribute, using a media capture mechanism.

; je ne pense pas que l'attribut capture est prévu pour envoyer un fichier "existant", dans le sens capturé avant le clic sur l'input. C'est le mot "directly" qui me fait croire cela, bien que cela reste un peu flou.

le 18/01/2014 à 23:07
find12
Futur Membre du Club

A essayer.

le 17/03/2014 à 22:28