TP5 HTML5 M2 NTDP 2012-2013

On va utiliser un micro serveur NodeJS

NodeJS est un serveur très très minimal par défaut mais on peut l'étendre en lui ajoutant des "modules". 

Exemple de modules que nous allons utiliser:

• express donne la possibilité de servir des pages HTML avec CSS, JavaScript etc. Par défaut NodeJS ne sait pas faire cela.
• socket.io : librairie pour les WebSockets. Donne aussi des solutions de fallbacks si le navigateur utilisé ne supporte pas les WebSockets (comet, ajax, flash sockets)
• nowJS : permet de faire des appels de méthodes distantes en JavaScript, via des WebSockets.

Installation de NodeJS

Sous windows c'est assez compliqué à cause de certains modules qui nécessitent une recompilation à la volée. Pour ce TP au lieu d'installer NodeJS depuis le site officiel, puis utiliser la commande "npm" (Node Package Manager), qui télécharge les modules un par un, vous allez directement installer les logiciels qui vous ont été donnés sur la clé USB au début des TPs:

• Visual C++ redistribuable (vcredist.exe)
• NodeJS 0.6.8
• Dezipper ChatNowJs.zip quelque part, on va s'en servir pendant ce TP.

Une fois tout ceci installé, ouvrez une fenêtre DOS et tapez "node --version", cela devrait afficher 

Test d'une première application NodeJS

• Créez un fichier test.js file avec ce contenu :

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

Sauvez le et exécutez la commande suivante :

node test.js

Vous venez juste de lancer le serveur NodeJS qui répond à cet URL : http://localhost:8124

Ouvrez cet URL dans votre navigateur !

Vous devriez avoir :

Vous venez d'exécuter votre première application NodeJS ;-)

Coté serveur : on broadcaste les ordres de dessin, sauf à l'envoyeur

Cette fois-ci, sans rien toucher au code du chat, on a rajouté juste une simple méthode appelable depuis les clients, pour broadcaster les ordres de dessin. Les ordres de dessin sont des objets JavaScript qui contiendront tout ce qu'il faut pour que le récepteur puisse reproduire le dessin quand il recevra l'ordre. Ainsi, si quatre personnes sont connectées, et que la première trace une ligne, les trois autres recevront un objet paintCommand comme {type:line, x1:20, y1:50, x2:123, y2:240}, il suffira de tester paintCommand.type pour tracer une ligne de (paintCommand.x1, paintCommand.y1) jusqu'au pixel (paintCommand.x2, paintCommand.y2) 

Serveur (fichier server.js) :

everyone.now.distributePaintCommand = function (paintCommand) {
    // send the paint command to everyone except sender
    everyone.exclude(this.user.clientId).now.processPaintCommand(paintCommand);
};

On utilise aussi une autre feature très pratique du module NowJS : la possibilité d'exclure quelqu'un lors du broadcast: ici l'expéditeur. La partie everyone.exclude(this.user.clientId).now.processPaintCommand(paintCommand) signifie "appelle la fonction  processPaintCommand de chaque client connecté, sauf moi ! (moi étant le client qui a émis le message).

En effet, si un client dessine une ligne, elle est déjà dessiné sur son écran, pas la peine qu'il recoive son propre message pour dessiner une ligne déjà dessinée. C'est la seule différence avec le chat où on renvoit les messages à tout le monde y compris à l'expéditeur.

Envoi des ordres de dessin

Dans le client, l'envoi des ordres de dessin est situé dans chaque drawing tool (crayon, ligne, cercle, etc). Regardons juste l'outil "ligne" dansle fichier drawingtools.js :

// The Line Drawing Tool Object
setOfDrawingTools.line = function () {
    ...

    this.mousemove = function (event) {
        ...
        sendLineMove(mousePos);
    };

    // Send the line to other clients.
    function sendLineMove(mousePos) {
        var paintCommand = {};
        paintCommand.type = 'lineMove';
        paintCommand.previousMousePos = previousMousePos;
        paintCommand.currentMousePos = mousePos;
        paintCommand.properties = paint.getCurrentContextProperties();
        now.distributePaintCommand(paintCommand);
    }

    this.mouseup = function (event) {
        ...
        paint.sendOrderToDrawFrontCanvasOnMainCanvas();
    }
};

On a ajouté une méthode sendLineMove qui est appelée pour chaque déplacement de la souris. Cette méthode construit un objet paintCommand qui a un attribut type égal à 'lineMove', et qui contient les coordonnées de départ de de fin de la ligne, et un champs nommé 'properties' qui contiendra les couleurs de dessin, de remplissage, l'épaisseur de trait courant etc. Ces propriétés sont retournées par la méthode paint.getCurrentContextProperties().

Une fois construit, on envoie cet objet au serveur pour qu'il le broadcaste, en appelant la méthode  now.distributeCommand(paintCommand) qui est sur le serveur.

Traitement des ordres de dessin qu'on reçoit du serveur

