Latest commit b6a4bdc Aug 8, 2016 @mondain mondain committed on GitHub Added link directly to the build zip

README.md

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!

If you have not done so already, start an account at https://account.red5pro.com. The Developer account allows for up to 10 concurrent connections, while the Pro license has no connection limit.

Requirements

The following software is required before starting this tutorial:

Red5 Pro Server

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

  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.
  3. Optional: Add your Red5 Pro license, if you have signed up for the Pro account.
  4. 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
  5. After the server has started, open a web browser and navigate to http://localhost:5080
  6. 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.

Environment Setup

The following steps describe how to setup a new project in the Eclipse IDE that will be runnable under the Red5 Pro Server.

  1. Open the Eclipse IDE into a new workspace
    • For the purposes of this example, the new workspace directory will be /Users/red5pro-user/red5prolive
  2. From the main menu, select the File > New > Java Project

    Red5 Pro Application

  3. In the Create a Java Project dialog, enter in Red5ProLive for the Project name field

    Red5 Pro Application

  4. Click Next
  5. In the Java Settings dialog, select the Libraries tab

    Red5 Pro Application

  6. Click the Add Variable button
    • We will be defining our Red5 Pro server install as a library dependency resource
  7. In the New Variable Classpath Entry dialog, click Configure Variables

    Red5 Pro Application

  8. In the Classpath Variables dialog, click New...
  9. In the New Variable Entry dialog, enter RED5PRO_ROOT for the Name field, and define the Path value as the root of your Red5 Pro server install. For the purposes of this tutorial, that is /Users/red5pro-user/red5pro-server/

    Red5 Pro Application

  10. Click OK and OK again until you are navigated back to the New Variable Classpath Entry dialog
  11. From the New Variable Classpath Entry dialog, select the new RED5PRO_ROOT entry and click Extend...
  12. Select the red5-server.jar from the listing and click OK

    Red5 Pro Application

  13. You will be redirected back to the Java Build Path dialog
  14. Repeat Steps 6-11, and select the /lib/red5-server-common.jar from the list and click OK

    Red5 Pro Application

  15. Click Finish in the New Java Project dialog once you've selected the libraries With our project environment all setup, we can begin developing our first Red5 Pro Server application!

Red5ProLive 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 /webapps/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. Right click in the Navigator pane and select Import...
  3. In the Import dialog, expand General and select Archive File then click Next

  4. Click Browse to select the archive file; this will open the file browse panel

  5. Browse to the build.zip file, select it and click Ok
  6. Click Browse to select the "Into folder"; this will open the project browse panel

  7. Select "Red5ProLive" and click Ok

  8. Click Finish
  9. Click Window > Show View > Ant

  10. In the Ant panel, click on "Add Buildfiles" icon

  11. In the Buildfile Selection dialog, expand "Red5ProLive" and select "build.xml" then click Ok

Get the default project templates

  1. In the Ant panel select the script and expand it
  2. Double click the copy-templates item in the list
  3. You will be prompted to enter the path to your Red5 Pro server directory, for the purposes of this tutorial enter /Users/red5pro-user/red5pro-server/
  4. Click Ok
  5. The path entered will be saved to a local project properties file, so that you won't be prompted for it again. If you more the Red5 Pro server directory, you have to edit your build.properties file

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 cerated 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. In the Ant panel select the script and expand it, if not already expanded
  2. Double click the deploy item in the list
  3. If Red5 Pro is running, it will be shutdown and restarted after the files are deployed. If its not running, it will be started.
  4. 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](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;
    }
  1. To access the current streams and their properties, we will iterate through each connected client. Modify the getLiveStreams method as such:
    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](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>
        <h1>Streams on Red5ProLive</h1>
        <%=buffer.toString()%>
      </div>
      <hr>
      <div>
        <h2>Start a broadcast session on your device to see it listed!</h2>
        <p>In the Settings dialog of the <a href="https://github.com/red5pro">Red5 Pro Application</a> enter these values:</p>
        <table>
          <tr><td>Server</td><td><b><%=ip%></b></td></tr>
          <tr><td>App Name</td><td><b>red5prolive</b></td></tr>
          <tr><td>Stream Name</td><td><b>helloWorld</b></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. In the Ant panel select the script and expand it, if not already expanded
  2. Double click the deploy item in the list
  3. If Red5 Pro is running, it will be shutdown and restarted after the files are deployed. If its not running, it will be started.
  4. In the console output, you should start to see listings for red5prolive webapp:

    Red5 Pro Application

  5. 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.

If you have not already installed the Red5 Pro Application on your device, you can find them in the following stores:

On iOS
On 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