par willy Bahuaud
”Ce post est dans la continuité du dernier. Après avoir vu comment installer red5, je vous explique comment configurer votre propre application de diffusion de webTV avec playlist synchronisée côté serveur”
→ partager
→ voir les articles en rapport
→ voir les 38 commentaires
mots clés :
diffusion flash open source player playlist tutoriel
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.

13 avril 2010 à 11 h 28 min
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!
17 avril 2010 à 11 h 25 min
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...
21 avril 2010 à 19 h 37 min
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.
22 avril 2010 à 7 h 52 min
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
24 avril 2010 à 12 h 58 min
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.
27 mai 2010 à 23 h 48 min
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
28 mai 2010 à 4 h 32 min
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 ?
28 mai 2010 à 18 h 21 min
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.
11 juin 2010 à 13 h 35 min
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 juin 2010 à 17 h 55 min
re encore moi
est il possible de faire la la même chose avec du MP4 ?
Merci
11 juin 2010 à 18 h 17 min
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.
11 juin 2010 à 18 h 23 min
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
11 juin 2010 à 23 h 48 min
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...
11 juin 2010 à 23 h 53 min
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.
11 juin 2010 à 23 h 53 min
C'est bizarre... A tout hasard, quels sont les droits des fichiers de l'application «playlistTest» ? Essaye de les mettre en 0775
12 juin 2010 à 0 h 00 min
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
12 juin 2010 à 0 h 04 min
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..
@+
12 juin 2010 à 0 h 13 min
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
7 juillet 2010 à 15 h 54 min
Salut !
Tout d'abord, merci pour ce tuto
Par contre je n'arrive pas à télécharger ton animation flash
7 juillet 2010 à 19 h 43 min
De rien,
L'animation est bien téléchargeable, par contre il faut faire clic droit>enregistrer sous
9 juillet 2010 à 9 h 44 min
Merci pour l'info.
Par contre dans le .fla je retrouve le code de ton site
9 juillet 2010 à 10 h 14 min
Ah ? Au temps pour moi
J'ai remis le bon lien ^^
14 juillet 2010 à 13 h 00 min
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
14 juillet 2010 à 13 h 42 min
En fait, red5 est juste le serveur de streaming... Ce qu'il faut savoir, c'est juste si flash peut "filmer" l'écran du bureau.
Malheureusement, je ne connais aucune application flash qui fait ce genre de chose...
Il y a bien des logiciels de capture vidéo d'écran mais je ne connais pas de fonction flash équivalente.
15 juillet 2010 à 14 h 35 min
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
15 juillet 2010 à 14 h 56 min
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))
15 juillet 2010 à 14 h 59 min
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 =)
15 juillet 2010 à 15 h 29 min
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.
16 juillet 2010 à 11 h 06 min
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.
16 juillet 2010 à 11 h 35 min
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.
16 juillet 2010 à 16 h 27 min
ah oui donc faudra surement l'acheter :s
10 août 2010 à 16 h 35 min
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 !
10 août 2010 à 16 h 37 min
^ 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 !
12 août 2010 à 21 h 25 min
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 !!
13 août 2010 à 8 h 51 min
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
13 août 2010 à 15 h 01 min
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).