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

Version imprimable

27/05/2016, 15h04
vermine

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

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.

:fleche: Le site officiel.

Et vous ?

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

http://www.developpez.com/template/kit/kitinfo.png Retrouver les cours et tutoriels sur les frameworks JavaScript.
27/05/2016, 15h33
MaximeCh

Je trouve ça sinistre et ai, comme le patron du FBI, une carte de visite pour masquer ma cam...
27/05/2016, 16h10
sekaijin

la mienne est au cas ou tournée vers le jardin.

A+JYT
27/05/2016, 17h22
Nicokroox

la mienne est....

ah c'est vrai j'en ai pas ! :roll:
27/05/2016, 22h02
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 ?!
27/05/2016, 23h14
daimebag

Réjouissant! :aie:
27/05/2016, 23h24
GilbertLatranche

Citation:

Envoyé par Metalman

...!

But it's webscale !!
28/05/2016, 11h23
zecreator

2 pièce(s) jointe(s)

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

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.

Pièce jointe 211078 Pièce jointe 211080
28/05/2016, 14h46
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 ;)
30/05/2016, 10h27
rsuinux

@timoneu:
Votre remarque est tout à fait pertinente.
Il reste à trouver l'inverse: entrer des données, quelle qu'elles soient, par ce biais!
30/05/2016, 14h07
zecreator

Citation:

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é.
03/06/2016, 12h11
Captain_Walker

@timoneu :

J'ai eu la même réaction que toi en lisant l'article ! :ccool:
03/06/2016, 12h52
SpaceFrog

et si je louche ?
03/06/2016, 17h42
sekaijin

Citation:

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 ;)

Je ne suis absolument pas d'accord.
Une lib js dans la page n'est pas destiné à cela.
pour faire des outils qui s'adaptes au différents contextes et utilisateur cela se passe au niveau de la machine de l'os et du navigateur

Que nous devions tous faire un effort sur l'accessibilité c'est un fait. ce n'est jamais acquis. Que des outils suivent le regard pour piloter des action de l'utilisateur cela relève d'un choix (même s'il est contraint par un handicap) d'un utilisateur. ce ne peux en aucun cas être celui d'un dévelopeur de page web.

Beaucoups de gens sont contraints d'utiliser des navigateur qui remplace les feuilles CSS. Parce que les sites ne savent pas s'adapter à tous les problèmes de vue de tous ceux qui en ont. et jamais un web développeur pourra être exhaustif. deux daltoniens dans le même bureau deux réglages différents.

Pour ce qui est de la motricité la diversité est telle que croire qu'une lib javascript va résoudre une partie du problème c'est se mettre de doigt dans l'oeil. je pense même que ce peut être pire. car à coup d'effort important on arrive à répondre à certains besoins. J'imagine le gars qui c'est équipé de eyestracker pour piloter sa machine et qui arrive sur ne page contenant ce truc et là impossible de reprendre la main enfin l'oeil! le web développeurs capture les mouvements et le comme la page web n'a accès qu'a son contenu il possible d'en sortir.

Je persiste pour moi ce truc là ne peut servir qu'à espionner. pour ce qui est de palier des handicaps ce ne doit pas être fait dans la page mais sur la machine.

A+JYT
04/06/2016, 12h01
zecreator

Citation:

Envoyé par sekaijin

...

Pfiouuu... Alors dans l'ordre.

1. Il est tant d'avoir une meilleure opinion du développement web. Le développement web ne s'arrête pas uniquement à la réalisation de sites. Le javascript, le langage HTML et les navigateurs en général ont pris en maturité aujourd'hui, et il est tout à fait possible de se passer de langages tel que C, C++ ou Java pour développer des applications performantes "full web". Ceux qui pensent que le développement web est limité n'ont jamais vraiment mis les mains dedans, et vont avoir rapidement des soucis à se faire dans les années (les mois à venir). Le contexte logiciel étant de plus en plus en mode SAAS, et dématérialisé (fini les déploiements lourding chez le client, il n'en veut plus), il va être grand tant de prendre conscience que tout va se faire par le web très bientôt. Le C, C++ et Java seront juste utilisés pour les moteurs métiers, et rien d'autre.

2. L'accès à la web cam depuis le navigateur est soumis à une validation de l'utilisateur. Chaque fois que tu vas sur une page nécessitant l'utilisation de la cam, une autorisation t'es demandée. Si tu refuses, il ne tient qu'au développeur de prévoir une utilisation classique de sa page. Je ne vois pas où il y aurait un "bloquage" de l'utilisation.

3. En quoi le javascript utilisant la web cam serait plus à même de nous espionner qu'un autre langage utilisant la web cam ? Es-tu sûr que lorsque tu prends une photo avec ton smartphone, personne n'est en train de te regarder à cet instant ? Avec cet état d'esprit, autant ne pas avoir de web cam du tout. Et puis, autant ne pas se connecter, parce que du coup, on peut regarder ce que je fais sur le réseau...

Il faut savoir que le premier hacker à faire du mal à l'internaute, c'est soit-même, en ne protégeant pas suffisamment sa machine et en téléchargeant des logiciels douteux.
05/06/2016, 11h41
sekaijin

1. Pfiouuuu que de deductions hâtives. je dois être un de ceux qui prone le plus les qualités de JS.
et quand je dis qu'une telle lib ne peut avoir pour but de palier les handicap c'est parce qu'elle est destiné à être embarquée dans des pages web et qu'alors s'applique tant de restriction que cet usage est compromis.
Cela n'empêche pas que ce soit une techno intéressante. par exemple pour écrire un plugin FF ou chrome pour justement amené de l'aide au certaines personnes.

2. heureusement qu'il y a des restriction mais l'espionage en question n'est pas de capturer ton image et de regarder ce que tu fais derrière ta camera. que peut faire une telle librairie ? suivre le regard de l'utilisateur et déduire ce que point le regard. et que peut elle faire avec cette info ? ... hà oui c'est con alimenter les gisement de donnée sans demander la permission. alors j'ai le choix accepter d'activer ma cam pour réserver mon billet d'avions est laisser le site collecter les info sur les pub qui ont accroché mon regard où ne pas l'activer et ne pas réserver.

3. en quoi ce serait plus nous espionner parce qu'il est extrêmement difficile de contrôler ce que regarde nos yeux alors que je peut très facilement ne pas cliquer sur une pub.

4. je suis entièrement d'accord le premier bug en informatique se situe entre la chaise et le clavier.

A+JYT