Proj-2014-2015-SmartClassRoom

=Présentation=

=Objectifs=

Tiled display avec les tables
Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des table. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

Les objectifs d’interactions à réaliser dans notre interface sont les suivants:

 * pouvoir déplacer les fenêtres
 * zoomer / dezoomer sur plusieurs tables
 * afficher un contenu statique, puis le répliquer dans les différentes fenêtres
 * une touche pour un affichage plein écran (sur toutes les tables)
 * la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
 * réaliser des applications en commun (par exemple un cours d’anatomie)
 * proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
 * prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale = Chaque client affiche une page web (interface) connectée à un serveur Exress (NodeJS). = Interface Graphique = = Implémentation des fonctionnalités =

Module NowJS : https://github.com/Flotype/now/
Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel. Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

Module node-demux : https://github.com/tmarrinan/node-demux
Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg
Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

Problèmes rencontrés:
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel. Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

Conception :
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé : D’utiliser le module node-demux pour délivrer les images D’utiliser le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la video) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client. A noter que ce module peut délivrer la partie audio d’un fichier video à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchronizer les données lorsqu’un utilisateur avance ou recule la video.

jquery.pep.js : http://pep.briangonzalez.org/   https://github.com/briangonzalez/jquery.pep.js
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment losque l’utilisateur lache l’objet.