Premièrement, on a définit dans le fichier paint.html une méthode appelable par le serveur: now.processPaintCommand (paintCommand) . As it is defined as a method of the now object, it is callable by the server code.

<script type="text/javascript">
        // Run when the DOM is ready
        $(document).ready(function () {

            // prompts a dialog and asks for a nickname
            now.ready(function () {
                ...

                now.processPaintCommand = function (paintCommand) {
                    paint.processPaintCommand(paintCommand);
                };

               ...
            });
        });
    </script>

Ainsi, chaque fois que le serveur appelle processPaintCommand() chez les clients connectés, cette méthode appelera à son tour paint.processPaintCommand(paintCommand), une méthode de l'objet paint, localisée dans le fichier the paint.js. Elle reproduit le dessin correspondant à l'ordre reçu:

this.processPaintCommand = function (paintCommand) {
    // save contexts on a stack, method provided by the canvas API
    mainContext.save();
    frontContext.save();

    // change current contexts so that they are same as sender contexts
    this.changeContextsProperties(paintCommand.properties);

    switch (paintCommand.type) {
        ...
        case 'lineMove' :
            // clear the content of the front canvas
            frontContext.clearRect(0, 0, frontCanvas.width, frontCanvas.height);

            // draw the line, using values received in the paintCommand...
            ...
            break;
            ...
        case 'drawFrontCanvasOnMainCanvas' :
            // Got the order to draw front canvas on main canvas
            this.drawFrontCanvasOnMainCanvas();
            break;
        }

        // restore contexts, current color, etc. From canvas API
        mainContext.restore();
        frontContext.restore();
}

C'est un concept très simple: je reçois l'ordre de dessiner une ligne, je trace une ligne ! En fait, il y a une toute petite complication concernant les propriétés du dessin, si on est en train de dessiner en vert et qu'on reçoit l'ordre de dessiner en rouge, il faudra changer momentanément la couleur pour du rouge, puis remettre comme c'était avant, en vert !!!! On appelle cela "changer les contextes"... voici au final ce que l'on fait quand on reçoit un ordre de dessin:

1. On sauvegarde le contexte courant  (par exemple, couleur = bleue, mode fil de fer, épaisseur du trait = 1),
2. On change le contexte comme pour l'ordre reçu (par exemple, couleur = rouge, mode plein, épaisseur du trait = 5),
3. On dessine,
4. On restaure le contexte avec la valeur sauvegardée dans l'étape 1

Pour la sauvegarde et la restauration, on utilise les méthodes save() et restore() du contexte des canvas, elles sont dans l'API des canvas. Ces méthodes permettent de sauvegarder sur une pile plusieurs contextes consécutifs et de les dépiler.

Vous pouvez aussi regarder comment nous avons traité les ordres de dessin pour les différents outils implémentés (rectangle, cercle, etc).

Utilisation de la webcam pour dessiner avec l'image courante de la webcam et la transmettre

Juste pour le fun on a ajouté la possibilité de dessiner des rectangles avec pour contenu l'image courante de la webcam. Ceci ne marche qu'avec Opera ou Chrome.

<script src="js/webcam.js"></script>
...    
<script type="text/javascript">
        // Run when the DOM is ready
        $(document).ready(function () {
            ...
            // init web cam, works only in last test versions of chrome and opera.
            initWebCam();
        });
    </script>

function initWebCam() {
    var n = navigator,
    is_webkit = false;

    function onSuccess(stream) {
        var output = document.getElementById('output'),
            source;

        output.autoplay = true;

        if (!is_webkit) {
            source = stream;
        }
        else {
            source = window.webkitURL.createObjectURL(stream);
        }

        output.src = source;
    }

    function onError() {
        // womp, womp :(
    }

    if (n.getUserMedia) {
        // opera users (hopefully everyone else at some point)
        n.getUserMedia({video:true, audio:true}, onSuccess, onError);
    }
    else if (n.webkitGetUserMedia) {
        // webkit users
        is_webkit = true;
        n.webkitGetUserMedia({video:true, audio:true}, onSuccess, onError);    }
}

Peindre avec des images en provenance de la vidéo de la webcam

On a juste ajouté un "webcam" drawing tool dans drawingtools.js :

