Red5 Pro HTML5 HLS Example

1. Requirements
2. Getting Up and Running
   1. For HLS VOD
   2. For Local Development
   3. With a Prebuilt Distribution
   4. Building a Distribution
3. Overview of the HTML5 Client
4. Modifying

An example of how to build an HTML client for Red5 Pro's HLS streams, built with:

• ES2015 (a.k.a ES6) via Babelify
• video.js
• videojs-contrib-media-sources
• videojs-contrib-hls
• bootstrap and it's dependencies

Requirements

This example requires that you have the following in order to use it:

1. A Red5 Pro server running on a server, such as an AWS instance
2. 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:

1. Node/NPM

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

1. Clone the repo
2. Inside the repo, run npm install
3. After that, run npm run start which will transpile all the ES2015 source to ES5 Javascript and start a local Node server
4. 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
5. 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	This is the base URL or IP for your Red5 Pro server, e.g. http://my-test-server.com/ or http://99.98.97.96/
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:

1. ✔️ js/main.js, the entry point of the app, which instantiates the other "moving" pieces
2. ✔️ js/demo-video-handler.js which handles updating the video
3. ✔️ js/demo-socket-handler.js which handles communication with the websocket
4. ✖️ 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.