Real-Time Streaming

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 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 UI or the API. If you configure a src with type: "wowza/webrtc", the RTS plugin will connect to the Wowza Video session of your choice. You need to tell the player where your Wowza Video session is hosted and which stream to choose.

You can do so by configuring the following properties:

• sdpUrl
• applicationName
• streamName

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

eyJraWQiOiIwWE44RnRTYkQxblYiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6MzgsXCJpZFwiOlwiMFhOOEZ0U2JEMW5WXCJ9IiwiaXNzIjoiRmxvd3BsYXllciJ9.wHlyQZ86rIHD8ldgnpiWbmFBmR4zt_3FSj78GMk7lfQ1es7K8y0MuHzbqcJfp0lm6LcUbUkQ5PsazIsAybxivg

Example

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

Wowza Streaming Engine WebRTC

You can use WebRTC with Wowza Streaming Engine through the UI. If you configure an src with type: "wowza/webrtc", the RTS plugin will connect to the Wowza Streaming Engine instance of your choice. You need to tell the player where your WSE instance is hosted and which stream to choose.

You can do that by configuring the following properties:

• sdpUrl : wss://<your streamlock domain>.streamlock.net/webrtc-session.json
• applicationName
• streamName

Update the token value with the unique token that was sent to you after buying Wowza Flowplayer as a standalone purchase. Standalone means you did not purchase the player as part of a Wowza Video subscription. You can use this token value any time you create a player manually for your live stream.

Example

flowplayer("#player", {
  src: {
    type: "wowza/webrtc",
    sdpUrl: "wss://zeezzrezrezr.streamlock.net/webrtc-session.json",
    applicationName: "webrtc",
    streamName: "myStream"
  }, 
  token: "[your-unique-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.