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 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 tutorial:

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.

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 a Red5 Pro Application


Start Red5 and Open Landing Page

Watch a demonstration of the current section
  1. Navigate to the $RED5_PRO_HOME directory
  2. Issue sudo ./red5.sh and wait for server to complete its startup
  3. Open a browser and navigate to http://localhost:5080

Running the Live Streaming Example

Watch a demonstration of the current section
  1. From the Red5 Pro landing page, click on the Broadcast link
  2. Enter a name in the Stream Name text field
  3. Click Start Broadcast
  4. Right-Click on the Subscribe link on the left side menu
  5. Click Open Link In New Window
  6. Scroll down to the section where it displays a list of stream names
  7. Click on the link that allows you to view your stream

Running the WebRTC Examples

Watch a demonstration of the current section
  1. Navigate to $RED5_PRO_HOME/webapps/webrtc in your filesystem and view the files
  2. From a browser navigate to http://localhost:5080/webrtcexamples
  3. Do not change any of the default values on the Settings page
  4. Click on the Testbed menu link at the upper left hand of the page
  5. Click on Publish 1080p
  6. Open a second window and navigate to http://localhost:5080/webrtcexamples
  7. Click on the Testbed Menu in the second window
  8. Click on the Subscribe example
  9. View your stream that you are publishing in the first window

Downloading the WebRTC Examples

Watch a demonstration of the current section
  1. Open a browser window to https://www.red5pro.com/
  2. Click on the DOCS Menu link at the top of the page
  3. Click on Streaming SDKs > View the Streaming Examples links
  4. Scroll down the page and click on Download the latest Streaming SDK Examples for HTML5
  5. Either clone the repository with Git or download a release from the releases menu link

Downloading the HTML5 SDK

Watch a demonstration of the current section
  1. Open a browser window to https://www.red5pro.com/docs
  2. Click on Streaming SDKs > HTML5 SDK link
  3. On the loaded page, click on Download the latest Streaming SDK for HTML5. This will bring you to the accounts login page
  4. Log in with your registered Red5 Pro account
  5. Click on the Downloads link
  6. Click on the Download the Streaming SDK [version] for HTML5 link
  7. Locate the zipped file on your file system
  8. Unzip the file

Creating a Publisher

Watch a demonstration of the current section
  1. From your File System, create a folder called examples
  2. Open an editor that points at the examples folder
  3. Create a file named publisher.html
  4. To start, add the video element to the web page above the library dependencies in the body:

      ...
      <body>
        <div id="video-container">
          <video id="red5pro-publisher"></video>
        </div>
      </body>
      ...
      <!-- WebRTC Shim -->
      <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
      <!-- Exposes `red5prosdk` on the window global. -->
      <script src="lib/red5pro/red5pro-sdk.min.js"></script>
      ...
    
  5. Create a Red5 Pro Publisher and attach it to a view

       // Create a new instance of the WebRTC publisher.
        var publisher = new red5prosdk.RTCPublisher();
    
        // Create a view instance based on video element id.
        var view = new red5prosdk.PublisherView('red5pro-publisher');
        view.attachPublisher(publisher);
    
  6. Get access to the user media

     // Access user media.
        navigator.getUserMedia({
          audio: true,
          video: true
        }, function(media) {
    
          // Upon access of user media,
          // 1. Attach the stream to the publisher.
          // 2. Show the stream as preview in view instance.
          publisher.attachStream(media);
          view.preview(media, true);
    
        }, function(error) {
          console.error(error);
        });
    
  7. Initialize the publisher and use it to publish your broadcast

        // Using Chrome/Google TURN/STUN servers.
        var iceServers = [{urls: 'stun:stun2.l.google.com:19302'}];
    
        // Initialize
        publisher.init({
            protocol: 'ws',
            host: 'localhost',
            port: 8081,
            app: 'live',
            streamName: 'mystream',
            iceServers: iceServers,
            tcpMuxPolicy: 'negotiate'
          })
          .then(function() {
            // Invoke the publish action
            return publisher.publish();
          })
          .catch(function(error) {
            // A fault occurred while trying to initialize and publish the stream.
            console.error(error);
          });
    

Creating a Subscriber

Watch a demonstration of the current section
  1. From your File System, create a folder called examples
  2. Open an editor that points at the examples folder
  3. Create a file named subscriber.html
  4. To start, add the video element to the web page above the library dependencies in the body:

      ...
      <body>
        <div id="video-container">
          <video id="red5pro-publisher"></video>
        </div>
      </body>
      ...
      <!-- WebRTC Shim -->
      <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
      <!-- Exposes `red5prosdk` on the window global. -->
      <script src="lib/red5pro/red5pro-sdk.min.js"></script>
      ...
    
  5. Access the red5prosdk global and create a new RTCSubscriber and PlaybackView:

      ...
      <script>
    
     // Create a new instance of the WebRTC subcriber.
        var subscriber = new red5prosdk.RTCSubscriber();
    
        // Create a view instance based on video element id.
        var viewer = new red5prosdk.PlaybackView('red5pro-subscriber');
        // Attach the subscriber to the view.
        viewer.attachSubscriber(subscriber);
    
      </script>
      ...
    
  6. After establishing a subscriber and PlaybackView, initialize the subscriber:

        // Using Chrome/Google TURN/STUN servers.
        var iceServers = [{urls: 'stun:stun2.l.google.com:19302'}];
    
        // Initialize
        subscriber.init({
            protocol: 'ws',
            host: 'localhost',
            port: 8081,
            app: 'authexample',
            streamName: 'aaa',
            iceServers: iceServers,
            subscriptionId: 'subscriber-' + Math.floor(Math.random() * 0x10000).toString(16),
            rtcpMuxPolicy: 'negotiate'
          })
          .then(function() {
            // Invoke the playback action
            return subscriber.play();
          })
          .catch(function(error) {
            // A fault occurred while trying to initialize and subscribe to the stream.
            console.error(error);
          });
    

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. Please also refer to our troubleshooting guide

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