When subscribing to an ABR-Provisioned stream on the Stream Manager using the Red5 Pro WebRTC SDK, you will first request the edge node endpoint to access the stream and then use one of the variant stream names to start subscribing. Once the subscriber stream has started playback the stream will be dynamically upgraded or downgraded based on network conditions.

It is dependent on your project requirements, but if running an ABR with different broadcast quality settings, we recommend first subscribing to the lowest variant, to ensure that your client can connect.

You can utilize either the WHEPClient or RTCSubscriber from the SDK to start a subscriber for ABR:

WHEPClient

With the WHEPClient, the negotiation sequence with a Stream Manager is handled server side. As such, it is very similar to how you would normally subscribe to the server:

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

const subscribe = async () => {

  const subscriber = new WHEPClient()
  await subscriber.init({
    host: 'yourstreammanager.com',
    app: 'live',
    streamName: 'mystream_2',
    protocol: 'wss',
    port: 443,
    subscriptionId: 'subscriber-' + Math.floor(Math.random() * 0x10000).toString(16)
  })
  await subscriber.subscribe()
}

RTCSubscriber

Since the RTCSubscriber requires secure websockets to subscribe, in a Red5 Pro Autoscale environment the stream manager proxies the websocket connection between the subscriber and the edge node.

In the case where the response to the GET request at:

https://yourstreammanager.com/streammanager/api/4.0/event/live/mystream_3?action=subscribe

is the following:

{
  "serverAddress": "10.0.0.0",
  "scope": "live",
  "name": "mystream_2"
}

Your initialization configuration for an RTCSubscriber will look like the following:

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

const subscribe = async () => {

  var subscriber = new RTCSubscriber()
  await subscriber.init({
    host: 'yourstreammanager.com',
    app: 'streammanager',
    streamName: 'mystream_2',
    protocol: 'wss',
    port: 443,
    connectionParams: {
      host: '10.0.0.0',
      app: 'live'
    },
    subscriptionId: 'subscriber-' + Math.floor(Math.random() * 0x10000).toString(16)
  })
  await subscriber.subscribe()

The above is a very basic configuration. Your webapp may need additional configurations depending on requirements and deployment.

When utilizing the Stream Manager proxy for WebRTC subscriptions, you assign the top-level configuration app property as streammanager, and provide a connectionParams object that details the endpoint to proxy to.

In this example, the mystream_2 stream is requested. In doing so, the subscriber is started with a mid-level variant. As conditions improve or worsen the stream variant will be dynamically switched to higher or lower quality, respectively.