/

HLS

The Red5 Pro WebRTC SDK HLS Subscriber.

HLS Configuration Properties

PropertyRequiredDefaultDescription
protocol[x]httpsThe protocol uri that the stream source resides on.
port[-]443The port uri that the stream source resides on.
app[x]liveThe webapp name that the stream source resides in.
host[x]NoneThe IP or address that the stream resides on.
streamName[x]NoneThe stream name to subscribe to.
mediaElementId[-]red5pro-subscriberThe target video or audio element id attribute which will display the stream.
mimeType[x]application/x-mpegURLThe mime-type of the stream source.
autoLayoutOrientation[-]trueFlag to allow SDK to auto-orientation the layout of video element based on broadcast metadata. Mobile publishers broadcast with orientation.
muteOnAutoplayRestriction[-]trueFlag to attempt to mute the video element when autoplay is restricted in the browser. See section on Autoplay Restrictions
socketParams[-]undefinedBy 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[-]undefinedAn 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.
  }

}
start()

In a Browser

index.html:

<!doctype html>
<html>
  <head>
    <!-- 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>
  </head>
  <body>
    <video id="red5pro-subscriber"
           class="red5pro-media red5pro-media-background"
           autoplay controls>
    </video>
    <!-- Exposes `red5prosdk` on the window global. -->
    <script src="lib/red5pro/red5pro-sdk.min.js"></script>
    <!-- Example script below. -->
    <script src="main.js"></script>
  </body>
</html>

main.js:

(function (red5prosdk) {

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

  // Initialize
  subscriber.init({
    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.
    console.error(error)
  });

})(window.red5prosdk);