Red5 Documentation


The Red5 Pro WebRTC SDK HLS Subscriber.

HLS Configuration Properties

Property Required Default Description
protocol [x] https The protocol uri that the stream source resides on.
port [-] 443 The port uri that the stream source resides on.
app [x] live The webapp name that the stream source resides in.
host [x] None The IP or address that the stream resides on.
streamName [x] None The stream name to subscribe to.
mediaElementId [-] red5pro-subscriber The target video or audio element id attribute which will display the stream.
mimeType [x] application/x-mpegURL The mime-type of the stream source.
autoLayoutOrientation [-] true Flag to allow SDK to auto-orientation the layout of video element based on broadcast metadata. Mobile publishers broadcast with orientation.
muteOnAutoplayRestriction [-] true Flag to attempt to mute the video element when autoplay is restricted in the browser. See section on Autoplay Restrictions
socketParams [-] undefined By providing a socketParams property, you turn on a verification system that will pass the provided connectionParams to a WebSocket endpoint (much like how the WebRTC subscriber does in verification).
connectionParams [-] undefined An object of connection parameters to send to the server upon connection request.

HLS Example

As a Module

import { HLSSubscriber } from 'red5pro-webrtc-sdk'

const start = async () => {

  try {

    const subscriber = new HLSSubscriber()
    await subscriber.init({
      protocol: 'http',
      port: 5080,
      app: 'live',
      host: 'localhost',
      streamName: 'mystream',
      mediaElementId: 'red5pro-subscriber'
    await subscriber.subscribe()

  } catch (e) {
    // An error occured in establishing a subscriber session.


In a Browser


<!doctype html>
    <!-- Default Red5 Pro Playback Control styles. -->
    <link href="lib/red5pro/red5pro-media.css" rel="stylesheet">
    <!-- Fullscreen shim. -->
    <script src="lib/screenfull/screenfull.min.js"></script>
    <video id="red5pro-subscriber"
           class="red5pro-media red5pro-media-background"
           autoplay controls>
    <!-- Exposes `red5prosdk` on the window global. -->
    <script src="lib/red5pro/red5pro-sdk.min.js"></script>
    <!-- Example script below. -->
    <script src="main.js"></script>


(function (red5prosdk) {

  // Create a new instance of the HLS subcriber.
  var subscriber = new red5prosdk.HLSSubscriber();

  // Initialize
    protocol: 'http',
    port: 5080,
    app: 'live',
    host: 'localhost',
    streamName: 'mystream',
    mimeType: 'application/x-mpegURL',
    mediaElementId: 'red5pro-subscriber'
  .then(function(subscriber) {
    // `subcriber` is the HLS Subscriber instance.
    return subscriber.subscribe();
  .then(function(subscriber) {
    // subscription is complete.
    // playback should begin immediately due to
    //   declaration of `autoplay` on the `video` element.
  .catch(function(error) {
    // A fault occurred while trying to initialize and playback the stream.