Liringlas

Société : GIPSA Lab

Présentation : Développement d'un lecteur vidéo en JavaScript. Ce lecteur est interactif avec suivi d'objets. Chaque objet de la vidéo (personne ou objet dans la vidéo) peut faire l'objet d'effets visuels (surbrillance, luminosité, etc.) et d'interactions à la souris (survol de l'objet ou clic de la souris) appliqués en temps réel.

Fonctionnement :
Le script nécessite la génération préalable d'informations sur les objets pour une vidéo donnée. Si les interactions sont effectuées en temps réel, le suivi d'objet nécessite un logiciel développé en C++, LOLA, qui exporte au format XML ces informations. Ce logiciel a été developpé par mon maître de stage avant ma mission.
Le fichier XML est récupéré ("parsé" dans le jargon) dans le programme. Chaque objet est décrit par un polygone (ensemble de coordonnées de points) pour chaque frame de la vidéo.
On utilise l'élément HTML Canvas pour les effets visuels. Le Canvas est un outil de dessin en JavaScript fonctionnant en Bitmap. Dans notre cas, le Canvas est un peu détourné de son utilisation la plus courante : placé et ajusté au-dessus de la vidéo, il capture puis remplace l'image de la vidéo pour la restituer après traitement. Ces traitements sont effectués pixel par pixel sur la bitmap capturée sur le Canvas.

L'interactivité repose sur la gestion évènementielle. Ces évènements nécessitent de connaître la position du curseur par rapport aux objets de la vidéos. Un algorithme de collision type jeu vidéo est ici bien trop lourd en ressources : les polygones se composent de centaines de segments, et les fonctions de collision s'exécuter "silencieusement" entre chaque frame de la vidéo soit toutes les quelques dizaines de millisecondes. Impossible, surtout en JavaScript/Web. A la place, un autre canvas invisible joue le rôle de masque. Dans celui-ci est tracé le polygône à l'aide de lignes (ce tracé est une méthode de Canvas, bien optimisée). Ces polygones sont ensuite remplis d'une couleur dont le code rgba renseigne sur l'objet (ou arrière-plan) auquel il appartient. Il suffit ensuite de lire ces informations directement dans le masque de l'objet par comparaison. Les quatre octets des pixels permettent donc d'y coder jusqu'à quatre informations très simplement.

Il s'agit d'une mission de recherche dans le cadre du traitement de l'image, et la fluidité n'est exemplaire que sur des configurations bien équippées (PC fixe ou portable très haut de gamme). J'ai cependant bon espoir que cette idée sera améliorée par d'autres chercheurs ou stagiaires et, pourquoi pas, utilisée dans certains cas (comme les présentations de produits) de manière courante dans un futur aux machines toujours plus puissantes :)

Institute of technology Blanchardstown

IUT de Grenoble - Pierre Mendès-France

IUT de Lyon 1