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.

Auteur : willy Bahuaud

Webdesigner et créateur de webTV.
Intégrateur Wordpress

50 pensées sur “une webTv avec Red5”

  1. Salut!
    Excellent article !!!
    Très intéressant, j’ai fais pas mal de tests de mon cotés et je découvre sans arrêt de nouvelles fonctions. En revanche je suis moi aussi a la recherche d’un moyen « miracle » pour gérer la liste de lecture a la Wysiwyg avec une échelle de temps pour la programmation en fonction de l’heure… Avez vous trouvé une solution de votre coté ?
    Bonne continuation!

  2. Bonjour,

    Je suis content que vous ayez aprécié l’article.
    Actuellement je n’ai toujours pas trouvé la solution pour une gestion de playlist en wysiwyg, mais je planche dessus…

  3. Bonjour,

    Merci pour cette article,
    je souhaite réaliser un vidéo chat du même style que celui de chatroulette.com

    Pour réaliser celui ci je souhaite m’inspirer des différente exemple proposer lors de l’installation de red5.

    Les sources du côté client des démo de red5 se trouve ici :
    http://red5.googlecode.com/svn/flash/trunk/

    côté serveur, ici :
    http://red5.googlecode.com/svn/java/example/trunk/

    J’ai récupérer le fla SimpleSubscriber.fla mais je ne comprend il n’y a pas de code AS3 insérer dedans.

    Peux tu m’aider ?
    Je te pose la question car je sais que tu t’intéresse à red5 et qu’il n’existe pas de forum consacré à cette technologie en français.

    Merci d’avance.

  4. Bonjour,
    En fait le simpleSubscriber.fla ne contient pas de code actionscript car il charge des objets directements hébergés en ligne.
    tout trouveras certainement beaucoup d’informations pouvant t’aider sur ce blog –> http://jeanphiblog.media-box.net/dotclear/index.php?Red5
    Il parle de red5 et communique aussi ses sources. Par contre il code en flex…
    je vais « fouiller » d’avantage de mon côté voir si je peux trouver + d’infos sur le simpleSubscriber

  5. Merci beaucoup pour ton aide,

    Je suis tomber sur le blog de jeanphilippe mais malheureusement le chat qu’il propose ne correspond pas tout à fait à ce que je veux faire.

    J’ai trouver un article sur le vidéo chat que je recherche avec un system de « room » :

    http://www.flexbrasilia.com.br/blog/2010/03/exemplo-de-sala-de-conferencia-com-video-e-chat/

    J’ai réussit sans problème à compiler le application.java qu’il propose, ca m’a permis de modifier certaine choses.

    Mais maintenant le problème vient de l’AS3 car malheureusement il propose pas les sources complète côté client… Il propose juste la classe AS3 principale.

    Et je ne parviens pas à reproduire son application sur flex.

    Si tu peux essayer d’y jeter un coup d’œil.

    En échange, je pourrai t’aider à écrire d’avantage de tutoriel sur red5. Il n’y a pas beaucoup de site français qui en propose.

    Merci d’avance.

  6. Ping : www.fuzz.fr
  7. salut tout d’abord grand merci pour ce tuto c’est vrai que c’est rare de trouvé ce genre de tuto en français !
    J’ai de suivis ton tuto pour déployer un webtv en live utilisant une playlist, parcontre moi mon serveur est sous linux j’arrive a générer le .war je le copie dans mon serveur webapps et j’appelle l’url mais rien ne se passe.. j’ai donc decompressé à l’aide de jar j’ai donc le dossier playlistTest avec le dossier WEB-INF etc. je reload red5 et j’essaye de pinguer mon serveur à l’aide de Port Tester ( dans les démos )le test me renvoie failed.. Help

  8. Bonjour, alors déjà va voir si dans le dossier red5>work>red5engine il y a bien un dossier qui porte le nom de ton application (vide normalement). S’il n’y en a pas, créer le.
    Sinon tu peux aussi essayer de stopper et de restarter red5 (dès fois cela m’arrive aussi, apres avoir reloader red5 que mes appli ne soient pas tout de suite déployée…).

    Pour info, ton serveur est sous quelle distribution de linux ?

  9. salut merci de ta réponse j’ai bien le dossier playlistTest (vide) dans le repertoire work de red5 et dans le repertoire webapps j’ai re-tester ça ne ping pas, j’ai installé red5 sur une debian et j’ai tenté aussi de le tester sur mon poste qui est sous ubuntu c’est pareil.

  10. Un grand Merci, ça va beaucoup m’aider dans ce que j’essaie de faire 🙂

    Est ce qu’il y’aurait moyen de lancer plusieurs playlists en Parallele ?

    Merci

  11. Bonjour, oui il est (normalement) possible de lancer deux playlist en paralèlle, je suis actuellement en train de le tester. Il faut juste deux applications qui n’ont pas le même nom.

    Pour le support du mp4, red5 le prend en charge. Il suffit donc de l’indiquer dans le fichier de configuration de l’application.

  12. Merci pour ta rapide réponse willy 🙂

    Pour les webtv en parallèle, je viens de tester la même chose et ça marche, ie : instantier deux applications avec différents noms et repertoires.

    pour le MP4, j’ai bien indiqué dans le fichier de config red5-web.properties : playlist.pattern=*.mp4

    rien n’à faire, j’ai même mis dans un état de désespoir un *.* lol mais kif kif 🙁

    ça me semble bizarre car je sais que le RED5 supporte bien le MP4, et que cette application puise des mêmes librairies (du moins je crois)

    Encore Merci

  13. Pour le mp4 je viens de comprendre pourquoi ça ne marchais pas…
    En fait, le fichier est correctement pris en charge par red5, …c’est notre animation flash qui est incapable de la lire ! le H264 n’est pris en charge qu’en as3.
    Si quelqu’un veut bien m’aider à «traduire» mon player en as3 ça serait super…

  14. mais mon application est écrite 100% en AS3 🙂 je diffuse mes fichiers en MP4 (ecnodés avec FFMPEG avec la lib x264 [H.264]) et l’application les lit sans soucis avec la methode NetStream.Play(…)

    Je ne suis pas un pro du AS3 (occasionnellement en modifiant du code) mais si je peux aider ça serait avec plaisir.

  15. oui je trouve aussi que c’est bizarre 🙁 🙁

    Si je trouve la solution je viendrais poster ici

    PS : un projet C++ (RED5 Like), en plus soutenu par les développeurs de RED5, http://www.rtmpd.com, je viens de compiler les sources et ça marche super, on sait jamais, peut être que ça te donnera l’idée d’un nouveau tuto 🙂

    Merci encore pour ce tuto 🙂

  16. pardon, j’ai pas répondu à ta question, je ne pense pas que c’est un problème de droits d’accès aux fichiers, le fichier se charge, l’état du player se met sur Buffering puis Playing et j’ai un écran noir.

    Je ne pourrais debugger que demain..

    @+

  17. En fait, je répondait à camille (un peu sur le tard) en parlant des droits d’accès ^^

    J’ai vu le projet rtmpd, ça à l’air fichtrement intéressant !

    Certainement un futur tuto, merci beaucoup !

    Je te tiens au courant si je trouve une solution pour le mp4

  18. Bonjour,

    Bravo pour le tuto, je voulais savoir si RED5 peut streamer en live le bureau, ce que l’on fait sur windows, et pas que la webcam ?

    Merci 🙂

  19. merci, j’ai un peu mélangé ^^

    Et en moyenne, une connexion de 100M/b, un bon PC qui ne ferait que du live, peut supporter combien de spectateurs live ? svp

  20. Pas de problème ^^

    Le calcul est simple : ta bande passante en upload par seconde (100Mbit/s par exemple) / le bitrate de tes vidéos ((à définir dans ton profil d’encodage) 600kbit/s est un bitrate acceptable) = le nombre de connection simultannées possibles 🙂

    En prenant un exemple : si j’ai 100Mbit/s d’upload et un bitrate définie à 0.6Mbit/s, je pourrais connecter (hypotétiquement) 166 personnes.

    Mais bon, garde une marge 😉 120 personnes sûr (et il faut un pc avec un minimum de ressource (procc & ram))

  21. D’accord, c’est peu quand même, le bonding chez Ustream ou Livestream doit être d’une centaine de PC ! Ou alors ils ont un système que je ne connais pas =)

  22. bah oui, ils ont une grosse infrastructure ^^
    Mais en même temps, as-tu vu combien ils facturent leur bande passante ??

    Une solution pour augmenter le nombre de connections simultanées c’est de prendre plusieurs serveurs, ça coutera toujours bien moins cher que chez ustream ou livestream.

    Et puis il y a moyen de monter des « relais » entre les flux de ces serveurs.
    🙂

  23. Oui, c’est toujours interessant et toujours moins cher que Ustream et compagnie.
    Apparemment, selon les demandes et requêtes que j’ai fait un peu partout, il y aurait VHScreenCapture (software capture) ou une carte Black Magic Design Intensity Pro (hardware) qui pourrait broadcaster le bureau d’un PC. 🙂

  24. Je viens de tester ta solution logiciel, ça marche vraiment très bien en live !

    Merci pour l’info !

    ps : juste un souci, pour faire de la Haute Définition, je ne sais pas vraiment comment faire. Et puis il y a égalment un gros logo de la marque dans la version gratuite.

  25. Bonjour et felicitations pour ce post (et les autres) qui m’ont permis d’avancer dans la réalisation de ma WebTV.

    Je voulais savoir si tu avais trouvé le moyen de gérer le noir entre 2 videos (à part réunir des videos ?). Car je suis en train de faire un système en php avec une bdd pour pouvoir permettre à un administrateur de faire sa programmation (en WYSIWYG). J’ai du coup modifier les sources de l’appli Red5 pour pouvoir gérer ca. Mais du coup en faisant comme cela, je ne peux pas fusionner les videos !

    Sinon, pour info, pour pouvoir faire 2 chaines sur le même serveur, il est aussi possible d’aller modifier l’appli redhat pour créer plusieurs ServerStream, On sera donc sur la même application, mais avec un stream différent au moment du play !

  26. ^ tout le monde aura bien sure compris que « l’appli redhat pour créer plusieurs ServerStream » etait en fait « l’appli red5 pour créer plusieurs ServerStream »

    dur dur de faire de l’admin système en même tant qu’on surf !

  27. Bon, bah pas de réponse.

    Alors juste pour info, je ne sais pas qu’elle etait ton problème exact, mais en fait, après qq recherche, j’ai identifier le problème exact que j’avais chez moi. En fait, quand je lancais mon flux, si j’arrivais a 10sec de la video en cours, ensuite toutes les videos que je regardais, restait bloqué (noir) jusqu a ces 10 secondes. En changeant un petit bout dans les sources de red5 que j’ai recompilé, j’ai réussi a corriger ce problème. si ca t’intéresse de regarde si ca corrige ton problème, mail moi !!

  28. Pardon pour ne pas avoir répondu, je rentre de vacances ^^
    Merci pour l’astuce, je vais regarder si ça corrige le problème chez moi. Merci également pour l’astuce des deux server stream 🙂

  29. C’est pas grave pour la réponse, les vacance c’est priotaire :p. Je suis en vacance aujourd’hui je vais pouvoir avancer sur ma WebTV !!!

    N’hésite pas, si tu veux que je te dise ce que j’ai changé dans les sources de red5 pour ne pas avoir le problème entre 2 videos.

    Sinon, si ca t’intéresse aussi, j’ai bien avancé sur mon dev pour pouvoir paramétrer la programmation de ma WebTV. Aujourd’hui je peux paramètrer la programmation grace à une bdd mysql. J’entame la programmation de l’interface (en php).

  30. Bonjour,

    Votre tutoriel a vraiment été très instructif et permet de bien démarrer sa webTV.

    Pour ma part, j’ai été amené à développer ma webTV sur un serveur Debian. La démarche reste sensiblement la même mais pour ceux qui veulent se lancer, je leur conseille cet excellent tuto (pour l’installation de red5) : http://blog-du-grouik.tinad.fr/index.php?post/2010/05/21/Installation-red5

    Pour ceux qui est du lecteur flash, j’ai suivi votre tracback italien, et j’ai suivi la démarche avec FlashDevelop (vive le libre 😉 ).

    Par contre, j’aimerais bien savoir comment vous avez fait pour supprimer les transitions noires entre 2 vidéos, ça m’intéresse ! Enfin, je me pose une dernière question quant à savoir s’il est possible d’indiquer un autre chemin pour les vidéos que streams/.
    Les vidéos que je souhaite diffuser sont stockées sur mon /home mais l’installation de red5 se fait dans le /usr/lib/… et je ne parviens pas à lui indiquer où récupérer mes vidéos. Pour lui, l’arborescence ne démarre qu’à partir du dossier playlistTest/

    En tout cas, merci pour cet excellent tuto, félicitations et bonne continuation !

  31. Salut Merci pour le tuto

    J’ai deja installé et configuré red5 sur mon serveur dedidé centos. j’ai télécharger le fichier playlistTest dans le repertoire /opt/red5/dist/webapps . dans ce repertoire je l’ai compilé et j’ai déposé le fichier .war dans le repertoire /opt/red5/dist . avec mon url http://localhost:port/playlistTest jai bien la liste des fichier .
    je suis bloqué a ce niveau car je sais pas comment utilisé le lecteur fla ? comment lire dans une page web ? etc …
    voila 3 jours que je cherche en vain j’ai meme essayé avec jwplayer sans pouvoir lire mes videos dans une page web.
    au secours …

  32. Bonjour !

    Merci pour l’article, ce fut très instructif =) Néanmoins, je souhaiterai mettre en place le même système mais avec un flux audio, et je ne sais pas comment procéder. Dans un premier temps, est-ce qu’une simple modification de l’application Red5 sera suffisante ? Ensuite, pour le player flash que vous avez donné, je ne peux pas l’utiliser, je n’ai pas le logiciel requis, et encore l’OS.. Y-a-t-il un autre moyen pour lire ce flux ?

    Merci beaucoup.

  33. voyant que tu te debrouille trés bien j’aimerais poser ma question j’aimerais en gros permettre au serveur red5 de faire comme le pseudo streaming c’est a dire de telcharger magré que je met par exemple la video sur pose que sa continue a charger et j’aimerai sa que sa charge la video pendant longtemps que que malgré que sa charge bien j’aimerais que par exemple quelque soi la connection le serveur vnoi le flux que il ya toujour une petite portion en plus car red5 et le serveur qui a fonctionné pour faire du vrai streaming c’est a dire la reprise a n’importe qu’elle moment car malgré se qui est dit ben comme quoi le serveur adapte le debit en fonction des connection car sa ne le fai p car les connection faible les adsl dans les campagne sa bug sa coupe sans arret
    je te remercie d’ava,ce car je cherche partout et aucun tuto explique se genre de chose c’est dire amélioré les performance pour les diffusion de video streaming

  34. Bonjour, je rouvre un peu le dossier. J’essaye de comprendre le fonctionnement de RED5 et sa mise en place. J’ai donc suivi tes tutos, seulement impossible de récupérer le fichier ServerSidePlaylist … Peux tu nous redonner un lien ? Merci d’avance

  35. I like what you guys tend to be up too. Such clever work and coverage! Keep up the very good works guys I’ve incorporated you guys to my personal blogroll. eckekgaaeefe

  36. Bonjour et merci pour tes supers tutos!!
    Je voudrais savoir si tu as trouvé un moyen pour planifier la diffusion des programmes en fonction de l’heure souhaitée.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *