Vidéos live avec OpenLaszlo

L’objectif
de ce tutoriel est de mettre en place un petit système pour enregistrer
des vidéos avec une webcam et pouvoir les visionner en streaming. Pour
cela, j’utiliserais le serveur Flash Red5.

Ce tutoriel est basé sur celui-ci,
ce n’est pas tout à fait une traduction, car je n’utilise pas la même
méthode d’installation pour le serveur Red5, je ne reprends d’ailleurs
aucune tournure de phrases, pas même les captures d’écran, bref c’est
mon blog je fais ce que je veux.

1 - Installation de Red5
Le serveur Red5 est un serveur Flash Open Source qui permet le
streaming audio et vidéo du format flv et mp3, l’enregistrement de
vidéo au format flv, ainsi que le partage d’objet ou le streaming live.

Pour l’installation de la plate-forme, j’ai choisi de me baser sur le tutoriel ” Déploiement sur serveur Tomcat
“. Pour résumer j’utilise une machine virtuelle avec la virtual
appliance qui contient uniquement le serveur tomcat. Si vous ne
souhaitez pas utiliser cette méthode ou si vous êtes sous Windows,
allez griller en enfer ou lisez ce tutoriel (en anglais bien sûr) ;).

Donc, téléchargez le package auto-installable .war à cette adresse.
http://dl.fancycode.com/red5/war/red5-0.6rc1.war

Accedez à l’interface d’administration du serveur Tomcat (http://@IPserveur:8080/manager/html).
Puis rendez-vous à la section ” Deploy - WAR file to deploy “, ici sélectionnez le fichier téléchargé précédemment et cliquez sur ” Deploy “.

Pour vérifier si le serveur Red5 est bien installé, visitez la page http://@IPserveur:8080/red5-0.6rc1/

2 - Publication de vidéo

créez un nouveau répertoire sous l’arborescence du serveur LPS appelé ” streaming
” (dans le répertoire partagé sur le système, pour être accessible à
l’adresse http://@IPserveur:8080/openlaszlo-x.x.x-servlet/streaming/)

Dans ce répertoire, créez le fichier publish.lzx

Script OpenLaszlo - publish.lzx

  1. <canvas>
  2. <method event="oninit">
  3. // Get the camera
  4. myCamera = Camera.get();
  6. // Connect to oflaDemo demo application in red5 server
  7. nc = new NetConnection();
  8. nc.connect("rtmp://192.168.171.10/oflaDemo");
  10. // Publish video from the camera to the red5 server
  11. ns = new NetStream(nc);
  12. ns.attachVideo(myCamera);
  13. ns.publish("example", "live");
  14. </method>
  15. </canvas>

n’oubliez pas de modifier l’adresse IP du serveur qui héberge le
serveur Red5 (et qui, par conséquent, diffuse le flux vidéo RTMP)

Vous pouvez maintenant accéder à l’adresse http://@IPserveur:8080/openlaszlo-x.x.x-servlet/streaming/publish.lzx?lz...

Le plug-in flash vous demandera si le serveur a le droit d’utiliser votre webcam, acceptez…

Pour le moment il ne se passe rien, c’est normal, cependant, le
script OpenLaszlo enregistre un flux vidéo appelé ” example ” et le
diffuse en live à partir de l’adresse ” rtmp://@IPserveur/oflaDemo ”

nous allons maintenant ajouter un script pour visionner ce flux vidéo

3 - Visualisation de vidéos

ajoutez un script appelé play.lzx sur le serveur

Script OpenLaszlo – play.lzx

  1. <canvas>
  2. <view id="flvView" width="200" height="200">
  3. <method event="oninit">
  4. // Set the video
  5. this.setSource('myVideo.swf');
  6. </method>
  8. <method event="onload">
  9. // Connect to oflaDemo demo application in red5 server
  10. nc = new NetConnection();
  11. nc.connect("rtmp://@IPserveur/oflaDemo");
  13. // Get the video stream
  14. ns = new NetStream(nc);
  16. // Attach de stream to the video
  17. mc = this.getMCRef();
  18. mc.myVideo.attachVideo(ns);
  20. // Play de video
  21. ns.play('example');
  22. </method>
  23. </view>
  24. </canvas>

Ici encore, n’oubliez pas de modifier l’adresse IP du serveur qui diffuse la vidéo.

Le script utilise comme base pour sa diffusion un fichier flash nommé “myVideo.swf”, téléchargez-le ICI (il ne pèse rien, c’est juste un support) et copiez-le au même endroit que les autres scripts.

Pour voir si le streaming fonctionne, si ce n’est déjà fait, lancez
le script d’enregistrement
(http://@IPserveur:8080/openlaszlo-x.x.x-servlet/streaming/publish.lzx?lz...)
puis, dans un autre navigateur, le script de lecture
(http://@IPserveur:8080/openlaszlo-x.x.x-servlet/streaming/play.lzx?lzr=s...).

Vous devriez voir l’image provenant de votre webcam.

Voilà maintenant vous pouvez concurrencer Youtube et Dailymotion

Pour une utilisation plus avancée du système, je vous laisse consultez le blog de Sebastian Wagner et pourquoi pas tester ses travaux.