- OCTO talks ! - http://blog.octo.com/ -

jKinect : « kinectify the web »

Tweet [1]

Comme dirait Steve Ballmer : “Kinect, Kinect, Kinect”.

Si vous n’avez jamais entendu parler de Kinect, vous étiez surement dans une cave durant les 2 dernières années (je ne vous en veux pas, dans ce cas lisez Kinect: Tour d’horizon tout naturellement [2]).

En début d’année (février 2012), Kinect s’est invité officiellement sur les PC grâce au SDK Kinect for Windows [3]. Le SDK permet de créer des applications Windows (client lourd) utilisant Kinect. Les développeurs profitent d’un SDK mis à jour régulièrement par Microsoft et qui est passé dernièrement en version 1.6 [4].

Comme tout SDK propriétaire, son utilisation nécessite un apprentissage. La marche est encore plus haute, si le développeur ne maîtrise pas déjà le langage d’utilisation des APIs (.Net: C++, C#).

Bien dommage, à une époque où les interfaces Web sont de plus en plus présentes et les technologies sous-jacentes de plus en plus populaires.

Et s’il était possible d’intéragir avec un site web directement depuis Kinect ?

Est-ce que cela serait techniquement possible ?

Dans quels cas cela aurait-il un sens ?

Pour quels usages ?

A la première question, il est facile de répondre:

OUI ! Il est possible d’intéragir avec un site web avec Kinect

Il existe pour cela de nombreux frameworks qui interfacent les pages web avec Kinect via un pont Javascript – API Kinect. On peut citer DepthJS [5] du MIT, ZigFu [6], KinectJS [7], Kinect WebSockets [8] et tout dernièrement Kinected Browser de Microsoft [9].

J’ai consacré mon temps de R&D chez OCTO ces derniers temps à la création d’un tel framework, nommé jKinect [10], qui sera très prochainement disponible en open-source. Si les autres frameworks cités ont opté pour une des approches serveur local (fig.1) ou applet (fig.2), j’ai pour ma part choisi une troisième voie: le navigateur dédié (fig.3)

[11]

Fig.1 Serveur local exposant les flux Kinect à la page web

[12]

Fig.2 Applet faisant le pont entre la page web et Kinect

[13]

Fig.3 Navigateur dédié intégrant le pilotage Kinect et le pont avec les pages web

J’ai choisi cette approche pour plusieurs raisons:

Mais cela a un inconvénient : nous sommes « bridés » au navigateur Internet Explorer embarqué dans l’application .Net. Ce point n’est pas nécessairement gênant dans la mesure où le but n’est pas de naviguer le tout dernier site HTML5/CSS3 à la mode et qui ne fournira pas d’expérience utilisateur adaptée Kinect.

Dans quel contexte utiliser jKinect ?

Comment cela fonctionne ?

Il faut tout d’abord référencer l’API JavaScript jKinect qui est en charge de faire le pont avec le code C# communiquant avec Kinect:

<script type="text/javascript" src="http://jkinect.com/js/jkinect.js"></script>

L’API jKinect permet de s’abonner très simplement aux évènements Kinect:

jKinect.bind("HandUp", callback_function );

Voici un exemple complet d’utilisation qui affiche le nombre de personnes devant Kinect (PlayersCount) et indique si une main est levée (HandUp) ou si un utilisateur a déplacé sa main de droite à gauche (SwipeLeft).

<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="http://jkinect.com/js/jkinect.js"></script>
  <script type="text/javascript">
    $().ready(function () {
      jKinect.initKinect(function () {
        jKinect.bind("HandUp", function() {
          $("#gesture").html("Hand Up");
        });
        jKinect.bind("SwipeLeft", function() {
          $("#gesture").html("We are moving left");
        });
        jKinect.bind("PlayerStatus", function(status) {
          $("#status").html(status.PlayersCount + " users");
        });
      });
    });
  </script>
</head>
<body>
  <div id="status">
  </div>
  <div id="gesture">
  </div>
</body>
</html>

En utilisant le socle jKinect, le développeur a accès en JavaScript aux informations brutes du capteur Kinect (coordonnées 3D des jointures du squelette): ceci permet une gestion précise des interactions Kinect.

Le développeur a également accès à des informations plus abstraites, orientées NUI (Natural User Interface) telles que les « gestures ». Ces principales gestures (swipe right, swipe left, scroll, hands joined, hand up…) sont déjà implémentées dans jKinect.

Pour plus d’informations, consultez le site http://jKinect.com [14].

Exemples d’application

Voici un exemple permettant d’adapter l’affichage d’une page web en fonction de la position de l’utilisateur.
Tout d’abord, mettons-nous en situation:
Imaginez-vous sur votre site préféré (réseau social, site d’actualité…).
Vous êtes concentré et vous lisez avec attention un passage intéressant.
Naturellement, vous vous penchez vers l’écran (surtout si vous avez des problèmes de vue).
Maintenant, le passage important est lu, vous sentez le besoin de vous décontracter en reposant votre dos sur le dossier de la chaise.
Vous avez  maintenant des difficultés à lire votre site car tout est écrit trop petit (sauf si vous passez à la chirurgie laser entre temps).

La séquence suivante montre comment le rendu visuel du site s’adapte à la distance écran-visage:

[15]

L’affichage est dense et complet

écran-visage: 30cm

[16]

Le texte est légèrement plus grand et certains éléments d’interface ont disparu

écran-visage: 45cm

[17]

Le texte est vraiment plus grand et seuls les contenus importants sont affichés

écran-visage: 60cm

Magique non ? L’effet que vous venez de voir est réalisable grâce jKinect qui permet d’injecter les quelques lignes ci-dessous dans la page:

function adjustLayout(distance)
{
  // adjust font-size to distance (in cm)
  $(".uiStreamMessage").css("font-size", (distance * 50.0));
  if (distance >= 0.60) {
    $("div#leftCol").hide();      // hide left menu
    $("#rightCol").hide();        // hide chat and stream
    $("#contentArea").width(768); // maximize area
  }
  else if (distance >= 0.45) {
    $("div#leftCol").hide();      // hide left menu
    $("#rightCol").show();        // show chat and stream
    $("#rightCol").width(300);    // set width
    $("#contentArea").width(655); // maximize area
  }
  else { // default usage
    $("div#leftCol").show();        // show left menu
    $("#rightCol").show();          // show chat and stream
    $("#rightCol").width(210);      // set width
    $("#contentArea").width(511);   // restore area
  }
}
$().ready(function () {
   jKinect.initKinect(function () {
     jKinect.bind("PlayerStatus", function(status) {
       adjustLayout(status.Position.Z);
     });
   });
});

A OCTO nous avons développé un prototype d’écran d’accueil interactif qui utilise cet effet non pas pour modifier l’apparence mais le contenu. L’utilisateur est poussé à l’intéraction grâce à un contenu engageant: une catch phrase devient un pitch qui devient un contenu détaillé intéractif à mesure que l’utilisateur s’approche de l’écran.

Dernier exemple, fournir des services de vente sur mesure aux internautes: le site d’un lunetier pourrait proposer d’essayer virtuellement une paire de lunettes adaptée à la forme du visage directement depuis l’ordinateur du prospect. Ce principe peut être évidemment transposé à un magasin de vêtements ou de mobilier.

Est-ce qu’il faut y aller ?

Oui ! En rendant Kinect utilisable par les technologies Web, les applications Kinect deviennent légères (couche présentation) et peuvent utiliser des services mutualisés avec d’autres supports. De plus, Kinect profite des processus rapides de développement et de déploiement du monde du Web.

Cependant, faire une application Kinect n’est pas un but en soi, il faut évaluer la pertinence par rapport au besoin réel (pour un usage bureautique, remplacer le tactile par du gestuelle n’a pas de sens). De plus, il ne faudra pas essayer de transposer les patterns ergonomiques d’un support à l’autre (utiliser Kinect sur des interfaces faites pour la souris ou tactile sera douloureux).

Le meilleur usage de Kinect n’est pas forcément dans l’intéraction applicative, couplé à la reconnaissance/synthèse vocale il est envisageable d’avoir un usage sans écran (notamment pour la domotique ou l’aide à la personne). Mais c’est un sujet à part entière [18] qui dépasse l’enjeu de cet article.

Une utilisation appropriée de Kinect peut mener à la réalisation d’applications profitant du « User Responsive Design » (terme que je viens d’inventer pour vous à partir du Responsive Design très « à la mode » en ce moment), c’est-à-dire des sites qui s’adaptent non seulement au support d’affichage mais également aux postures physiques et même aux critères morphologiques de l’utilisateur. Imaginez : le mode « lecture » s’active quand vous vous décontractez en arrière sur votre chaise, votre ordinateur se verrouille automatique quand vous vous éloignez, Facebook qui se ferme automatiquement quand votre patron arrive derrière vous, la luminosité de l’écran qui s’adapte à la fatigue qui se lit sur votre visage…

Cela fait rêver ;)