Real-Time Streaming plugin

The Real-Time Streaming (RTS) plugin adds the ability to consume Wowza Video Real-Time Streaming at Scale (RTS@S) streams, Wowza Video WebRTC streams, and Wowza Streaming Engine WebRTC streams.

Install the plugin

You can include the rts plugin next to the core player:

<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/rts.min.js"></script>

Configure the plugin

The RTS plugin is a Loader plugin which means it will add a special handler for the source types it handles. Configuration depends on your stream type. See the configuration examples in the following sections.

Wowza Video™ Real-Time Streaming at Scale

If you configure a src with type: "wowza/rts", the RTS plugin connects to Wowza's RTS@S backend and consumes the stream that you configure it to show.

In addition to type, you also need to configure streamName. You will use the Stream Name that you entered when you created the real-time stream in Wowza Video, either through the REST API or in the UI.

The subscriberToken is an optional parameter. If you set a Playback Token by enabling stream security in the RTS@S Wowza Video configuration, you would add it as the subscriberToken.

As part of your Wowza Video subscription, your player token is:

eyJraWQiOiIwWE44RnRTYkQxblYiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6MzgsXCJpZFwiOlwiMFhOOEZ0U2JEMW5WXCJ9IiwiaXNzIjoiRmxvd3BsYXllciJ9.wHlyQZ86rIHD8ldgnpiWbmFBmR4zt_3FSj78GMk7lfQ1es7K8y0MuHzbqcJfp0lm6LcUbUkQ5PsazIsAybxivg

Example

flowplayer("#player", {
  src: {
    type: "wowza/rts",
    streamName: "myStream",
    subscriberToken: "[your-playback-token]"
  },
  token: "[your-player-token]"
})

Wowza Video WebRTC

You can use WebRTC with Wowza Video through the Wowza Video user interface or REST API.

If you configure a src with type: "wowza/webrtc", the RTS plugin connects to the Wowza Video session of your choice. You must tell the player where your Wowza Video session is hosted and which stream to choose. You can do so by configuring the following properties in the src configuration object.

As part of your Wowza Video subscription, your player token is:

eyJraWQiOiIwWE44RnRTYkQxblYiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6MzgsXCJpZFwiOlwiMFhOOEZ0U2JEMW5WXCJ9IiwiaXNzIjoiRmxvd3BsYXllciJ9.wHlyQZ86rIHD8ldgnpiWbmFBmR4zt_3FSj78GMk7lfQ1es7K8y0MuHzbqcJfp0lm6LcUbUkQ5PsazIsAybxivg

An example configuration looks like this:

flowplayer("#player", {
  src: {
    type: "wowza/webrtc",
    sdpUrl: "wss://zeezzrezrezr.entrypoint.cloud.wowza.com/webrtc-session.json",
    applicationName: "webrtc",
    streamName: "myStream",
    // Optional token for secure streaming
    token: "[your-secure-token]"
  },
  // Top-level product token
  token: "[your-player-token]"
})

Wowza Streaming Engine WebRTC

You can use WebRTC with Wowza Streaming Engine through the Wowza Streaming Engine user interface.

If you configure a src with type: "wowza/webrtc", the RTS plugin connects to the Wowza Streaming Engine instance of your choice. You must tell the player where your WSE instance is hosted and which stream to choose. You can do so by configuring the following properties in the src configuration object.

An example configuration looks like this:

flowplayer("#player", {
  src: {
    type: "wowza/webrtc",
    sdpUrl: "wss://[your-streamlock-domain].streamlock.net/webrtc-session.json",
    applicationName: "webrtc",
    streamName: "myStream",
    // Optional token for secure streaming
    token: "[your-secure-token]"
  },
  // Top-level product token
  token: "[your-player-token]"
})

Listen to plugin events

To listen to events for this plugin, use the rts namespace in the player instance. For example, use flowplayer.rts.events to capture an event. The following table describes the object path and events for the RTS plugin.

Track RTS event status

When a status event is emitted, you can use the flowplayer.rts.state enumeration to capture state changes for RTS streams. The following properties are available to track.

In the following example, you can see how to setup an event listener on the STATUS event of the player RTS instance.

player.on(flowplayer.rts.events.STATUS, (event)=> {
  switch (event.detail.status) {
    case flowplayer.rts.state.Idle: return handleError()
    case flowplayer.rts.state.Receiving: return updateBroadcastUI()
  }
})

The code uses a switch statement to check the status property of the event details. If the streaming status is Idle, the handleError() function is called. With a Receiving status, the updateBroadcastUI() function is called.

Get RTS viewer counts

In the following example, you can set up an event listener for the VIEWER_COUNT event using the on method provided by the API. This method allows you to listen for specific events related to video playback.

video.on(flowplayer.rts.events.VIEWER_COUNT, function(event) {
  // Event is of type "@millicast/sdk/ViewerCount" and extracts viewer count from the event object
  let count = event.viewerCount;
  console.log(count);
});

When you listen to the flowplayer.ads.events.VIEWER_COUNT event, you can extract the number of viewers for the RTS live stream in real time. The function(event) { ... } function is executed when the VIEWER_COUNT event is triggered. The event parameter contains information about the viewer count.