{"id":26802540,"url":"https://github.com/red5pro/red5pro-server-frontend","last_synced_at":"2026-05-21T00:01:36.818Z","repository":{"id":3838697,"uuid":"43512039","full_name":"red5pro/red5pro-server-frontend","owner":"red5pro","description":"The Front-End webapps pages distributed with the Red5 Pro Server","archived":false,"fork":false,"pushed_at":"2026-05-19T21:00:34.000Z","size":24053,"stargazers_count":20,"open_issues_count":33,"forks_count":13,"subscribers_count":16,"default_branch":"master","last_synced_at":"2026-05-20T00:14:50.829Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.red5pro.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/red5pro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2015-10-01T18:02:53.000Z","updated_at":"2025-10-16T22:47:49.000Z","dependencies_parsed_at":"2023-02-17T22:30:39.908Z","dependency_job_id":"ff41988c-9324-4c4a-a069-46b56a99420f","html_url":"https://github.com/red5pro/red5pro-server-frontend","commit_stats":null,"previous_names":[],"tags_count":664,"template":false,"template_full_name":null,"purl":"pkg:github/red5pro/red5pro-server-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Fred5pro-server-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Fred5pro-server-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Fred5pro-server-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Fred5pro-server-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/red5pro","download_url":"https://codeload.github.com/red5pro/red5pro-server-frontend/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Fred5pro-server-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33281294,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-20T15:12:43.734Z","status":"ssl_error","status_checked_at":"2026-05-20T15:12:42.300Z","response_time":356,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-29T21:18:32.213Z","updated_at":"2026-05-21T00:01:36.763Z","avatar_url":"https://github.com/red5pro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch3 align=\"center\"\u003e\n  \u003cimg src=\"assets/Red5_Truetime_black.png\" alt=\"Red5 Pro Logo\" height=\"65\" /\u003e\n\u003c/h3\u003e\n\n# Red5 Pro Server Front-End\n\nThis project is the front-end facing default **webapps** pages distributed with the Red5 Pro Server.\n\n# Table of Contents\n\n- [Developer Quickstart](#developer-quickstart)\n  - [Requirements](#requirements)\n  - [Further Reading](#further-reading)\n- [WebApps Directory Structure](#webapps-directory-structure)\n  - [static](#static)\n  - [template](#template)\n  - [webapps](#webapps)\n    - [root](#root)\n    - [live](#live)\n    - [secondscreen](#secondscreen)\n    - [Creating A New WebApp?](#creating-a-new-webapp)\n- [Developer Documentation](#developer-documentation)\n  - [Quickstart](#quickstart)\n  - [Developing Pages for a WebApp](#developing-pages for a WebApp)\n    - [Using Red5 Pro Server](#using-red5-pro-server)\n    - [Deploying to Red5 Pro Server](#deploying-to-red5-pro-server)\n      - [Deploy](#deploy)\n      - [Watch](#watch)\n      - [Launch](#launch)\n  - [How To Create a New WebApp](#how-to-create-a-new-webapp)\n- [Continuous Integration](#continuous-integration)\n- [Query Params](#query-params)\n\n# Developer Quickstart\n\n```\n$ npm install\n$ npm run start\n```\n\nAfter the Red5 Pro Server is run, open a second terminal window pointing to your local checkout and:\n\n```\n$ npm run build\n$ npm run launch\n```\n\n## Requirements\n\n- [NodeJS](https://nodejs.org/en/download/package-manager/) (\u003e= 0.12)\n- NPM (\u003e= 2+)\n- [Red5 Pro Server](https://account.red5.net/download) (see below)\n\n## Further Reading\n\nMore detailed information can be found toward the end of this documentation as it regards to build and live previewing while developing.\n\n[Developer Documentation](#developer-documentation)\n\n# WebApps Directory Structure\n\nThis 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](http://localhost:5080).\n\n## static\n\nThe **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.\n\n### additional information\n\n---\n\n#### crossdomain.xml\n\nThis 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.\n\n## template\n\nThe **src/template** directory contains the templates and partials used in generating the webapp pages upon build. The [Handlebars](http://handlebarsjs.com/) templating library and its syntax are used to define and import templates and partials. The [gulp-compile-handlebars](https://www.npmjs.com/package/gulp-compile-handlebars) plugin is used to generate the pages.\n\n### additional information\n\n---\n\n#### additional_info.hbs\n\nThis is a simple blurb about where to find additional information which is atached to the end of each front-facing webapp page.\n\n#### applications.hbs\n\nA blurb and links about where, why and how to get the native application examples on the Red5 Pro github account.\n\n#### footer.hbs\n\nThe footer added ot each front-facing webapp page that includes copyright and contact information.\n\n#### head_meta.hbs\n\nThe basic \u0026lt;meta\u0026gt; options for the header used on each front-facing webapp page.\n\n#### header.hbs\n\nThe branding header attached to the top of each front-facing webapp page.\n\n#### header_ip_field.hbs\n\nThe 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.\n\n#### ip_address_script.hbs\n\nThe JavaScript logic behind _header_ip_field_.\n\n#### jsp_header.hbs\n\nThe default JSP script added to each front-facing webapp page that accessing cookies and uses Java libraries to determine the IP address.\n\n#### menu.hbs\n\nThe menu shown to the left-side of the content on each front-facing webapp page.\n\n#### resources-secondscreen.hbs\n\nAdditional header resources for second screen example pages. Some documentation may need such additional headers because they will be nested documentation within a webapp directory.\n\n#### resources.hbs\n\nThe resource link list added to each front-facing webapp page.\n\n## webapps\n\nThe **src/webapps** is the top level directory for each webapp to be shipped along with released of the Red5 Pro Server.\n\nCurrently the Red5 Pro Server is shipped with the following webapps:\n\n### root\n\nThe **root** directory is the default directory entered when visiting the server in a browser, [http://localhost:5080](http://localhost:5080).\n\n### live\n\nThe **src/webapps/live** directory contains the webapp that demonstrates the pub/sub streaming capabilities of the Red5 Pro Server.\n\nSubsciber 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.\n\nThe SWF files for broadcaster and subscriber are generated from the **flash-clients** section of [the red5pro-server-examples repository](https://github.com/red5pro/red5pro-server-examples/tree/master/flash-clients).\n\n### secondscreen\n\nThe **src/webapps/secondscreen** directory contains the webapp that demonstrates the Second Screen capabilities of the Red5 Pro Server.\n\nAdditionally, there are subdirectories of different examples that show how to use the Second Screen HTML SDK and different control scheme flavors.\n\n### Creating A New WebApp?\n\nIf you would like to create a new webapp, please refer to the [How To Create a New WebApp](#how-to-create-a-new-webapp) documentation.\n\n# Developer Documentation\n\nThis 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.\n\n## Quickstart\n\n```\n$ npm install\n$ npm run start\n```\n\nAfter the Red5 Pro Server is run, open a second terminal window pointing to your local checkout and:\n\n```\n$ npm run build\n$ npm run launch\n```\n\n### Requirements\n\n- [NodeJS](https://nodejs.org/en/download/package-manager/) (\u003e= 0.12)\n- NPM (\u003e= 2+)\n- [Red5 Pro Server](https://account.red5.net/download) (see below)\n\n## Developing Pages For a WebApp\n\nThe site structure of a Red5 server - ultimately a tomcat server - is defined by the directories in the **webapps** folder of the server.\n\n### Using Red5 Pro Server\n\nIt is recommended to download a copy of the Red5 Pro Server in order to continuously deploy updates while developing for view and testing.\n\n1. Download the latest Red5 Pro Server: [https://account.red5.net/download](https://account.red5.net/download)\n2. 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.\n\n- 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](settings.json).\n\n4. Start the Red5 Pro server:\n\n```\n$ cd red5pro-server\n$ ./red5.sh\n```\n\nBy default, Red5 Pro will start at [http://localhost:5080](http://localhost:5080).\n\n## Deploying to Red5 Pro Server\n\n### Deploy\n\nTo deploy a build of the pages to the local Red5 Pro Server:\n\n```\n$ npm run deploy:local\n```\n\nThis command will run a new build and place the generated files in **webapps**.\n\n### Watch\n\n_This build options requires you to have a Red5 Pro Server installed on your machine and its location defined in the [settings.json](settings.json) under the **red5pro-server** param_\n\nTo interactively develop the pages that are generated and deployed to the local Red5 Pro Server:\n\n```\n$ npm run watch\n```\n\nThis 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.\n\n**You will need to install the [Live Reload Plugin](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en) for your browser.**\n\n### Launch\n\n_This build options requires you to have a Red5 Pro Server installed on your machine and its location defined in the [settings.json](settings.json) under the **red5pro-server** param_\n\nTo just launch the alreayd built and deployed pages in your system's default browser:\n\n```\n$ npm run launch\n```\n\n## How To Create a New WebApp\n\nThe following section describes how to easily start a new webapp to be distributed with the Red5 Pro Server.\n\nThe `new` task is available from the **gulp** builds and takes a `--name` option:\n\n```\n$ npm run new -- --name=your-awesome-app\n```\n\nBe 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!**\n\n### Generated Project \u0026 Build Task\n\nUpon issuing the command above, the following will be generated:\n\n- **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.\n- **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).\n\n### Viewing Your New WebApp\n\n_You will need to restart the target Red5 Pro Server in order to see your webapp on [http://localhost:5080/your-awesome-app](http://localhost:5080/your-awesome-app)_.\n\nDo as you normally would when starting development:\n\n```\n$ npm run build\n$ npm run deploy:local\n$ npm run watch\n```\n\nThese 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.\n\n# Continuous Integration\n\nThis 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.\n\n[![Analytics](https://ga-beacon.appspot.com/UA-59819838-3/red5pro/red5pro-server-frontend?pixel)](https://github.com/igrigorik/ga-beacon)\n\n# Query Params\n\nThere 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.\n\n| Query Param Name | Type    | Description                                                            | Default Value                                           |\n| ---------------- | ------- | ---------------------------------------------------------------------- | ------------------------------------------------------- |\n| `view`           | String  | Target tech view to display. `rtc`, `rtmp` or `hls` (Subscriber only). | Allows SDK to failover.                                 |\n| `ice`            | String  | Target ICE servers to use in WebRTC transactions. `google` or `moz`    | Allows browser to choose.                               |\n| `audioBW`        | Integer | Request Audio Bandwidth                                                | `undefined` _(will not attempt to set bandwidth limit)_ |\n| `videoBW`        | Integer | Request Video Bandwidth                                                | `undefined` _(will not attempt to set bandwidth limit)_ |\n| `videoWidthMin`  | Integer | Request Minimum Video Width (Publisher only)                           | `320`                                                   |\n| `videoHeightMin` | Integer | Request Minimum Video Height (Publisher only)                          | `240`                                                   |\n| `videoWidthMax`  | Integer | Request Maximum Video Width (Publisher only)                           | `352`                                                   |\n| `videoHeightMax` | Integer | Request Maximum Video Height (Publisher only)                          | `288`                                                   |\n| `framerateMin`   | Integer | Request Minimum Framerate (Publisher only)                             | `8`                                                     |\n| `framerateMax`   | Integer | Request Maximum Framerate (Publisher only)                             | `24`                                                    |\n| `dc`             | Integer | Request to switch over the RTCDataChannel after signalling complete    | `0`                                                     |\n\n\u003e The publisher-only min/max values are desired settings mostly for WebRTC. See [https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia).\n\n## Usage\n\nTo use a query param, append it to the URL with the first parameter prepended with `?` and following parameters prepended with `\u0026`.\n\nFor example:\n\n```sh\nhttp://localhost:5080/live/broadcast.jsp?view=rtc\u0026ice=google`\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fred5pro%2Fred5pro-server-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fred5pro%2Fred5pro-server-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fred5pro%2Fred5pro-server-frontend/lists"}