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:

Copy
Copied
<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.

info

If you're using RTS streams with the Video Track Selection plugin, the Video Track Selection plugin automatically detects and renders the RTS streams.

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.

Info

The Stream Name and Playback Token can be found in the Stream Information section in Wowza Video on the Live Stream informational page that displays after you create an RTS@S stream.

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

Copy
Copied
eyJraWQiOiIwWE44RnRTYkQxblYiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6MzgsXCJpZFwiOlwiMFhOOEZ0U2JEMW5WXCJ9IiwiaXNzIjoiRmxvd3BsYXllciJ9.wHlyQZ86rIHD8ldgnpiWbmFBmR4zt_3FSj78GMk7lfQ1es7K8y0MuHzbqcJfp0lm6LcUbUkQ5PsazIsAybxivg

Example

Copy
Copied
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
Info

The SDP URL, Application name, and Stream Name can be found in the Stream Information section in Wowza Video on the Live Stream informational page that displays after you create a WebRTC stream.

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

Copy
Copied
eyJraWQiOiIwWE44RnRTYkQxblYiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6MzgsXCJpZFwiOlwiMFhOOEZ0U2JEMW5WXCJ9IiwiaXNzIjoiRmxvd3BsYXllciJ9.wHlyQZ86rIHD8ldgnpiWbmFBmR4zt_3FSj78GMk7lfQ1es7K8y0MuHzbqcJfp0lm6LcUbUkQ5PsazIsAybxivg

Example

Copy
Copied
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
Info

The Signaling URL (SDP URL) in WSE contains your streamlock domain. The streamlock domain can be found as part of your ssl certificate name. The Application Name is the name of the application you set up in Wowza Streaming Engine for WebRTC streams. The Stream Name can be found in the Incoming Streams subsection under the application you created for the stream.

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

Copy
Copied
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.

Event Description
flowplayer.rts.events.STATUS Emitted when the state of the RTS stream changes, for example to Idle or Receiving.
flowplayer.rts.events.VIEWER_COUNT Emitted to capture the number of viewers for the RTS live stream in real time.

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.

Property Description
flowplayer.rts.state.Idle Signals the RTS stream has stopped broadcasting, but it's still available.
flowplayer.rts.state.Receiving Signals the RTS stream is starting or that it's already broadcasting.

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

Copy
Copied
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.

Copy
Copied
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.