How to create a sample application using Red5 and Flash

How to create a sample application using Red5 and Flash

Step 1:-

Get a default application template from doc folder of your Red5 installation directory (e.g. for windows: - “C:\Program files\Red5\doc\templates\myapp”).
Copy this folder into Red5\webapps\ directory.

Step2:-

Now we have a default template available for running the server side application. We will change the default configuration accordingly. Rename myapp folder to sample. This sample folder will be the name of your application. We will now change the configuration files inside sample folder. The structure of the application will be like this-




Open the red5-web.properties file and change the contextPath to sample like below –

webapp.contextPath=/sample
webapp.virtualHosts=localhost, 127.0.0.1

Open web.xml file and change the display and webAppRootKey like below–

</DISPLAY-NAME>My First sample application with Red5</DISPLAY-NAME>

<context-param>
<param-name>webAppRootKey</param-name>
<param-value>/sample</param-value>
</context-param>

Now open the red5-web.xml file and change the application name likes below-

<bean id="web.handler"
class="org.xyz.Application"
singleton="true" />

where org.xyz is the package structure used here. It could be replaced with actual application structure.
lib directory will contain the jar file of our application. We will explore it later while creating an application.

Step3:-

We are ready with the server side application configuration. Now we will create the actual application which will interact with the flash client.

Open any java IDE like eclipse and create a new java project. Name it to Sample. Create following structure in the Sample project.





src folder will contain the application package structure org.xyz. Compiled class file will be under classes folder and lib folder will contain the jar of compiled class.

Now create a build.xml file for building this project with ant tool. The sample build file will be like this-
<project name="My Sample Red5 Project" default="compile" basedir=".">

<target name="clean" description="Clean output directories">

</target>

<target name="compile" depends="clean">
<javac destdir="./classes" source="1.5">

</javac>
</target>

<target name = "jar" depends ="compile">
<echo message ="Getting class files from classes directory"/>
<jar destfile="./lib/app.jar" basedir="./classes"/>
<echo message ="jar creation done"/>
<copy file ="./lib/app.jar" tofile ="C:\Program Files\Red5\webapps\sample\WEB-INF\lib\app.jar"/>
<echo message="jar copied to red5"/>
</target>
</project>

Here in “jar” target we have copied the created jar file inside our application directory under webapps folder of Red5 installation. One can manually do the copy paste.

Note: - Don’t forget to add red5.jar from your Red5 installation in the CLASSPATH of eclipse so that it can find the Red5 libraries and compile the application without any errors..

Step4:-

Now we will create our source file. Create a java file, name it to Application.java

The sample application file will be like –

Application.java

package org.xyz;

//log4j classes
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

//Red5 classes
import org.red5.server.adapter.ApplicationAdapter;
import org.red5.server.api.IClient;
import org.red5.server.api.IConnection;
import org.red5.server.api.IScope;

/**This is the sample application class */

public class Application extends ApplicationAdapter{
/**Variable used for generating the log*/
private static final Log log = LogFactory.getLog(Application.class);

/**This method will execute when Red5 server will start*/
public boolean appStart(IScope app){
if(super.appStart(app) == false){
return false;
}
log.info("Application start method of Application called");
return true;
}

/**This method will execute when first client will connect to Red5 server*/
public boolean roomStart(IScope room){
if(super.roomStart(room) == false){
return false;
}
log.info("Inside room start of Application");
return true;
}

/**This method will execute everytime when a client will connect to Red5 server*/
public boolean roomConnect(IConnection conn, Object params[]){
if(super.roomConnect(conn, params) == false){
return false;
}
log.info("Inside room connect method of Application");
return true;
}

/**This method will be called when a client disconnect from the room*/
public void roomDisconnect(IConnection conn){
super.roomDisconnect(conn);
log.info("Inside room disconnect method of Application");
}

/**This method will be called when a client will be disconnected from application*/
public void appDisconnect(IConnection conn){
log.info("Inside app disconnect method of Application");
}

/**This method will be called from the client. This method will show “Hello World!” on *the flash client side .
*/
public String sayHello(Object[] params){
log.info(“I got your name:-”+params[0].toString());
return “Hello World!” + params[0].toString();
}


} ////////End of Application class

The above file was just to give a feel of how a server side code looks like.
Read Red5 documentation for more details on methods in AplicationAdapter class. Here we have defined a method named sayHello, which will get user name from flash client and will append this user name to “Hello World!” and will send back to flash client.

Now run the jar task of your build.xml file, this will compile your application class, will generate the desired jar and will copy it to your application directory inside Red5.

Step5:-

Now we are ready with server side application, we will start with the flash application to connect with the Red5 server.

Create a new flash document –

Drag an Alert component from window—components in the library. Open the Action-Frame and write the following lines of code-

import mx.controls.Alert;


var nc:NetConnection = new NetConnection();

nc.val = this;
nc.onStatus = function(info){
switch(info.code){

case "NetConnection.Connect.Success":
Alert.show("Got connected with application);
this.val.callServer();
break;

case "NetConnection.Connect.Failed":
Alert.show(info.application);
break;

case "NetConnection.Connect.Rejected":
Alert.show(info.application);
break;

case "NetConnection.Connect.Closed":
Alert.show("Client Disconnected");
break;
}
};
nc.connect("rtmp://localhost/sample");

function callServer(){
var resultObj:Object = new Object();
nc.call("sayHello", resultObj,"Your Name");
resultObj.onResult = function(str){
Alert.show(str); //This will display "Hello World! Your Name"
}
};
}

Now save the application and name it to sample.fla(user preferred)
The above code is Action script 1 code; you can put this code in external .As file and refer it in the application. Since this is not in the scope of this tutorial, so we will follow the above code.

Finish:-

Run your flash client and if its get successfully connect with Red5 server, it will display an alert box saying “Hello World! Your Name”

With the help of above tutorial, you can extend your application to any level.

For more information on Red5 related documents follow the link provided below-

Red5- Open source flash server
Red5-How to create new applications – Joachim Baunch
Migration Guide from FCS/FMS to Red5
Red5-How to create new application