Create a Red5 Pro Server Application
Overview
In this tutorial, we will walk through the steps to creating your first Red5 Pro Server Application using maven as our build/dependency management tool. In the process you will learn how to create the project structure, configure the application, handle application lifecycle related events, package/deploy as well as test your new application.
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.red5.net.
* 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 tutorial:
- Java JDK
- Red5 Pro Server
- Eclipse IDE – We suggest installing Eclipse IDE for Java EE Developers
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
- 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,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 onred5.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
Watch a demonstration of the current section
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.
Source Code
The source for this example can be checked out from the following Github repository:
https://github.com/red5pro/red5pro-dev-series.git
Video Walk-Through
This documentation has an accompanying video walk through that you can follow as you are developing.
Create Project
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 accesible 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/live shipped with the Red5 Pro Server distribution and create our first Red5 Pro server application.
Watch a demonstration of the current section
- From the main menu of the Eclipse IDE, select File > New > Other…
- Expand the Maven folder
- Select Maven Project
- Click Next
- Leave the default options
- Click Next
- Type “webapp” in the Filter text input field
- Select the
maven-archetype-webapp
from the filtered results
- Click Next
- Using Reverse domain name conventions, set your Group Id
- Type “example” in the Artifact Id text input field
- Click Finish
- Verify that your workspace is similar to the following:
Configure Project Dependencies
Watch a demonstration of the current section
- Double Click the pom.xml file
- Select the pom.xml tab from the bottom of the pom editor
- Add the following three dependencies under the
junit
dependency. These dependencies add the Servlet and Red5 dependencies which are required for our project to build properly.
<!-- https://mvnrepository.com/artifact/org.apache.tomcat/tomcat-servlet-api -->
<dependency>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcat-servlet-api</artifactId>
<version>8.5.11</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.red5</groupId>
<artifactId>red5-parent</artifactId>
<version>1.0.10-M9</version>
<type>pom</type>
</dependency>
<dependency>
<groupId>org.red5</groupId>
<artifactId>tomcatplugin</artifactId>
<version>2.0.9</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.red5/red5-server -->
<dependency>
<groupId>org.red5</groupId>
<artifactId>red5-server</artifactId>
<version>1.0.10-M9</version>
<type>jar</type>
<scope>provided</scope>
</dependency>
- Add the following properties below the build tag like so:
<build>
<finalName>example</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.5.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.felix</groupId>
<artifactId>maven-bundle-plugin</artifactId>
<extensions>true</extensions>
</plugin>
</plugins>
</build>
<properties>
<maven.compiler.target>1.8</maven.compiler.target>
<maven.compiler.source>1.8</maven.compiler.source>
</properties>
- From the main menu of the Eclipse IDE, select File > Save
- Right-Click the example project from the Project Explorer view
- Select Maven > Update Project…
- Verify that your build errors are no longer present
Setup Source Folder
Watch a demonstration of the current section
- Create the Java source folder by expanding the src > main folders
- Right-Click on the main folder and select New > Folder
- Enter “java” in the Folder Name text field
- Click Finish. The java folder will automatically be added as a source folder in your project.
Setup Spring Configurations
Watch a demonstration of the current section
- We will now add the Red5 Pro context files to our project by locating the
live
application that is included with the Red5 Pro Server distribution. - Select and Copy the WEB-INF folder
- From Eclipse, right-click the src > main > webapp folder in the Project Explorer view
- Paste the previously copied WEB-INF folder
- Click the Overwrite All button
- Delete the classes directory inside of src > main > webapp > WEB-INF
- Expand back into src > main > webapp > WEB-INF and open red5-web.properties
- Modify the webapp.contextPath property to be /example
- Expand src > main > webapp > WEB-INF and open the red5-web.xml file
- Edit the web.handler bean and set the class to com.red5pro.example.ExampleApplication (substitute the package structure according to the package you chose in Create Maven Webapp Project Step 10 above)
- Comment out the streams bean
- Verify that your red5-web.xml file looks similar to the following:
- Expand src > main > webapp > WEB-INF and open the web.xml file
- Modify the display-name tag so that its contents are example
- Modify the context-param webAppRootKey so that its contents are example
- Add the WebSockets filter:
<!-- WebSocket filter -->
<filter>
<filter-name>WebSocketFilter</filter-name>
<filter-class>org.red5.net.websocket.server.WsFilter</filter-class>
<async-supported>true</async-supported>
</filter>
<filter-mapping>
<filter-name>WebSocketFilter</filter-name>
<url-pattern>/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
</filter-mapping>
Create Application Class
Watch a demonstration of the current section
- From the Navigator pane in the Eclipse IDE, Expand the Java Resources source folder
- Right-Click on the src/main/java folder and select New > Class
- In the Java Class dialog, enter in the following field values:
• Package: com.red5pro.example (substitute your package structure as needed)
• Name: ExampleApplication
• Superclass: org.red5.server.adapter.MultiThreadedApplicationAdapter - Click Finish
Handle Application Events
Watch a demonstration of the current section
- Override two methods of the superclass MultiThreadedApplicationAdapter
- While still editing ExampleApplication.java, click on the Eclipse top level menu item Source > Override/Implement methods…
- Select appStart(IScope), appStop(IScope), appConnect(IConnection, Object[]) and appDisconnect(IConnection)
- Click Finish
- Enable WebSocket support in your application by adding this to your appStart() method:
configureApplicationScopeWebSocket(scope);
where:
/**
* Configures a websocket scope for a given application scope.
*
* @param scope Server application scope
*/
private void configureApplicationScopeWebSocket(IScope scope) {
// first get the websocket plugin
WebSocketPlugin wsPlugin = ((WebSocketPlugin) PluginRegistry.getPlugin(WebSocketPlugin.NAME));
// get the websocket scope manager for the red5 scope
WebSocketScopeManager manager = wsPlugin.getManager(scope);
if (manager == null) {
// get the application adapter
MultiThreadedApplicationAdapter app = (MultiThreadedApplicationAdapter) scope.getHandler();
log.debug("Creating WebSocketScopeManager for {}", app);
// set the application in the plugin to create a websocket scope manager for it
wsPlugin.setApplication(app);
// get the new manager
manager = wsPlugin.getManager(scope);
}
// the websocket scope
WebSocketScope wsScope = (WebSocketScope) scope.getAttribute(WSConstants.WS_SCOPE);
// check to see if its already configured
if (wsScope == null) {
log.debug("Configuring application scope: {}", scope);
// create a websocket scope for the application
wsScope = new WebSocketScope(scope);
// register the ws scope
wsScope.register();
}
}
For clean-up add this to appStop():
WebSocketScopeManager manager = ((WebSocketPlugin) PluginRegistry.getPlugin("WebSocketPlugin")).getManager(scope);
manager.removeApplication(scope);
manager.stop();
- Use the inherited log property to logout connection events. Your source should mirror the following:
public class ExampleApplication extends MultiThreadedApplicationAdapter implements ApplicationContextAware{
private ApplicationContext applicationContext;
@Override
public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
this.applicationContext = applicationContext;
}
@Override
public boolean appConnect(IConnection conn, Object[] params) {
log.info("appConnect");
return super.appConnect(conn, params);
}
@Override
public void appDisconnect(IConnection conn) {
log.info("appDisconnect");
super.appDisconnect(conn);
}
@Override
public void appStart(IScope app) {
log.info("appStart");
configureApplicationScopeWebSocket(scope);
super.appStart(app);
}
@Override
public void appStop(IScope scope) {
WebSocketScopeManager manager = ((WebSocketPlugin) PluginRegistry.getPlugin("WebSocketPlugin")).getManager(scope);
manager.removeApplication(scope);
manager.stop();
super.appStop(scope);
}
/**
* Configures a websocket scope for a given application scope.
*
* @param scope Server application scope
*/
private void configureApplicationScopeWebSocket(IScope scope) {
// first get the websocket plugin
WebSocketPlugin wsPlugin = ((WebSocketPlugin) PluginRegistry.getPlugin(WebSocketPlugin.NAME));
// get the websocket scope manager for the red5 scope
WebSocketScopeManager manager = wsPlugin.getManager(scope);
if (manager == null) {
// get the application adapter
MultiThreadedApplicationAdapter app = (MultiThreadedApplicationAdapter) scope.getHandler();
log.debug("Creating WebSocketScopeManager for {}", app);
// set the application in the plugin to create a websocket scope manager for it
wsPlugin.setApplication(app);
// get the new manager
manager = wsPlugin.getManager(scope);
}
// the websocket scope
WebSocketScope wsScope = (WebSocketScope) scope.getAttribute(WSConstants.WS_SCOPE);
// check to see if its already configured
if (wsScope == null) {
log.debug("Configuring application scope: {}", scope);
// create a websocket scope for the application
wsScope = new WebSocketScope(scope);
// register the ws scope
wsScope.register();
}
}
}
Create WebRTC Example Pages
Watch a demonstration of the current section
- Navigate to your WebRTC artifacts that you generated in the Video called Red5 Pro: Getting Started with WebRTC
- Copy the publisher.html, subscriber.html and lib directory
- Paste the copied artifacts in the src > main > webapp folder
- Open the publisher.html file and inside of publisher.init(…) change the streamName to myStream. Change the app property to example. Save file
- Open the subscriber.html file and inside of subscriber.init(…) change the streamName to myStream. Change the app property to example. Save file
Package And Deploy
Watch a demonstration of the current section
- Right-Click the example application from the Project Explorer
- Select Run As > Maven install
Test using WebRTC example
- 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 onred5.bat
- After the server has started, open a web browser and navigate to http://localhost:5080/example/publisher.html
- Open a second browser window and navigate to http://localhost:5080/example/subscriber.html
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