Newsletter Developpez.com

Inscrivez-vous gratuitement au Club pour recevoir
la newsletter hebdomadaire des développeurs et IT pro

HTML Media Capture :
Prenez des photos depuis un champ de formulaire avec l'attribut capture

Le , 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 : 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 ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de SylvainPV 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
Avatar de Bovino 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.
Avatar de SylvainPV 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.
Avatar de find12 find12 - Futur Membre du Club https://www.developpez.com
le 17/03/2014 à 22:28
A essayer.
Offres d'emploi IT
Développeur WEB PHP F/H
VACALIANS GROUP - Languedoc Roussillon - SETE (34)
RESPONSABLE WEB ANALYTICS F/H
VACALIANS GROUP - Languedoc Roussillon - SETE (34)
Développeur Web FULL-STACK
VACALIANS GROUP - Languedoc Roussillon - SETE (34)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -