IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Publications (X)HTML et CSS Discussion :

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


Sujet :

Publications (X)HTML et CSS

  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 647
    Points : 91 421
    Points
    91 421
    Billets dans le blog
    20
    Par défaut HTML Media Capture : prenez des photos depuis un champ de formulaire
    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 - Visualiser dans une fenêtre à part
    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 ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    novembre 2012
    Messages
    3 299
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2012
    Messages : 3 299
    Points : 9 688
    Points
    9 688
    Par défaut
    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
    One Web to rule them all

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 647
    Points : 91 421
    Points
    91 421
    Billets dans le blog
    20
    Par défaut
    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.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    novembre 2012
    Messages
    3 299
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2012
    Messages : 3 299
    Points : 9 688
    Points
    9 688
    Par défaut
    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.
    One Web to rule them all

  5. #5
    Futur Membre du Club
    Femme Profil pro
    ???????????????
    Inscrit en
    janvier 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Femme

    Informations professionnelles :
    Activité : ???????????????
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : janvier 2008
    Messages : 13
    Points : 9
    Points
    9
    Par défaut
    A essayer.

Discussions similaires

  1. [HTML 5] HTML Media Capture : prenez des photos depuis un champ de formulaire
    Par Bovino dans le forum Balisage (X)HTML et validation W3C
    Réponses: 0
    Dernier message: 16/01/2014, 15h13
  2. [XL-2007] Capture d'image -photo- depuis une webcam
    Par Vakhyw dans le forum Macros et VBA Excel
    Réponses: 1
    Dernier message: 17/12/2013, 11h21
  3. HTML Media Capture sur Android
    Par Gr3ven dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 23/04/2013, 10h55
  4. [phpMyAdmin] Comment stocker des photos telecharger lors d'un formulaire dans phpMyAdmin ?
    Par razily dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 2
    Dernier message: 16/02/2012, 09h03
  5. Réponses: 3
    Dernier message: 27/09/2006, 19h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo