Red5 Pro Server Front-End

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

Developer Quickstart
- Requirements
- Further Reading
WebApps Directory Structure
- static
- template
- webapps
Developer Documentation
- Quickstart
- [Developing Pages for a WebApp](#developing-pages for a WebApp)
  - Using Red5 Pro Server
  - Deploying to Red5 Pro Server
    - Deploy
    - Watch
    - Launch
- How To Create a New WebApp
Continuous Integration
Query Params

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

NodeJS (>= 0.12)
NPM (>= 2+)
Red5 Pro Server (see below)

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

NodeJS (>= 0.12)
NPM (>= 2+)
Red5 Pro Server (see below)

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.

Download the latest Red5 Pro Server: https://account.red5pro.com/download
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.

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.

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`

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`

davidoster / red5pro-server-frontend Goto Github PK