/

WebRTC Subscriber

The Red5 Pro WebRTC SDK Subscriber solution utilizes WebSockets and WebRTC support in modern browsers.

It is highly recommended to include adapter.js when targeting the WebRTC subscriber.

WebRTC Configuration Properties

PropertyRequiredDefaultDescription
protocol[x]wssThe protocol for the WebSocket communication.
port[x]443The port on the host that the WebSocket server listens on; 5080 or 443 (insecure or secure, respectively).
app[x]liveThe webapp name that the WebSocket is listening on.
host[x]NoneThe IP or address that the WebSocket server resides on.
streamName[x]NoneThe name of the stream to subscribe to.
mediaElementId[-]red5pro-subscriberThe target video or audio element id attribute which will display the stream.
rtcConfiguration[-]NoneThe RTCConfiguration to user in setting up RTCPeerConnection. RTCConfiguration
iceServers[x]None (Test)The list of ICE servers to use in requesting a Peer Connection. Marked for Deprecation. Favor rtcConfiguration.
iceTransport[-]UDPThe transport type to use in ICE negotiation. Either UDP or TCP
subscriptionId[x]auto-generatedA unique string representing the requesting client.
connectionParams[-]undefinedAn object of connection parameters to send to the server upon connection request.
videoEncoding[-]NoneSpecifies target video encoder.
audio Encoding[-]NoneSpecifies target audio encoder.
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
maintainConnectionOnSubscribeErrors[-]falseFlag to maintain previously established WebSocket connection on any failure within the subscribe request flow. Example
signalingSocketOnly[-]trueFlag to indicate whether the WebSocket should only be used for signaling while establishing a connection. Afterward, all data between client and server will be sent over an RTCDataChannel.
dataChannelConfiguration[-]{name: "red5pro"}An object used in configuring a n RTCDataChannel. Only used when signalingSocketOnly is defined as true
buffer[-]0Request to set a buffer - in seconds - for playback.
maintainStreamVariant[-]falseFlag to instruct the server - when utilizing transcoding - to not switch subscriber stream variants when network conditions change. By setting this to true, when you request to playback a stream that is transcoded, the server will not deliver a variant of higher or lower quality dependending on current network conditions.
liveSeek[-]NoneConfiguration object to enable live seek capability. See Live Seek for more information.

Video Encoding Configuration

By not providing the videoEncoding attribute in the WebRTC Subscriber configuration, the server will choose the default encoder to use. If you do not wish for the server to default, you can provide the following values for the property:

  • VP8
  • H264
  • NONE

Audio Encoding Configuration

By not providing the audioEncoding attribute in the WebRTC Subscriber configuration, the server will choose the default encoder to use. If you do not wish for the server to default, you can provide the following values for the property:

  • Opus
  • PCMU
  • PCMA
  • Speex
  • NONE

WebRTC Example

As a Module

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

const start = async () => {

  try {

    const subscriber = new WHEPClient() // Or, alternatively, you can use: new RTCSubscriber()
    await subscriber.init({
      protocol: 'ws',
      port: 5080,
      host: 'localhost',
      app: 'live',
      streamName: 'mystream',
      rtcConfiguration: {
        iceServers: [{urls: 'stun:stun2.l.google.com:19302'}],
        iceCandidatePoolSize: 2,
        bundlePolicy: 'max-bundle'
      }, // See https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/RTCPeerConnection#RTCConfiguration_dictionary
      mediaElementId: 'red5pro-subscriber',
      subscriptionId: 'mystream' + Math.floor(Math.random() * 0x10000).toString(16),
    })
    await subscriber.subscribe()

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

}
start()

In a Browser

index.html:

<!doctype html>
<html>
  <head>
    <!-- Recommended shim for cross-browser WebRTC support. -->
    <script src="https://webrtchacks.github.io/adapter/adapter-latest.js"></script>
    <!-- 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 WebRTC subcriber.
  var subscriber = new red5prosdk.WHEPClient() // Or, alternatively, you can use: new red5prosdk.RTCSubscriber();

  // Initialize
  subscriber.init({
    protocol: 'ws',
    port: 5080,
    host: 'localhost',
    app: 'live',
    streamName: 'mystream',
    rtcConfiguration: {
      iceServers: [{urls: 'stun:stun2.l.google.com:19302'}],
      iceCandidatePoolSize: 2,
      bundlePolicy: 'max-bundle'
    }, // See https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/RTCPeerConnection#RTCConfiguration_dictionary
    mediaElementId: 'red5pro-subscriber',
    subscriptionId: 'mystream' + Math.floor(Math.random() * 0x10000).toString(16),
    videoEncoding: 'NONE',
    audioEncoding: 'NONE'
  })
  .then(function(subscriber) {
    // `subcriber` is the WebRTC 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);