setOfDrawingTools.webcam = function() {
    var mousePos, previousMousePos, x, y;
    // ref to the video element that displays webcam real time content
    var video =document.getElementById('output');
    ...

    this.mousedown = function (event) {
        previousMousePos = getMousePos(paint.getFrontCanvas(), event);
        paint.started = true;
    }

    this.mousemove = function (event) {
        mousePos = getMousePos(paint.getFrontCanvas(), event);
        // Draw only if we clicked somewhere
        if (paint.started) {
            // clear the content of the front canvas
            paint.getFrontContext().clearRect(0, 0, paint.getFrontCanvas().width, 
                                              paint.getFrontCanvas().height);

            // Size and pos of the elastic rectangle with video snapshot inside
            var imageProperties = computeProperties(previousMousePos, mousePos);

            // Draw video content on front canvas
            paint.getFrontContext().drawImage(video,imageProperties.x,imageProperties.y, 
                  imageProperties.width,imageProperties.height);
        }
    }

    // Compute the coordinates of the top left corner and the size of the image drawn.
	function computeProperties(previousMousePos, mousePos){
	    var properties = {};
        properties.x = Math.min(previousMousePos.x, mousePos.x);
        properties.y = Math.min(previousMousePos.y, mousePos.y);
        properties.width = Math.abs(previousMousePos.x - mousePos.x);
        properties.height = Math.abs(previousMousePos.y - mousePos.y);
        return properties;
    }

    ...

    this.mouseup = function (event) {
        paint.started = false;
        paint.drawFrontCanvasOnMainCanvas();
        ...
    }
};

On utilise la même chose que pour l'outil rectangle sauf qu'on utilise la fonction pour dessiner des images (paint.getFrontContext().drawImage(video, .....)), avec comme paramètre le tag vidéo. Cela revient, comme dans les exemples du cours où on prend des snapshots d'une vidéo qui joue, à dessiner l'image courante de la vidéo.

Envoie des images pour broadcast. On les envoie en format base64 en tant que dataURL

L'astuce ici consiste à dessiner l'image de la vidéo dans un canvas invisible, qui fait la taille du rectangle qu'on dessine. Ceci permet de n'envoyer qu'une petite image, et pas une image pleine résolution. On récupère le contenu de ce canvas, sous la forme d'un dataURL, et on l'envoie au serveur pour broadcast.

On utilise ma méthode offScreenCanvas.toDataURL("image/png") pour récupérer l'image png du canvas non visible encodée en base64. Les WebSockets sont sur HTTP et HTTP est un protocole texte ! Et le format base64 c'est du texte !

On a ajouté quelques lignes au webcam drawing tool:

setOfDrawingTools.webcam = function() {
    var mousePos, previousMousePos, x, y;
    // ref to the video element that displays webcam real time content
    var video =document.getElementById('output');

    // An off screen canvas for getting webcam data
    var offScreenCanvas= document.createElement('canvas');
    var offScreenContext = offScreenCanvas.getContext('2d');

    this.mousedown = function (event) {
        previousMousePos = getMousePos(paint.getFrontCanvas(), event);
        paint.started = true;
    }

    this.mousemove = function (event) {
        mousePos = getMousePos(paint.getFrontCanvas(), event);
        // Draw only if we clicked somewhere
        if (paint.started) {
            ...

            // Size and pos of the elastic rectangle with video snapshot inside
            var imageProperties = computeProperties(previousMousePos, mousePos);

            // Draw video content on front canvas
            paint.getFrontContext().drawImage(video,imageProperties.x,imageProperties.y, 
                                     imageProperties.width,imageProperties.height);

            // draw in the offscreen canvas a snapshot of current picture 
            // displayed in the video element
            offScreenCanvas.width = imageProperties.width;
            offScreenCanvas.height = imageProperties.height;
            offScreenContext.drawImage(video, 0,0, imageProperties.width,
                                                   imageProperties.height);
            // Get this snapshot as a base64 picture
            var imageData = offScreenCanvas.toDataURL("image/png");

           // send image data through websocket
           sendWebcamMove(imageData,imageProperties);
        }
    }

   ...

    // Send the rectangle to other clients.
    function sendWebcamMove(imageData,properties) {
         var paintCommand = {};
        paintCommand.type = 'webcamMove';
        paintCommand.imageData = imageData;
        paintCommand.x = properties.x;
        paintCommand.y = properties.y;
        paintCommand.width = properties.width;
        paintCommand.height = properties.height;
        now.distributePaintCommand(paintCommand);
    }

    this.mouseup = function (event) {
        ...
        paint.sendOrderToDrawFrontCanvasOnMainCanvas();
    }
};

Traiter les images reçues en base64 pour les dessiner

On a ajouté quelques lignes dans paint.js , là où on traite les ordres de dessin reçus. Remarquez que lorsqu'on reçoit une image encodée, on reconstruit un objet de type image (var img = new Image(); et img.src = paintCommand.data... On ne peut dessiner l'image que dans le callback img.onload(), voir les exemples du cours sur le dessin d'image, on ne peut faire que de cette manière...

this.processPaintCommand = function (paintCommand) {
       ...

        switch (paintCommand.type) {
            
            case 'webcamMove' :
                // clear the content of the front canvas
                frontContext.clearRect(0, 0, frontCanvas.width, frontCanvas.height);
                // build a temporary image of the right size
                var img = new Image();
                img.width = paintCommand.width;
                img.height = paintCommand.height;

                // Listener called when the image is ready to be drawn
                img.onload = function () {
                    // draw the received picture
                    frontContext.drawImage(img, paintCommand.x, paintCommand.y);
                };

                // will call the onload listener
                img.src = paintCommand.imageData;
                break;
            ...
        }

        ...
};