Faire un screencast live avec Firefox 3.5 et VLC 1.0
Dans ce billet je vais montrer les possibilités offertes par Firefox 3.5 en diffusant un screencast via VLC et en incrustant dans l'image une webcam. On peux facilement imaginer l'utilité de ce genre d'application pour les Classrooms Ubuntu par exemple.
Le tutoriel se fera sur Ubuntu 9.04 mais il est facilement adaptable pour d'autres distributions.
1) Installation de Firefox 3.5 et de VLC 1.0.0
Pour bénéficier des dernières versions de ces logiciels nous allons utiliser les PPA fournis par Launchpad.net. Pour cela il est possible d'utiliser la méthode traditionelle, ou alors utiliser un script Python que j'ai écrit qui facilite la tache. Pour récupérer le script (ppatool) s'assurrer que bzr est installé et lancer cette commande :
bzr branch lp:ppatool
Nous allons ensuite ajouter le ppa relatif a Firefox.
cd ppatool
sudo ./ppatool.py add ubuntu-mozilla-daily ppa
puis celui de VLC (Ce n'est pas obligatoire mais VLC 1.0.0 permet d'avoir le pointeur de la souris dans le screencast)
sudo ./ppatool.py add c-korn vlc
Pour la méthode traditionnelle, les PPA se trouvent à ces adresses ;
https://launchpad.net/~ubuntu-mozilla-daily/+archive/ppa
https://launchpad.net/~c-korn/+archive/vlc
Mettre a jour la liste des paquets et installer ou mettre a jour firefox-3.5 et vlc
2) Streaming de l'affichage et de la webcam
Nous allons commencer par le screencast, récupérez une image de pointeur et placez la dans le répertoire courant avec le nom cursor.png. Nous allons faire une video en ogg theora en 640x480 qui suivra les mouvements de la souris :
vlc screen:// --screen-fps 10 --screen-follow-mouse --screen-mouse-image cursor.png --screen-width 640 --screen-height 480 --sout "#transcode{vcodec=vorb,venc=theora,fps=10,vb=500,width=640,heigth=480}:std{access=http,mux=ogg,dst=0.0.0.0:8090/stream.ogg}"
Pour vérifier que la capture est en cours lancez une autre instance de vlc :
vlc http://localhost:8090/stream.ogg
Maintenant passons a la webcam :
Les périphériques /dev/video et /dev/audio peuvent changer selon votre configuration.
vlc v4l2:///dev/video0 --input-slave oss:///dev/audio --sout "#transcode{vcodec=vorb,venc=theora,fps=10,vb=500,width=160,heigth=120,acodec=vorb,ab=64,channels=1,samplerate=44100}:std{access=http,mux=ogg,dst=0.0.0.0:8091/stream.ogg}"
Faites de même et testez le bon fonctionnement du streaming dans vlc ou firefox3) Diffusion de vos videos dans Firefox 3.5
Nous allons faire une simple page HTML de test qui va regrouper trois éléments vitaux : deux éléments video pour le screencast et la webcam, et un canvas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ogg screencast + webcam</title>
<script type="text/javascript" src="http://tweekers.free.fr/blog/index.php?post/2009/06/15/livecast.js"></script>
</head>
<body onload="processor.doLoad()">
<h1>OGG Testing</h1>
<div id="player">
<canvas id="livecast" width="640" height="480" />
</div>
<video id="screencast" style="display:none;" src="http://192.168.1.11:8090/stream.ogg" controls="true" autoplay></video>
<video id="webcam" style="display:none;" src="http://192.168.1.11:8091/stream.ogg" controls="true" autoplay></video>
</body>
</html>
Dans les tags video j'ai mis mon adresse réseau privée pour pouvoir utiliser cette page sur différents poste de mon réseau local, prenez soin de modifier cette adresse selon votre configuration.
La plus grande partie du code va se trouver dans un fichier javascript annexe. Il est inspiré par les démos diffusées par les développeurs de chez Mozilla. (Essentiellement celles de Paul Rouget )
var processor = {
timerCallback: function() {
this.computeFrame();
var self = this;
setTimeout(function () {
self.timerCallback();
}, 0);
},
doLoad: function() {
this.screencast = document.getElementById("screencast");
this.webcam = document.getElementById("webcam");
this.livecast = document.getElementById("livecast");
this.livecastContext = this.livecast.getContext("2d");
var self = this;
this.screencast.addEventListener("canplay", function() {
self.width = self.screencast.videoWidth;
self.height = self.screencast.videoHeight;
self.camwidth = self.webcam.videoWidth;
self.camheight = self.webcam.videoHeight;
self.timerCallback();
}, false);
},
computeFrame: function() {
this.livecastContext.clearRect(0, 0, this.width, this.height);
try {
this.livecastContext.drawImage(this.screencast, 0, 0, this.width, this.height);
this.livecastContext.drawImage(this.webcam, this.width - this.camwidth -20 , this.height -this.camheight -20 , this.camwidth, this.camheight);
} catch(e) {
return;
}
}
};
La fonction doLoad est executée au chargement de la page et récupère les objets relatifs aux videos puis lance un timer (timerCallback) qui va créer a intervalles réguliers le contenu du canvas (computeFrame). Seul problème dans l'ensemble : une latence d'environ 20 secondes entre l'aquisition par VLC et l'affichage par Firefox 3.5. Le screencast et la webcam sont presques synchrones (moins d'une seconde de décalage dans le pire des cas). Reste maintenant a trouver une solution pour diffuser la video a grande échelle, si on part du principe que l'on diffuse a partir d'une ligne ADSL et que le débit montant n'est pas suffisant pour de nombreux clients connectés. J'irais jeter un coup d'oeil sur icecast pour cela.
Pour finir, un petit screencast récursif, enregistré avec recordmydesktop. Désolé mais je n'ai pas trouvé comment enregistrer la sortie de la carte son dans recordmydesktop donc c'est un film muet ;)
On peut aussi constater les effets du lag sur firefox (on peut voir la fenètre de gtk-recordmydesktop par exemple)
Télécharger livecast.ogg (20,8 Mo , 1min43)
