Developpez.com - Rubrique JavaScript

Le Club des Développeurs et IT Pro

WebGazer.js : détecter le regard des visiteurs de votre site Web

Grâce à cette bibliothèque JavaScript

Le 2016-05-27 15:04:28, par vermine, Expert éminent sénior
WebGazer.js est une bibliothèque JavaScript qui utilise la webcam pour détecter la direction du regard des visiteurs sur le site Web. L'objectif est de déterminer les éléments que les visiteurs parcourent des yeux.

Conçu par Brown HCI, une équipe qui étudie l’interaction des utilisateurs avec les ordinateurs, l'outil est entièrement écrit en JavaScript et, avec seulement quelques lignes de code, il peut être intégré dans n’importe quel site Web. Il s’exécute entièrement dans le navigateur client, donc aucune donnée vidéo ne doit être envoyée à un serveur.

La bibliothèque utilise l'API getUserMedia/Stream et est ainsi compatible avec les navigateurs principaux sans qu'un matériel particulier ne soit nécessaire.

Fort heureusement, et c'est de toute façon en partie géré par les navigateurs consciencieux, WebGazer.js s’exécute uniquement si l’utilisateur consent à donner accès à sa webcam. Quoi qu'il en soit, l'API, elle, n'est pas du tout nouvelle. Et l'accès à la webcam depuis du code JavaScript ne date pas d'hier même si ça fait encore débat aujourd'hui.

Voici quelques caractéristiques :

  • calibration automatique selon les mouvements du curseur et les clics ;
  • facile à intégrer dans votre code ;
  • des composants pour la détection des yeux ;
  • des modèles de prévisions sur le mouvement du regard ;
  • la sauvegarde des informations entre sessions via le localstorage ;
  • la possibilité de faire une pause en plein milieu du traçage (en cas de problème de performance sur certaines de vos pages, par exemple).


WebGazer.js peut ouvrir d'autres possibilités d'utilisation. Sur la page d'exemples, il y a même un petit jeu où vos yeux doivent guider une balle !

Mais bon, dès qu'on parle de manipulation de webcam, une partie de la communauté se révolte, par peur, par crainte, par conviction. Gardons à l'esprit que comme toujours, ce ne sont pas les outils qu'on nous donne qui posent problème, c'est ce que nous en faisons.

Le site officiel.

Et vous ?

Que pensez-vous de ce genre d'outils ? En connaissez-vous d'autres ?

Retrouver les cours et tutoriels sur les frameworks JavaScript.
  Discussion forum
15 commentaires
  • timouneu
    Candidat au Club
    au-delà de la nouvelle expérience il faut bien penser que tout le monde ne peut pas bouger ses deux bras, comme par exemple les malades de la maladie de charcot.

    Avoir une solution gratuite et facile à utiliser sur un site web (et pas seulement finalement) c'est tout simplement génial pour ces profils.
    N'oubliez pas qu'il n'y a pas que des gens valident sur terre
  • SpaceFrog
    Rédacteur/Modérateur
    et si je louche ?
  • MaximeCh
    Membre éprouvé
    Je trouve ça sinistre et ai, comme le patron du FBI, une carte de visite pour masquer ma cam...
  • sekaijin
    Expert éminent
    la mienne est au cas ou tournée vers le jardin.

    A+JYT
  • Nicokroox
    Candidat au Club
    la mienne est....

    ah c'est vrai j'en ai pas !
  • daimebag
    Membre du Club
    Réjouissant!
  • GilbertLatranche
    Membre averti
    Envoyé par Metalman
    ...!
    But it's webscale !!
  • zecreator
    Membre expert
    Je trouve cela sympa de proposer ce genre d'interaction. Après, c'est très adapté au PC. Sur mobile, cela me semble difficile. Comme pour tout, il ne faut pas en abuser. Faire tout un site utilisant ce procédé ne me semble pas pertinent.

    Envoyé par Metalman
    Mais mais mais... bousiller les perf' de la navigation web avec du JS et du Flash partout ne suffit leur toujours pas ?!... 2Go de RAM consommés juste pour faire de la pub "efficace", des interactions "MODERNES" avec l'utilisateur (qui déconnent dans 80% des cas), la détection du device pour encore plus déformer les pages et cacher la moitié des options normalement dispos sur PC mais pas sur smartphone, ... ce n'est pas suffisant non...
    Il faut ENCORE plus ralentir tout ça en analysant la webcam (bravo l'API qui va bouffer mes I/O encore plus et mon CPU pour analyser n'importe quoi), et surtout en uploadant ces résultats...

    MAIS ON VA OU ?!
    Je ne sais pas quel type de contenu web tu développes, mais je pense qu'il ne faut pas se braquer sur ce genre de truc. Je trouve ça plutôt bien de proposer une autre expérience web. Pour ma part, depuis que je propose des contenus VR et 3D sur certains de mes sites, j'ai 26% de visites en plus. De même, j'ai mis en place quelques écrans en réalité augmentée (en plaçant des cartes devant la web cam), mais ça marche moins bien. Ce dont tu parles, les problèmes de performances, ne viennent pas QUE des API et moteurs qui sont développés, mais aussi des navigateurs. Certains sont justes bons à afficher du HTML4 de base. Pour exemple, du contenu WebGL a tendance à lagger sur Firefox (qui plante de plus en plus à mesure que l'on avance dans les versions), alors que sous Edge ou Chrome, ça tourne très bien, sans consommation de CPU et de RAM exagérée.

    Captures d'écrans, avec la consommation CPU et RAM lors du lancement de la demo sous Firefox. Mon PC : Windows 8.1 Pro, 8 Go de RAM.

  • rsuinux
    Membre habitué
    @timoneu:
    Votre remarque est tout à fait pertinente.
    Il reste à trouver l'inverse: entrer des données, quelle qu'elles soient, par ce biais!
  • zecreator
    Membre expert
    Envoyé par timouneu
    au-delà de la nouvelle expérience il faut bien penser que tout le monde ne peut pas bouger ses deux bras, comme par exemple les malades de la maladie de charcot.

    Avoir une solution gratuite et facile à utiliser sur un site web (et pas seulement finalement) c'est tout simplement génial pour ces profils.
    N'oubliez pas qu'il n'y a pas que des gens valident sur terre
    Tout à fait vrai. Merci de l'avoir souligné.