J’ai démarré ce projet de générateur d’avatar par la webcam depuis plusieurs mois, sans jamais vraiment avancer. Hier, j’ai recommencé, et je vais vous expliquer l’idée.

C’est quoi ce nom ?

Cavatar, c’est un raccourci de Camera Avatar, c’est tout.

Le principe

Je voulais fournir un outil simple pour créer son avatar dans une application. On s’inscrit sur un forum par exemple, et au lieu d’uploader son avatar ou de le choisir dans une liste comme on fait d’habitude, là on pourrait juste prendre une photo avec sa webcam.

Bon, quand on a une webcam, on a forcément un logiciel pour prendre des photos. Après il faut l’enregistrer, puis l’uploader, à condition que l’application le permette. Parfois, il faut même le redimensionner, bref plein de manips.

Avec Cavatar, le format pourrait être définit à l’avance, la taille, le cadre, les effets, etc. Oui parce que je ne pensais pas simplement prendre une photo, mais aussi pouvoir ajouter des effets ou des objets, histoire de rendre ça marrant.

Fonctionnement

Alors, c’est bien entendu un Flash qui va utiliser la webcam. L’utilisateur prend une photo, et à ce moment là, un événement javascript est envoyé avec en paramètre l’image encodé en base 64. C’est tout.

Ensuite c’est à l’application de faire le reste. J’ai bien sûr fait des tests avant en PHP pour enregistrer l’image.

Ca c’est la fonction javascript qui gère l’événement :

function cavatarShot(imageData)
{
    var xhr_data = 'data='+encodeURIComponent(imageData);
    xhr_object = new XMLHttpRequest();
    xhr_object.open("POST", "generate.php", true); 
    xhr_object.setRequestHeader("Method", "POST generate.php HTTP/1.01");
    xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr_object.onreadystatechange = function()
    { 
        if (xhr_object.readyState == 4) {
            //console.log(xhr_object.responseText);
                     
            var preview = document.getElementById('preview');
            preview.innerHTML = '<img src="image.jpg?'+Math.random()+'"/>';
        } 
    } 
            
    xhr_object.send(xhr_data);
}

Et le PHP qui s’occupe de générer l’image :

$str = $_POST['data'];
 
$str = base64_decode($str);
$img = imagecreatefromstring($str);
 
imagejpeg($img, 'image.jpg', 90);
echo 'ok';

L’exemple est là : http://resources.neolao.com/download/flash/cavatar/test.html

Conclusion

Bon, c’est qu’un début, je n’ai pas encore les effets, mais au moins, ça marche déjà pour une utilisation simple.

Je vais essayer de faire un plugin pour punBB déjà.

Il faut aussi que j’fasse un truc pour le choix de la webcam. Sur un MacBook par exemple, la webcam choisie par défaut n’est pas la bonne, il faut faire un click droit et utiliser la webcam USB. Va savoir pourquoi il y a 3 webcam sur le MacBook. Enfin bon, il y a moyen d’afficher les settings avant d’afficher la vidéo.

Documentation: http://resources.neolao.com/flash/cavatar/