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 avec l'attribut capture

Le , par Bovino

80PARTAGES

3  0 
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).
Cette nouvelle fonctionnalité vous semble-t-elle utile ?
Dans quel type d'application envisageriez-vous de l'utiliser ?

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

Avatar de SylvainPV
Rédacteur/Modérateur https://www.developpez.com
Le 16/01/2014 à 17:59
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
0  0 
Avatar de Bovino
Rédacteur https://www.developpez.com
Le 17/01/2014 à 16:41
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.
0  0 
Avatar de SylvainPV
Rédacteur/Modérateur https://www.developpez.com
Le 18/01/2014 à 23:07
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.
0  0 
Avatar de find12
Futur Membre du Club https://www.developpez.com
Le 17/03/2014 à 22:28
A essayer.
0  0