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.

Before you start

Before you use this plugin with the standalone player, we recommend the following steps:

  • If applicable, make sure you have a Wowza Video or Wowza Streaming Engine subscription.
  • Read about embedding the core player in your site by adding the minimum CSS and JavaScript player components.
  • Make sure you have a player token. For more, see Token configuration . Tokens aren't needed for local development.
  • The instructions on this page generally assume you're using the Wowza Flowplayer CDN to embed the player in your site. If you're using npm, see our npm instructions or our TypeScript guide .

Install the plugin

To install the RTS plugin, load it next to the core player:

CDN examplenpm example
Copy
Copied
<!-- Load standard player skin -->
<link rel="stylesheet" href="https://cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<!-- Load player script -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>

<!-- Load plugin -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/rts.min.js"></script>
Copy
Copied
// Import player library and basic CSS for player
import flowplayer from "@flowplayer/player";
import "@flowplayer/player/flowplayer.css";

// Import plugin
import RTS from "@flowplayer/player/plugins/rts";
info

If an RTS stream has multiple bitrates and resolutions that you would like to display, you must also load and configure the Quality Selection plugin. The various display options then appear in a menu within the player.

Add HTML elements

Add the HTML components to render the player elements on your page:

Copy
Copied
<div id="player"></div>

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 RTS at Scale

If working with a Wowza Video RTS@S stream, set the player src property to type: "wowza/rts". This allows the RTS plugin to connect to Wowza's RTS@S backend and consume the stream from Wowza Video. Then configure the following properties for your player. For more, see Live stream in real-time with Wowza Video.

Property Description
streamName
required
Use the Stream Name you entered when you created the real-time stream in Wowza Video, either through the REST API or in the UI. The Stream Name can be found on the Overview tab that displays after you create an RTS@S stream in Wowza Video.
subscriberToken
optional
If you enabled stream security in the RTS@S Wowza Video configuration, you would add it as the subscriberToken. You can retrieve a subscriberToken via the Wowza Video REST API.

Example

An example wowza/rts configuration looks like this:

Copy
Copied
const player = flowplayer("#player", {
  src: {
    type: "wowza/rts",
    streamName: "myStream",
    subscriberToken: "[your-subscriber-token]"
  },
  token: "[your-player-token]"
});

Wowza Video WebRTC

You can create your WebRTC with Wowza Video workflow via the Wowza Video user interface or REST API.

When working with a Wowza Video WebRTC stream, set the player src property to type: "wowza/webrtc". This allows the RTS plugin to connect to the Wowza Video session of your choice. You must then tell the player where your Wowza Video session is hosted and which stream to choose. You can do so by configuring the following properties for your player.

Property Description
sdpUrl
required
The SDP URL listed on the Overview tab for your WebRTC stream in Wowza Video.
applicationName
required
The value from the Application field on the Overview tab for your WebRTC stream in Wowza Video.
streamName
required
The value from the Stream Name field on the Overview tab for your WebRTC stream in Wowza Video.
token
optional
Refers to the optional token authentication available in Wowza Video. This is different than the top-level product or player token used for licensing.

Example

An example wowza/webrtc configuration for Wowza Video looks like this:

Copy
Copied
const player = 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 used for licensing
  token: "[your-player-token]"
})

Wowza Streaming Engine WebRTC

You can create your WebRTC with Wowza Streaming Engine workflow through the Wowza Streaming Engine user interface.

When working with a Wowza Streaming Engine WebRTC stream, set the src property to type: "wowza/webrtc". This allows the RTS plugin to connect to the Wowza Streaming Engine instance of your choice. You must then tell the player where your Wowza Streaming Engine instance is hosted and which stream to choose. You can do so by configuring the following properties.

Property Description
sdpUrl
required
The Signaling URL or SDP URL in Wowza Streaming Engine contains your StreamLock domain. The StreamLock domain can be found as part of your SSL certificate name.
applicationName
required
The name of the application you set up in Wowza Streaming Engine for WebRTC streams.
streamName
required
The stream name can be found on the Incoming Streams page for the application you created for the stream in Wowza Streaming Engine.
token
optional
Refers to the optional SecureToken available in Wowza Streaming Engine. This is different than the top-level product or player token used for licensing.

Example

An example wowza/webrtc configuration for Wowza Streaming Engine looks like this:

Copy
Copied
const player = 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 used for licensing
  token: "[your-player-token]"
})
info

Update the top-level player token value with the unique token sent to you after buying Wowza Flowplayer as a standalone purchase. Standalone means you didn't 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.

Listen to plugin events

This section describes the events you can capture to control and manage this plugin and your player instance. To understand event handling differences between CDN or npm implementations, see Plugin events.

CDN event npm event Description
flowplayer.rts.events.STATS Rts.events.STATS Emitted every five seconds to capture metrics for active Millicast or RTS streams. For more, see Get RTS statistics.
flowplayer.rts.events.STATUS Rts.events.STATUS Emitted when the state of the RTS stream changes, for example to Idle or Receiving. For more, see Track RTS status.
flowplayer.rts.events.VIEWER_COUNT Rts.events.VIEWER_COUNT Emitted to capture the number of viewers for the RTS live stream in real time. For more, see Get RTS viewer counts.

Get RTS statistics (beta)

After you publish an RTS stream, you can use the on() method provided by the API to access the STATS event and capture metrics for active Wowza or Millicast RTS streams. This event emits two properties that provide a unified WebRTC statistics reporting solution for Wowza-based and Millicast RTS streams.

CDN examplenpm example
Copy
Copied
player.on(flowplayer.rts.events.STATS, (event) => {
  // For all Wowza RTS streams
  console.log(event.detail.stats);
  // If streaming using Millicast RTS streams
  console.log(event.detail.millicastDiagnostic);
});
Copy
Copied
player.on(Rts.events.STATS, (event) => {
  // For all Wowza RTS streams
  console.log(event.detail.stats);
  // If streaming using Millicast RTS streams
  console.log(event.detail.millicastDiagnostic);
});
  • The stats property is exposed by the underlying WebRTC protocol and can be used for all Wowza RTS streams. It relies on the web-webrtc-stats library to parse WebRTS statistics.
  • The millicastDiagnostic property is exposed for Millicast RTS streams. It displays the metrics from this Dolby.io data dictionary .

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.

CDN property npm property Description
flowplayer.rts.state.Idle Rts.state.Idle Signals the RTS stream has stopped broadcasting, but it's still available.
flowplayer.rts.state.Receiving 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.

CDN examplenpm example
Copy
Copied
player.on(flowplayer.rts.events.STATUS, (event) => {
  switch (event.detail.status) {
    case flowplayer.rts.state.Idle:
      return console.log("Idle");
    case flowplayer.rts.state.Receiving: 
      return console.log("Receiving");
  }
});
Copy
Copied
player.on(Rts.events.STATUS, (event) => {
  switch (event.detail.status) {
    case Rts.state.Idle:
      return console.log("Idle");
    case Rts.state.Receiving: 
      return console.log("Receiving");
  }
});

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

When you listen to the 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.

In the following example, we 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.

CDN examplenpm example
Copy
Copied
player.on(flowplayer.rts.events.VIEWER_COUNT, (event) => {
  // Event is of type "@millicast/sdk/ViewerCount" and extracts viewer count from the event object
  const count = event.detail.viewerCount;
  console.log(count);
});
Copy
Copied
player.on(Rts.events.VIEWER_COUNT, (event) => {
  // Event is of type "@millicast/sdk/ViewerCount" and extracts viewer count from the event object
  const count = event.detail.viewerCount;
  console.log(count);
});