Creating Your First Red5 Pro Server Application

In this tutorial, we will walk through the steps to creating your first Red5 Pro Server Application: a service that captures all the available streams currently live on a Red5 Pro server!

Download the Red5 Pro Server Download the latest Red5 Pro Server!

Register A Red5 Pro Account

If you have not done so already, register for an account at https://account.red5pro.com.

* A Trial Account allows for up to 10 concurrent connections, while the Professional license has no connection limit.


Requirements

The following are required to setup the Red5 Pro Server and to follow along with this example:

The Red5 Pro server requires Java 1.7+ or higher. Install Java 1.7+ or higher if not already installed on your machine.


Red Pro Server Installation

  1. Download the Red5 Pro server from the downloads section of the Red5 Pro Accounts site.
  2. Unzip into a location on your local system. For the purposes of this tutorial, we will unzip the Red5 Pro server to: /Users/red5pro-user/red5pro on OSX or /home/red5pro-user/red5pro on Linux.
  3. Start the Red5 Pro server: •  On OSX & Linux: Open Terminal, cd into your Red5 Pro install directory and issue this command: ./red5.sh •  On Windows: Navigate to the Red5 Pro install directory in a File Browser and double-click on red5.bat
  4. After the server has started, open a web browser and navigate to http://localhost:5080
  5. If the server has started successfully, you should see the default landing page for the Red5 Pro server install •  The landing page can be found at /webapps/root/index.jsp of your Red5 Pro installation. You can modify or remove it as desired. For now, we will use it to navigate around and demonstrate what the Red5 Pro server can do!

Eclipse IDE

For the examples, we will be demonstrating how to set up the project in the Eclipse IDE. The steps for setup should be transferrable to the IDE of your choice, as it is the code and method of deployment that we will be more focused on.


Follow the Eclipse IDE Environment Setup here

With our project environment all set, we can begin developing our first Red5 Pro Server application!

Red5Pro Live Application

When the Red5 Pro Server is run, applications are accessible using a web browser from the default port of 5080. If you have the Red5 Pro Server currently running on your machine, you can visit http://localhost:5080 to see the default landing page.

The default landing page and any other web accessbile applications are stored in the /webapp directory of the Red5 Pro server. In this section, we will be creating a new application to be deployed to this directory. We will utilize the /webapp/template shipped with the Red5 Pro Server distribution and create our first Red5 Pro server application.

WebApp

We will use the webapp template shipped with the Red5 Pro Server as a basis for our custom webapp.

  1. From the main menu of the Eclipse IDE, select Window > Show View > Navigator and focus on the Navigator view pane in the IDE Red5 Pro Application
  2. Using a File Browser, locate the /webapps/template directory from your Red5 Pro server installation •  For the purposes of this tutorial, that can be found at /Users/red5pro-user/red5pro-server/webapps/template on OSX or /home/red5pro-user/red5pro-server/webapps/template on Linux
  3. Drag and drop the template directory onto the root Red5ProLive project in the Navigator pane
  4. Select Copy files and folders from the alert displayed Red5 Pro Application
  5. Right-click on the template entry under Red5ProLive project in the Navigator pane and select Rename…
  6. Rename the imported webapp directory to: red5prolive

Your workspace should now look like something similar to the following:

Red5 Pro Application

ApplicationAdapter

The server-side application we will create will display the current live streams available on the Red5 Pro Server.

  1. From the Navigator pane in the Eclipse IDE, right-click on the src directory and select New > Class
  2. In the Java Class dialog, enter in the following field values: •  Package: com.red5pro.live •  Name: Red5ProLive •  Superclass: org.red5.server.adapter.MultiThreadedApplicationAdapter Red5 Pro Application
  3. Click Finish

Your workspace should look similar to the following:

Red5 Pro Application

Before going any further with our application implementation, we will finish setting up our project to be deployed as a webapp.

WEB-INF

We will edit the web template files in order to load the Red5ProLive class created in the previous section.

  1. Open the red5prolive/WEB-INF/red5-web.xml file in the Eclipse IDE
  2. Select the Source tab from the editor in order to edit the XML markup
  3. Replace the class value of the web.handler bean with that of out newly created class: com.red5pro.live.Red5ProLive Red5 Pro Application
  4. Save the red5-web.xml file
  5. Open the red5-web.properties file and change the webapp.contextPath value to be /red5prolive Red5 Pro Application
  6. Save the red5-web.properties file
  7. From the Navigator pane, right-click on the Red5ProLive top-level project and select Properties Red5 Pro Application
  8. Select Java Build Path_ from the project dialog
  9. Select the Source tab from the menu
  10. Under the Default output folder section, click Browse
  11. In the Folder Selection dialog, expand red5prolive/WEB-INF and select the classes folder Red5 Pro Application
  12. Click OK to confirm out of Folder Selection
  13. Click OK to confirm out of the Project Properties dialog
  14. You may be presented with a Setting Build Paths alert, click YES Red5 Pro Application

With the change to output folder for the class generation, your project workspace should look similar to the following:

Red5 Pro Application

Test Deployment

We will deploy our webapp to the /webapps directory of the Red5 Pro Server installation to test that everything is set up properly.

  1. Using a File Browser, navigate to the Red5ProLive project
  2. Copy the entire /red5prolive directory that we have setup in the previous sections Red5 Pro Application
  3. Using a File Browser, navigate to the install directory of Red5 Pro Server •  For the purposes of this example, the new workspace directory will be /Users/red5pro-user/red5prolive on OSX or /home/red5pro-user/red5prolive on Linux
  4. Paste the red5prolive directory into the /webapps directory of the Red5 Pro Server so that the webapp is in the same directory as the other webapps shipped with the Red5 Pro Server - e.g., live, secondscreen, etc. Red5 Pro Application
  5. Start the Red5 Pro Server: •  On OSX & Linux: Open Terminal, cd into your Red5 Pro install directory and issue this command: ./red5.sh •  On Windows: Navigate to the Red5 Pro install directory in a File Browser and double-click on red5.bat
  6. In the console output, you should start to see listings for red5prolive webapp: Red5 Pro Application

Additionally, you can visit http://localhost:5080/red5prolive/ and see the default directory listing of the webapp. In the next section we will change this to display a list of streams.

streamBroadcastStart()

We'll define the streamBroadcastStart method of Red5ProLive that is invoked upon the start of any broadcast from a publisher client.

  1. Open the Red5ProLive.java class in the Eclipse IDE
  2. Add the following streamBroadcastStart method to the class:
        public void streamBroadcastStart(IBroadcastStream stream) {

            IConnection connection = Red5.getConnectionLocal();
            if (connection != null &&  stream != null) {
              System.out.println("Broadcast started for: " + stream.getPublishedName());
              connection.setAttribute("streamStart", System.currentTimeMillis());
              connection.setAttribute("streamName", stream.getPublishedName());
            }

        }

When a stream comes into the application from a client, we assign a streamName attribute to the IConnection instance. This attribute will be accessed in a later method implementation to return a list of stream names.

getLiveStreams()

We'll add to the API of the Red5ProLive application in order to access the current live streams related to the webapp and display them in an accessible webpage from http://localhost:5080/red5prolive.

  1. Open the Red5ProLive.java class in the Eclipse IDE
  2. Add the following getLiveStreams method to the class:

               public List<String> getLiveStreams() {
    
                 Iterator<IClient> iter = scope.getClients().iterator();
                 List<String> streams = new ArrayList<String>();
    
                 return streams;
    
               }
    
  3. To access the current streams and their properties, we will iterate through each connected client. Modify the getLiveStreams method as such:</li></ol>

             public List<String> getLiveStreams() {
    
                 Iterator<IClient> iter = scope.getClients().iterator();
                 List<String> streams = new ArrayList<String>();
    
                 THE_OUTER:while(iter.hasNext()) {
    
                   IClient client = iter.next();
                   Iterator<IConnection> cset = client.getConnections().iterator();
    
                   THE_INNER:while(cset.hasNext()) {
                     IConnection c = cset.next();
                     if (c.hasAttribute("streamName")) {
                       if (!c.isConnected()) {
                         try {
                           c.close();
                           client.disconnect();
                         }
                         catch(Exception e) {
                           // Failure to close/disconnect.
                         }
                         continue THE_OUTER;
                       }
    
                       if (streams.contains(c.getAttribute("streamName").toString())) {
                         continue THE_INNER;
                       }
    
                       streams.add(c.getAttribute("streamName").toString());
                     }
                   }
                 }
    
                 return streams;
             }
    

index.jsp

We'll create the index.jsp page which will be the default page shown when navigating to http://localhost:5080/red5prolive.

  1. In the Navigator pane of the Eclipse IDE, right-click on the _/red5prolive root directory for the webapp
  2. Select New > File
  3. In the New File dialog, enter the following value for the File name: field: index.jsp
  4. That will create a new index.jsp file and open it in the Eclipse IDE
  5. Add the following code to the index.jsp page:

             <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
             <%@ page import="org.springframework.context.ApplicationContext,
                     com.red5pro.server.secondscreen.net.NetworkUtil,
                     org.springframework.web.context.WebApplicationContext,
                     com.red5pro.live.Red5ProLive,
                     java.util.List,
                     java.net.Inet4Address"%>
    
             <%
    
               String ip =  NetworkUtil.getLocalIpAddress();
               ApplicationContext appCtx = (ApplicationContext) application.getAttribute(WebApplicationContext.ROOT_WEB_APPLICATION_CONTEXT_ATTRIBUTE);
               Red5ProLive service = (Red5ProLive) appCtx.getBean("web.handler");
    
               List<String> streamNames = service.getLiveStreams();
               StringBuffer buffer = new StringBuffer();
    
               if(streamNames.size() == 0) {
                 buffer.append("No streams found. Refresh if needed.");
               }
               else {
                 buffer.append("<ul>\n");
                 for (String streamName:streamNames) {
                   buffer.append("<li><a>" + streamName + " on " + ip + "</a></li>\n");
                 }
                 buffer.append("</ul>\n");
               }
    
              %>
    
             <!doctype html>
             <html>
             <body>
               <div>
                 # Streams on Red5ProLive
                 <%=buffer.toString()%>
               </div>
               <hr>
               <div>
                 ## Start a broadcast session on your device to see it listed!
                 <p>In the Settings dialog of the [Red5 Pro Application](https://github.com/red5pro) enter these values:</p>
                 <table>
                   <tr>
                     <td>Server</td>
                     <td>**<%=ip%>**</td>
                   </tr>
                   <tr>
                     <td>App Name</td>
                     <td>**red5prolive**</td>
                   </tr>
                   <tr>
                     <td>Stream Name</td>
                     <td>**helloWorld**</td>
                   </tr>
                 </table>
               </div>
             </body>
             </html>
    

In the script preceding the document declaration, the Red5ProLive instance is invoked to return a list of stream names from the getLiveStreams method we added previously. If the list has at least one live stream currently, it will list the stream names in an unordered list element on the page.

Additionally, there are further instructions to follow in order to see a published stream from the Red5 Pro Application installed on your device.

Deploying

We will deploy the changes we have made to the Red5ProLive webapp to the Red5 Pro Server installation.

  1. Using a File Browser, navigate to the Red5ProLive project
  2. Copy the entire /red5prolive directory that we have setup in the previous sections
  3. Using a File Browser, navigate to the install directory of Red5 Pro Server •  For the purposes of this example, the new workspace directory will be /Users/red5pro-user/red5prolive on OSX or /home/red5pro-user/red5prolive on Linux
  4. If the directory names red5prolive exists, delete it
  5. Paste the red5prolive directory into the /webapps directory of the Red5 Pro Server so that the webapp is in the same directory as the other webapps shipped with the Red5 Pro Server - e.g., live, secondscreen, etc.
  6. Start the Red5 Pro Server:
    •  On OSX & Linux: Open Terminal, cd into your Red5 Pro install directory and issue this command: ./red5.sh
    •  On Windows: Navigate to the Red5 Pro install directory in a File Browser and double-click on red5.bat
  7. Open a web browser and point to http://localhost:5080/red5prolive/

Red5 Pro Application

You should see the wording No streams found. Refresh if needed. displayed, meaning that there are no current streams available. We will start a broadcast session in the next section and refresh to see the changes!

Red5 Pro Client

We will open the Red5 Pro Application and start a broadcast session point at the red5prolive webapp.


In order to follow along with the Streaming examples in this document you must already have a native client installed on your device (current support is for Android and iPhone). In order to fulfill this requirement, you must build and install one of the following:

Download the iOS Red Pro Native Client Example Download the latest Native Client Example for iOS

Download the Android Red Pro Native Client Example Download the latest Native Client Example for Android


  1. Start the Red5 Pro Server, if not already running
  2. In a web browser, navigate to http://localhost:5080/red5prolive/ and take note of the Settings table values listed
    •  For the purposes of this tutorial, the Server values is listed as 10.0.0.15 since we are running locally on our development machine
  3. Launch the Red5 Pro application on your device and select Publish from the menu
  4. In the Settings dialog shown in the Red5 Pro application on your device, change the Server, App Name and Stream Name field values to those listed in the table element on http://localhost:5080/red5prolive/
  5. From the Settings dialog, click Done
  6. In the lower right of the Red5 Pro application on your device is a Record/Stop button, click to start recording
  7. Refresh http://localhost:5080/red5prolive/ in the browser
  8. You should now see one listing shown that shows the Stream Name value you provided in the Settings dialog

Conclusion

Congratulations! You have just created your first Red5 Pro Server Application!

This tutorial only scratched the surface of what is capable with live streaming on the Red5 Pro Server. We hope you go forth and start stretching the limits :)


Troubleshooting

The following sections may aide in troubleshooting any issues may come across in trying the previous examples.

If you have further questions, please contact us at red5pro@infrared5.com

Required open ports

The following default ports are required to be open in order to allow for Live Streaming and Second Screen:

  • 5080 : default web access of Red5
  • 1935 : default Red5 RTMP port
  • 8554 : default RTSP port
  • 8088 : default Second Screen Client registry
  • 6262 : default Second Screen Host registry