Red5 Pro HTML5 HLS Example
- Getting Up and Running
- Overview of the HTML5 Client
An example of how to build an HTML client for Red5 Pro's HLS streams, built with:
- ES2015 (a.k.a ES6) via Babelify
- bootstrap and it's dependencies
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.
<filter> <filter-name>CORS</filter-name> <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> <async-supported>true</async-supported> <init-param> <param-name>cors.allowOrigin</param-name> <param-value>*</param-value> </init-param> <init-param> <param-name>cors.allowSubdomains</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>cors.supportedMethods</param-name> <param-value>GET, HEAD</param-value> </init-param> <init-param> <param-name>cors.maxAge</param-name> <param-value>3600</param-value> </init-param> </filter> <filter-mapping> <filter-name>CORS</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
To support listing of HLS VOD media files, the
M3U8ListingServlet must be enabled in your applications
web.xml file as shown below.
<servlet> <servlet-name>playlists</servlet-name> <servlet-class>com.red5pro.stream.transform.mpegts.server.M3U8ListingServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>playlists</servlet-name> <url-pattern>/playlists/*</url-pattern> </servlet-mapping>
For Local Development
- Clone the repo
- Inside the repo, run
- After that, run
- If you'd prefer to run a different server, such as a Pyton server for instance, then you can just run
- Open up http://localhost:3000/ to see the Red5 Pro HLS HTML5 client example
With a Prebuilt Distribution
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
The example HTML5 client has 5 fields allowing you to connect to whatever Red5 Pro server and stream you'd like.
|Stream URL or IP||This is the base URL or IP for your Red5 Pro server, e.g. http://my-test-server.com/ or http://188.8.131.52/|
|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.
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.