WebGazer.js : détecter le regard des visiteurs de votre site Web
Grâce à cette bibliothèque JavaScript

Le , par vermine, Responsable JavaScript & AJAX
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.


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


 Poster une réponse

Avatar de MaximeCh MaximeCh - Membre actif https://www.developpez.com
le 27/05/2016 à 15:33
Je trouve ça sinistre et ai, comme le patron du FBI, une carte de visite pour masquer ma cam...
Avatar de sekaijin sekaijin - Expert éminent https://www.developpez.com
le 27/05/2016 à 16:10
la mienne est au cas ou tournée vers le jardin.

A+JYT
Avatar de Nicokroox Nicokroox - Nouveau Candidat au Club https://www.developpez.com
le 27/05/2016 à 17:22
la mienne est....

ah c'est vrai j'en ai pas !
Avatar de Metalman Metalman - Membre expert https://www.developpez.com
le 27/05/2016 à 22:02
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 ?!
Avatar de daimebag daimebag - Membre du Club https://www.developpez.com
le 27/05/2016 à 23:14
Réjouissant!
Avatar de GilbertLatranche GilbertLatranche - Membre actif https://www.developpez.com
le 27/05/2016 à 23:24
Citation Envoyé par Metalman  Voir le message
...!

But it's webscale !!
Avatar de zecreator zecreator - Membre éprouvé https://www.developpez.com
le 28/05/2016 à 11:23
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.

Citation Envoyé par Metalman  Voir le message
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.

Avatar de timouneu timouneu - Candidat au Club https://www.developpez.com
le 28/05/2016 à 14:46
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
Avatar de rsuinux rsuinux - Membre régulier https://www.developpez.com
le 30/05/2016 à 10:27
@timoneu:
Votre remarque est tout à fait pertinente.
Il reste à trouver l'inverse: entrer des données, quelle qu'elles soient, par ce biais!
Avatar de zecreator zecreator - Membre éprouvé https://www.developpez.com
le 30/05/2016 à 14:07
Citation Envoyé par timouneu  Voir le message
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é.
Offres d'emploi IT
Expert Technico Fonctionnel Sharepoint H/F
Safran - Ile de France - Corbeil (91)
Responsable de lot / architecte fpga H/F
Safran - Ile de France - Éragny (95610)
Responsable de projet logiciel H/F
Safran - Ile de France - Éragny (95610)

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