Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

HTML Media Capture : prenez des photos depuis un champ de formulaire

Le , par Bovino

0PARTAGES

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 : Sélectionner tout
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).

Une erreur dans cette actualité ? Signalez-le nous !