Red5 Pro HTML5 HLS Example
An example of how to build an HTML client for Red5 Pro's HLS streams, built with:
Requirements
This example requires that you have the following in order to use it:
A Red5 Pro server running on a server, such as an AWS instance
A mobile client to publish to your Red5 Pro server from, such as this iOS example or this Android example. Alternatively, using the Red5 Pro Streaming SDK you can build your own or incoporate streaming into your existing application(s)!
If you would like to run, modify, or build it locally you will also need the following:
Make sure to set these up before you proceed! 👍
Getting Up and Running
For HLS VOD
To provide HLS media content, your Red5 Pro server may require extra configuration.
All Red5 Pro applications (those that reside in the webapps directory) which provide HLS content require support for Cross-origin resource sharing or CORS. That means the following servlet filter has to be configured in the applications web application configuration file, its web.xml. The example below will work for serving HLS content.
CORS
com.thetransactioncompany.cors.CORSFilter
true
cors.allowOrigin
*
cors.allowSubdomains
true
cors.supportedMethods
GET, HEAD
cors.maxAge
3600
CORS
/*
To support listing of HLS VOD media files, the M3U8ListingServlet must be enabled in your applications web.xml file as shown below.
playlists
com.red5pro.stream.transform.mpegts.server.M3U8ListingServlet
playlists
/playlists/*
For Local Development
Clone the repo
Inside the repo, run npm install
After that, run npm run start which will transpile all the ES2015 source to ES5 Javascript and start a local Node server
If you'd prefer to run a different server, such as a Pyton server for instance, then you can just run npm run publish to transpile the ES2015 source to ES5 Javascript
Open up http://localhost:3000/ to see the Red5 Pro HLS HTML5 client example
With a Prebuilt Distribution
Visit our releases to find a prebuilt distribution you can download — or — view the live example and use one of our example publishing apps (iOS or Android).
Building a Distribution
Should you ever find the need to build a distribution yourself, you can run the following to accomplish that:
npm run dist
Overview of the HTML5 Client
The example HTML5 client has 5 fields allowing you to connect to whatever Red5 Pro server and stream you'd like.
Field
Purpose
Stream URL or IP
Stream Port
This is the port for your stream connection on the Red5 Pro server. By default, this is 5080 in the server.
Stream Websocket Port
This is the port for your websocket connection on the Red5 Pro server. By default, this is 6262 in the server.
Stream Context
This is the context under which your stream is running on the Red5 Pro server. By default, this is "live" in the server and the example mobile apps.
Stream Name
This is the name for your stream on the Red5 Pro server. You specify this in either the example mobile apps when you publish or in your own apps using the Red5 Pro Streaming SDK
Subscribe via Red5 Pro Cluster? - check the box if you are running on a cluster, so that the example looks for the edge servers in round robin
Subscribe to Red5 Pro VOD? - check the box if you have recorded HLS files and want to play them on demand.
After you have entered data in the relevant fields, hit the Save button. This will display the stream in the preview window - hit the [> play button to start playing. Also, it will generate a
Stream URL Preview and Stream WebSocket URL Preview.
Note: HLS latency is between 10 and 20 seconds, so make sure you have been publishing for at least 15 seconds before trying to subscribe
You can Save/Update the form and it will use the default values (shown as placeholders) for any fields you haven't filled in.
Modifying
There are 4 "moving" pieces to the Red5 Pro HLS HTML5 client example, only 3 of which (noted below with checkmarks) that you should need to modify to extend or modify the current example:
✔️ js/main.js, the entry point of the app, which instantiates the other "moving" pieces
✔️ js/demo-video-handler.js which handles updating the video
✔️ js/demo-socket-handler.js which handles communication with the websocket
✖️ js/src/form-handler.js which notifies other pieces of changes ("inputchange" for live editing, "change" for Save/Update) to the example form
By modifying these "moving" pieces, you can reshape the behavior of the Red5 Pro HLS HTML5 client example to suit your needs.