Streaming video with OpenLaszlo and Red5

This article details the necessary steps to incorporate a streaming video system into an OpenLaszlo application using Red5.

OpenLaszlo is a XML/Javascript based application architecture that uses Macromedia Flash to deploy rich internet applications to the web browser. OpenLaszlo is a well-documented open source alternative to Macromedia Flex framework.

Red5 offers the ability to stream audio and video. Red5 implements RTMP and AMF. Red5 is an open source alternative to Macromedia Flash Media Server.

Prerrequisites

In order to run this example, the following products and hardware must be installed in your computer:

1. JDK 1.5.0 or newer (http://java.sun.com/j2se/1.5.0/download.jsp)
   
2. JAVA_HOME environment variable must point to JDK folder
   
3. A camera correctly connected and configured

Installing Red5

Download Red5 from http://www.osflash.org/red5/version.3_release.

At the time of writing this article Red5 is only available for Windows (http://dl.fancycode.com/red5/setup-red5-0.3.exe), but it is very easy to adapt it to run in a Linux box because is implemented in Java using Spring framework (http://www.springframework.org/) and Apache MINA (http://directory.apache.org/subprojects/mina/index.html).

Run the setup-red5-0.3.exe file and follow the steps indicated by the intallation wizard.

To start the server, just execute ‘run.bat’ from the ‘bin’ folder.

To enable logging, edit the file ‘wrapper.conf’ from the ‘conf’ folder and add a new classpath entry like the following:

wrapper.java.classpath.19=../conf

Installing OpenLaszlo

Download openlaszlo from http://www.laszlosystems.com/developers/download/.

At the time of writing this article, it is used OpenLaszlo 3.2 for Windows XP, but the same example has been tested in a Linux box.

Run the openlaszlo-3.2-windows-dev-install.exe file and follow the steps indicated by the intallation wizard.

Run5 is actually listening on port 8080 and OpenLaszlo uses port 8080 by default. So, change the port on which OpenLaszlo will listen when start. To do this, edit the file ’server.xml’ from the ’server/tomcat-5.0.24/conf’ folder and change <Connector port=”8080″> to <Connector port=”80″>.

To start OpenLaszlo server, click on ‘Start OpenLaszlo Server’ from the Windows start menu or run the script ’startTomcat.bat’ from the ’server/lps-3.2/lps/utils’ folder.

Open a browser window and type http://localhost/lps-3.2/index.html to see if OpenLaszlo has been correctly installed.

Video publishing

Create a new folder called ’streaming’ in the ’server/lps-3.2′ folder inside the OpenLaszlo installation directory.

Create a new file called ‘publish.lzx’ in the ’streaming’ folder with the following contents:

  <canvas>
   <method event=”oninit”>
     // Get the camera
     myCamera = Camera.get();
     
     // Connect to oflaDemo demo application in red5 server
     nc = new NetConnection();
     nc.connect(“rtmp://127.0.0.1/oflaDemo”);
     
     // Publish video from the camera to the red5 server

      ns = new NetStream(nc);
     ns.attachVideo(myCamera);
     ns.publish(“example”, “live”);
   </method>
 </canvas>

The file ‘publish.lzx’ also can be downloaded from publish.zip. Download it to ’streaming’ folder.

Browse to http://localhost/lps-3.2/streaming/publish.lzx?lzr=swf8 to publish the content captured from your camera to the Red5 server.

When the page appears in the browser, Flash plugin will ask for authorization to access to the camera. Authorize it. 

Now, the computer is publishing to Red5 server in live mode.

Video playing

To play de video captured from your camera, create another new file called ‘play.lzx’ in the ’streaming’ folder with the following contents:

  <canvas>
   <view id=”flvView”>
     <method event=”oninit”>
       // Set the video
       this.setSource(‘myVideo.swf’);
     </method>
     
     <method event=”onload”>
       // Connect to oflaDemo demo application in red5 server

        nc = new NetConnection();
       nc.connect(“rtmp://127.0.0.1/oflaDemo”);
     
       // Get the video stream
       ns = new NetStream(nc);
     
       // Attach de stream to the video
       mc = this.getMCRef();
       mc.myVideo.attachVideo(ns);
     

        // Play de video
       ns.play(‘example’);
     </method>
   </view>
 </canvas>

The file ‘play.lzx’ also can be downloaded from play.zip. Download it to ’streaming’ folder.

To play the video, a resource must be incorporated in the OpenLaszlo application. This resource is in the file myVideo.swf. This resource includes a Flash video component and also must be downloaded to the ’streaming’ folder.

In another browser window, browse to http://localhost/lps-3.2/streaming/play.lzx?lzr=swf8 to play the video captured by your camera. You could also connect from another machine for publishing or for playing, but you should change the ip addresses used. 

That’s all folks. 

References

1. OpenLaszlo (http://www.openlaszlo.org/)
   
2. Red5 (http://osflash.org/red5)