Skip to content

red5pro/red5pro-server-frontend

Repository files navigation

Red5 Pro Logo

Red5 Pro Server Front-End

This project is the front-end facing default webapps pages distributed with the Red5 Pro Server.

Table of Contents

Developer Quickstart

$ npm install
$ npm run start

After the Red5 Pro Server is run, open a second terminal window pointing to your local checkout and:

$ npm run build
$ npm run launch

Requirements

Further Reading

More detailed information can be found toward the end of this documentation as it regards to build and live previewing while developing.

Developer Documentation

WebApps Directory Structure

This section describes the structure of the src/ directory and how it relates to building the client-side facing pages for the WebApps that commonly are accessed on a Red5/Pro Server at http://localhost:5080.

static

The src/static directory contains all the static files that are copied to each webapp directory. Typically, these are common CSS, front, images and additional assets that are needed for most - if not all - webapps.

additional information


crossdomain.xml

This cross-domain policy file allows a SWF loaded in the Flash Player install of a browser to make Cross Domain requests which is required for streaming media and data and well as HTTP requests.

template

The src/template directory contains the templates and partials used in generating the webapp pages upon build. The Handlebars templating library and its syntax are used to define and import templates and partials. The gulp-compile-handlebars plugin is used to generate the pages.

additional information


additional_info.hbs

This is a simple blurb about where to find additional information which is atached to the end of each front-facing webapp page.

applications.hbs

A blurb and links about where, why and how to get the native application examples on the Red5 Pro github account.

footer.hbs

The footer added ot each front-facing webapp page that includes copyright and contact information.

head_meta.hbs

The basic <meta> options for the header used on each front-facing webapp page.

header.hbs

The branding header attached to the top of each front-facing webapp page.

header_ip_field.hbs

The section to the top-right of each front-facing webapp page that shows the IP address from which the page is served, as well as the logic and dialogs for a user to change that value.

ip_address_script.hbs

The JavaScript logic behind header_ip_field.

jsp_header.hbs

The default JSP script added to each front-facing webapp page that accessing cookies and uses Java libraries to determine the IP address.

menu.hbs

The menu shown to the left-side of the content on each front-facing webapp page.

resources-secondscreen.hbs

Additional header resources for second screen example pages. Some documentation may need such additional headers because they will be nested documentation within a webapp directory.

resources.hbs

The resource link list added to each front-facing webapp page.

webapps

The src/webapps is the top level directory for each webapp to be shipped along with released of the Red5 Pro Server.

Currently the Red5 Pro Server is shipped with the following webapps:

root

The root directory is the default directory entered when visiting the server in a browser, http://localhost:5080.

live

The src/webapps/live directory contains the webapp that demonstrates the pub/sub streaming capabilities of the Red5 Pro Server.

Subsciber and Broadcaster pages can be accessed from the landing page or directly through their respective .jsp page. Additionally, there is a default plain subscriber page - flash.jsp - that is a simple embed of Flash that reads in url parameters that are passed to the SWF to automatically begin subscribing to a stream.

The SWF files for broadcaster and subscriber are generated from the flash-clients section of the red5pro-server-examples repository.

secondscreen

The src/webapps/secondscreen directory contains the webapp that demonstrates the Second Screen capabilities of the Red5 Pro Server.

Additionally, there are subdirectories of different examples that show how to use the Second Screen HTML SDK and different control scheme flavors.

Creating A New WebApp?

If you would like to create a new webapp, please refer to the How To Create a New WebApp documentation.

Developer Documentation

This documentation pertains to developers maintaining the Red5 Pro Server FrontEnd project. There are several developer-related tasks and workflows that do not pertain to the End-Users of Red5 Pro; as such, the output generated from this project as a developer is the content that is available to End-Users.

Quickstart

$ npm install
$ npm run start

After the Red5 Pro Server is run, open a second terminal window pointing to your local checkout and:

$ npm run build
$ npm run launch

Requirements

Developing Pages For a WebApp

The site structure of a Red5 server - ultimately a tomcat server - is defined by the directories in the webapps folder of the server.

Using Red5 Pro Server

