headermask image

header image

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();
  5.       
  6.        // Connect to oflaDemo demo application in red5 server
  7.        nc = new NetConnection();
  8.        nc.connect("rtmp://192.168.171.10/oflaDemo");
  9.       
  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?lzr=swf8

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>
  7.       
  8.        <method event="onload">
  9.          // Connect to oflaDemo demo application in red5 server
  10.          nc = new NetConnection();
  11.          nc.connect("rtmp://@IPserveur/oflaDemo");
  12.       
  13.          // Get the video stream
  14.          ns = new NetStream(nc);
  15.       
  16.          // Attach de stream to the video
  17.          mc = this.getMCRef();
  18.          mc.myVideo.attachVideo(ns);
  19.       
  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?lzr=swf8) puis, dans un autre navigateur, le script de lecture (http://@IPserveur:8080/openlaszlo-x.x.x-servlet/streaming/play.lzx?lzr=swf8).

Vous devriez voir l’image provenant de votre webcam.

Moi dans IE

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.