une webTv avec Red5

Dans le dernier article nous avions vu comment installer red5, un serveur flash open source, et que nous pouvions l’utiliser pour diffuser des vidéos en streaming. Ce qui est intéressant avec ce logiciel, c’est qu’il se révèle être un outil très puissant pour dévellopper des systèmes de diffusion pour webTvs. J’entend par là qu’il va nous permettre de créer une playlist de vidéo qui va démarrer non pas lors de la connection d’un visiteur, mais lors du démarrage du serveur. Pour faire plus simple : lorsque l’internaute se connecte au site, il prend la lecture de la playlist en cours, à la manière d’une chaîne de télévision classique.

Par exemple, sur lorsque vous arriver sur la page d’accueil d’artplaTV, l’animation flash lit un flux qui est synchronisé côté serveur. Cette application est construite sur flash media communication server (voir l’article L’application avance). Je vais maintenant vous expliquer comment faire la même chose avec Red5.

Le programme qui nous intéresse est disponible sur le wiki de red5, il s’agit de l’exemple intitulé ServerSidePlaylist. Vous devez télécharger le fichier zip et l’extraire (si il y a un problème de chiffrement, cliquer sur ignorer).

La seconde étape va être de télécharger et d’installer apache ant afin de compiler les fichiers sources. Pour cela rendez vous sur le site du projet apache ant, rubrique download → binaries distribution et télécharger la dernière version au format zip. Décompresser l’archive dans un nouveau dossier, par exemple « c:\ant ».

Il va maintenant falloir définir les variables d’environnement de ant, comme nous l’avions fait pour java dans le dernier article. Si vous êtes (comme-moi) sur windows 7 :

→ ouvrez le menu démarrer
→ cliquez droit sur ordinateur
→ propriétés
→ paramètres système avancés
→ variables d’environnement.
→ àjoutez une nouvelle variable que vous nommez ANT_HOME et donnez lui comme valeur c:\ant (le dossier où se trouve ant) puis validez.
→ modifier également la variable PATH en lui ajoutant  %ANT_HOME%\bin; au début, puis validez.

Pour vérifier que ant est maintenant bien configuré, ouvrez une invite de commande (exécuter → cmd) et tapez ant -version. Vous devriez alors voir s’afficher un message ressemblant à « Apache Ant version 1.8.0 compiled on February 1 2010″. Si tel est le cas, c’est bon, vous pouvez continuer…

Maintenant il va falloir compiler les sources de l’application que nous avons précédemment téléchargé. En invite de commande, aller vous placer dans le repertoire où vous aviez dézipper l’application puis tapper ant. Chez moi ça donne :

C:\>cd c:\users\willy\downloads\playlistTest\playlistTest
 
C:\Users\willy\Downloads\playlistTest\playlistTest>ant
Buildfile: c:\users\willy\downloads\playlistTest\playlistTest\build.xml
...

Au bout de quelques secondes votre application webTv devrait être compilée. Dans le repertoire dist de celle-ci, vous devriez trouver le fichier playlistTest.war. Copiez-le dans le repertoire webapps de Red5 puis redémarrer red5.

Pour vérifier si le fichier war a bien été déployé, tappez http:\\localhost\playlistTest\ dans votre navigateur. Vous devriez normalement voir l’aborescence de votre appli (le fichier /streams/).

Mais cette application d’exemple, que fait-elle exactement ?

Pour le savoir, éditez le fichier red5-web.properties se trouvant dans le répertoire webapps/playlistTest/WEB-INF de red5.

webapp.contextPath=/playlistTest      //chemin de l'application - ne pas modifier
webapp.virtualHosts=*, localhost, localhost:8088, 127.0.0.1:8088 //url du serveur
 
playlist.repeat=true           //true signifie que la playlist va tourner en boucle
playlist.path=streams/         //repertoire où sont stockés les fichier à lire
playlist.pattern=*.flv         //extension des fichiers à lire
playlist.streamName=webtv      //nom du stream qu'il faudra appeller dans l'animation flash
playlist.runOnStart=true       //la lecture commence au démarrage du serveur

Au démarrage du serveur, l’application va donc aller chercher dans le repertoire stream/ tous les fichiers avec l’extension flv et les lire les uns à la suite des autres, en commencant par le plus récemment modifié, dans un flux nommé webtv. A la fin de la boucle, la lecture reprendra au début.

Pour lire le flux, il suffit d’utiliser une animation flash qui va se connecter au flux rtmp de l’application et lire le stream. Comme je suis gentil, je vous donne gracieusement l’anim’

(au format cs3).

L’animation est très sobrement composée d’une fenêtre vidéo et de quelques lignes d’actionscript :

nc= new NetConnection() //nouvelle connection
nc.connect("rtmp://localhost/playlistTest") //se connect à l'application
ns= new NetStream(nc) //nouveau flux
vids.attachVideo(ns) //le flux est lu par l'objet "vids"
this.createEmptyMovieClip("flv_mc", this.getNextHighestDepth()); //je créer un movie clip vide pour lire le son
flv_mc.attachAudio(ns);
var audio_sound:Sound = new Sound(flv_mc); //la variable relative au son
var vol:Number = 80; //initialisation du son à 80%
audio_sound.setVolume(vol);
ns.setBufferTime(2) //je règle la mémoire tampon sur 2 secondes
ns.play("webtv") //je lis le tout
;

Et voilà…

Il reste cependant une différence entre cette application red5 et celle que j’avais déjà montré dans un précédent post qui fonctionnait sous flash média server : il y a une mise en cache au début de chaque vidéo, et donc un noir d’une à plusieurs secondes, ce qui est très gênant.

Sur mopi.tv j’ai donc contourné le problème en « liant » mes vidéos par paquets de 20, dans des fichiers vidéos d’une à deux heures. J’en tire partie en faisant des jingles relativement dynamiques où les documents audiovisuels se superposent, s’entremèlent…

De là à l’application webTv idéale, il reste encore beaucoup de problèmes à règler. Le plus urgent est de trouver un moyen de gérer la liste de lecture en WYSIWYG, pour planifier la diffusion des programmes en fonction de l’heure. Je suppose que cela devrait être réalisable via un fichier xml généré par une animation flash qui serait interrogé par l’application (au lieu de lire les vidéos de la plus récente à la plus vieille) au démarrage du serveur ou bien à la fin de chaque vidéo. Mais je n’ai pas encore réussi à faire ça, si vous y arriver tenez-moi au courant !!

Prochainement, je vous expliquerai comment faire, avec red5, pour pouvoir basculer entre la lecture de la playlist et une diffusion en live multicaméra.