This project is the front-end facing default webapps pages distributed with the Red5 Pro Server.
- Developer Quickstart
- WebApps Directory Structure
- Developer Documentation
- Quickstart
- [Developing Pages for a WebApp](#developing-pages for a WebApp)
- How To Create a New WebApp
- Continuous Integration
- Query Params
$ 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
- NodeJS (>= 0.12)
- NPM (>= 2+)
- Red5 Pro Server (see below)
More detailed information can be found toward the end of this documentation as it regards to build and live previewing while developing.
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.
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.
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.
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.
This is a simple blurb about where to find additional information which is atached to the end of each front-facing webapp page.
A blurb and links about where, why and how to get the native application examples on the Red5 Pro github account.
The footer added ot each front-facing webapp page that includes copyright and contact information.
The basic <meta> options for the header used on each front-facing webapp page.
The branding header attached to the top of each front-facing webapp page.
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.
The JavaScript logic behind header_ip_field.
The default JSP script added to each front-facing webapp page that accessing cookies and uses Java libraries to determine the IP address.
The menu shown to the left-side of the content on each front-facing webapp page.
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.
The resource link list added to each front-facing webapp page.
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:
The root directory is the default directory entered when visiting the server in a browser, http://localhost:5080.
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.
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.
If you would like to create a new webapp, please refer to the How To Create a New WebApp 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.
$ 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
- NodeJS (>= 0.12)
- NPM (>= 2+)
- Red5 Pro Server (see below)
The site structure of a Red5 server - ultimately a tomcat server - is defined by the directories in the webapps folder of the 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.red5.net/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-localin settings.json.
- Start the Red5 Pro server:
$ cd red5pro-server
$ ./red5.sh
By default, Red5 Pro will start at http://localhost:5080.
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.
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.
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
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!
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).
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.
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.
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.
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`