Red5 Pro Live Example
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!
Requirements
The following are required to set up the Red5 Pro Server and to follow along with this example:
- Java JDK
- Red5 Pro Server
- Eclipse IDE - Suggest installing Eclipse IDE for Java EE Developers
As of release 9.0.0, the Red5 Pro server requires Java 11. Install Java JDK if not already installed on your machine.
Red Pro Server Installation
- Download the Red5 Pro server from the downloads section of the Red5 Pro Accounts site.
- 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.
- Start the Red5 Pro server:
- On OSX & Linux: Open Terminal,
cdinto 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 - After the server has started, open a web browser and navigate to
http://localhost:5080 - 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.
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 running, 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-accessible 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 web app templateshipped with the Red5 Pro Server as a basis for our custom web app.
- From the main menu of the Eclipse IDE, select Window > Show View > Navigator and focus on the Navigator view pane in the IDE
- 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
- Drag and drop the template directory onto the root Red5ProLive project in the Navigator pane
- Select Copy files and folders from the alert displayed
- Right-click on the template entry under Red5ProLive project in the Navigator pane and select Rename…
- Rename the imported webapp directory to: red5prolive
Your workspace should now look like something similar to the following:
ApplicationAdapter
The server-side application we will create will display the current live streams available on the Red5 Pro Server.
- From the Navigator pane in the Eclipse IDE, right-click on the src directory and select New > Class
- In the Java Class dialog, enter in the following field values:
• Package: com.red5pro.live
• Name: Red5ProLive
• Superclass: org.red5.server.adapter.MultiThreadedApplicationAdapter
- Click Finish
Your workspace should look similar to the following:
Before going any further with our application implementation, we will finish setting up our project to be deployed as a web app.
WEB-INF
We will edit the web template files in order to load the Red5ProLive class created in the previous section.
- Open the red5prolive/WEB-INF/red5-web.xml file in the Eclipse IDE
- Select the Source tab from the editor in order to edit the XML markup
- Replace the
classvalue of theweb.handlerbean with that of out newly created class:com.red5pro.live.Red5ProLive
- Save the red5-web.xml file
- Open the red5-web.properties file and change the
webapp.contextPathvalue to be /red5prolive
- Save the red5-web.properties file
- From the Navigator pane, right-click on the Red5ProLive top-level project and select Properties
- Select _Java Build Path__ from the project dialog
- Select the Source tab from the menu
- Under the Default output folder section, click Browse
- In the Folder Selection dialog, expand red5prolive/WEB-INF and select the classes folder
- Click OK to confirm out of Folder Selection
- Click OK to confirm out of the Project Properties dialog
- You may be presented with a Setting Build Paths alert, click YES
With the change to the output folder for the class generation, your project workspace should look similar to the following:
Test Deployment
We will deploy our web app to the /webapps directory of the Red5 Pro Server installation to test that everything is set up properly.
- Using a File Browser, navigate to the Red5ProLive project
- Copy the entire /red5prolive directory that we have setup in the previous sections
- 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
- Paste the red5prolive directory into the /webapps directory of the Red5 Pro Server so that the web app is in the same directory as the other webapps shipped with the Red5 Pro Server - e.g., live, secondscreen, etc.
- Start the Red5 Pro Server:
- On OSX & Linux: Open Terminal,
cdinto 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 - In the console output, you should start to see listings for red5prolive webapp:
Additionally, you can visit http://localhost:5080/red5prolive/ and see the default directory listing of the web app. 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.
- Open the Red5ProLive.java class in the Eclipse IDE
- Add the following
streamBroadcastStartmethod 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 web app and display them on 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:
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.
- In the Navigator pane of the Eclipse IDE, right-click on the _/red5prolive root directory for the web app
- Select New > File
- In the New File dialog, enter the following value for the File name: field: index.jsp
- That will create a new index.jsp file and open it in the Eclipse IDE
- 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 web app to the Red5 Pro Server installation.
- Using a File Browser, navigate to the Red5ProLive project
- Copy the entire /red5prolive directory that we have set up in the previous sections
- 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
- If the directory name red5prolive exists, delete it
- Paste the red5prolive directory into the /webapps directory of the Red5 Pro Server so that the web app is in the same directory as the other web apps shipped with the Red5 Pro Server - e.g., live, secondscreen, etc.
- Start the Red5 Pro Server:
• On OSX & Linux: Open Terminal,cdinto 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 onred5.bat - Open a web browser and point to http://localhost:5080/red5prolive/
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 web app.
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 latest Native Client Example for iOS
Download the latest Native Client Example for Android
- Start the Red5 Pro Server, if not already running
- 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 are listed as 10.0.0.15 since we are running locally on our development machine
- Launch the Red5 Pro application on your device and select Publish from the menu
- 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/ - From the Settings dialog, click Done
- In the lower right of the Red5 Pro application on your device is a Record/Stop button, click to start recording
- Refresh
http://localhost:5080/red5prolive/in the browser - 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 achievable with live streaming on the Red5 Pro Server. We hope you go forth and start stretching the limits!
Troubleshooting
If you have further questions, please submit a ticket to the helpdesk
Required open ports
The following default ports are required to be open in order to allow for Live Streaming:
- 5080 : default web access of Red5
- 1935 : default Red5 RTMP port
- 8554 : default RTSP port
- UDP 40000-65535 : WebRTC ICE negotiation ports