It is recommended to download a copy of the Red5 Pro Server in order to continuously deploy updates while developing for view and testing.

  1. Download the latest Red5 Pro Server: https://account.red5.net/download
  2. Unzip the download into a location you prefer. For the purposes of my development, I simply added it to the same location as my local checkout of this repository, then added that to the .gitignore file (red5pro-server). You can do the same if you prefer.
  • If you decide to not download and unzip the Red5 Pro Server in this repository root, you will need to modify the location for red5pro-server-local in settings.json.
  1. Start the Red5 Pro server:
$ cd red5pro-server
$ ./red5.sh

By default, Red5 Pro will start at http://localhost:5080.

Deploying to Red5 Pro Server

Deploy

To deploy a build of the pages to the local Red5 Pro Server:

$ npm run deploy:local

This command will run a new build and place the generated files in webapps.

Watch

This build options requires you to have a Red5 Pro Server installed on your machine and its location defined in the settings.json under the red5pro-server param

To interactively develop the pages that are generated and deployed to the local Red5 Pro Server:

$ npm run watch

This will watch the source files and re-generate the build upon any changes, allowing you to actively develop without having to restart the server or manually deploy each time.

You will need to install the Live Reload Plugin for your browser.

Launch

This build options requires you to have a Red5 Pro Server installed on your machine and its location defined in the settings.json under the red5pro-server param

To just launch the alreayd built and deployed pages in your system's default browser:

$ npm run launch

How To Create a New WebApp

The following section describes how to easily start a new webapp to be distributed with the Red5 Pro Server.

The new task is available from the gulp builds and takes a --name option:

$ npm run new -- --name=your-awesome-app

Be sure that the your-awesome-app value for the --name option is unique. This will be the directory name that will be generated in the /webapps directory of the Red5 Pro Server. If you do not provide a unique name, previous webapp files may be overwritten!

Generated Project & Build Task

Upon issuing the command above, the following will be generated:

  • src/webapps/your-awesome-app - The home directory for the webapp, along with the default index.jsp file and necessary WEB-INF directory and contents.
  • scripts/task/webapp/your-awesome-app.js - The default build file for your webapp which will be loaded into the build process. Modify as seen fit (comments are included).

Viewing Your New WebApp

You will need to restart the target Red5 Pro Server in order to see your webapp on http://localhost:5080/your-awesome-app.

Do as you normally would when starting development:

$ npm run build
$ npm run deploy:local
$ npm run watch

These commands will 1) build the new webapp into the distribution directory 2) deploy the webapp to the target Red5 Pro Server and 3) start watching changes to the webapp files to enable live preview.

Continuous Integration

This project is not added as a solo project for Continuous Integration (CI) in the Red5 Pro CI. Instead, this project is pulled, built and distributed on CI of the Red5 Pro Server.

Analytics

Query Params

There are several Query Parameters you can add to the URL to modify settings when viewing the Front-End within the distribution of the Red5 Pro Server.

Query Param Name Type Description Default Value
view String Target tech view to display. rtc, rtmp or hls (Subscriber only). Allows SDK to failover.
ice String Target ICE servers to use in WebRTC transactions. google or moz Allows browser to choose.
audioBW Integer Request Audio Bandwidth undefined (will not attempt to set bandwidth limit)
videoBW Integer Request Video Bandwidth undefined (will not attempt to set bandwidth limit)
videoWidthMin Integer Request Minimum Video Width (Publisher only) 320
videoHeightMin Integer Request Minimum Video Height (Publisher only) 240
videoWidthMax Integer Request Maximum Video Width (Publisher only) 352
videoHeightMax Integer Request Maximum Video Height (Publisher only) 288
framerateMin Integer Request Minimum Framerate (Publisher only) 8
framerateMax Integer Request Maximum Framerate (Publisher only) 24
dc Integer Request to switch over the RTCDataChannel after signalling complete 0

The publisher-only min/max values are desired settings mostly for WebRTC. See https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia.

Usage

To use a query param, append it to the URL with the first parameter prepended with ? and following parameters prepended with &.

For example:

http://localhost:5080/live/broadcast.jsp?view=rtc&ice=google`