# 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](/docs/wowza-flowplayer/player/embed/embed-with-standalone/) in your site by adding the minimum CSS and JavaScript player components.
* Make sure you have a player token. For more, see [Token configuration](/docs/wowza-flowplayer/player/configure/#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](/docs/wowza-flowplayer/player/embed/embed-with-standalone/#use-npm) or our [TypeScript guide](/docs/wowza-flowplayer/guides/add-the-player-using-typescript/).


## Install the plugin

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


```html
<!-- 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>
```


```js
// 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](/docs/wowza-flowplayer/plugins/quality-selection/) plugin. The various display options then appear in a menu within the player.

## Add HTML elements

embed
## 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](/docs/wowza-flowplayer/plugins/vtsel/) 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](/docs/wowza-video/guides/video-source/encoder-camera/deliver-real-time-streams/) 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](/docs/wowza-video/api/video/openapi/real_time/showrealtimestream). |


#### Example

An example `wowza/rts` configuration looks like this:


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

To view Quality of Experience analytics in Wowza Video, make sure to load the [Wowza Video Platform Integration](/docs/wowza-flowplayer/plugins/wowza-video-platform-integration/) plugin in addition to the RTS plugin. With the Wowza Video Platform Integration plugin loaded, you can simplify your configuration to this:


```js
const player = flowplayer("#player", {
  // Real-time stream ID from Wowza Video
  // In Wowza Video, go to Real-time streams > Your stream > Overview tab > ID field
  src: "[rts-stream-id]",
  token: "[your-player-token]"
});
```

### Wowza Video WebRTC

You can create your [WebRTC with Wowza Video](https://www.wowza.com/docs/webrtc-workflows-in-wowza-video#webrtc-workflow1) workflow via the [Wowza Video user interface](https://www.wowza.com/docs/deliver-webrtc-streams-wowza-video) or [REST API](https://www.wowza.com/docs/deliver-webrtc-streams-to-viewers-using-the-wowza-video-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:


```js
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](https://www.wowza.com/docs/webrtc-workflows-in-wowza-streaming-engine) workflow through the [Wowza Streaming Engine user interface](https://www.wowza.com/docs/how-to-use-webrtc-with-wowza-streaming-engine).

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:


```js
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](/docs/wowza-flowplayer/plugins/about-plugins/#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](/docs/wowza-flowplayer/plugins/rts/#get-rts-statistics-beta). |
| `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](/docs/wowza-flowplayer/plugins/rts/#track-rts-event-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](/docs/wowza-flowplayer/plugins/rts/#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 one property that provides a unified WebRTC statistics reporting solution for Wowza-based and Millicast RTS streams.


```js
player.on(flowplayer.rts.events.STATS, (event) => {
  // For all Wowza RTS or Millicast RTS streams
  console.log(event.detail.stats);
});
```


```js
player.on(Rts.events.STATS, (event) => {
  // For all Wowza RTS or Millicast RTS streams
  console.log(event.detail.stats);
});
```

The `stats` property is exposed by the underlying WebRTC protocol and can be used for all Wowza RTS or Millicast RTS streams. It relies on the web-webrtc-stats library to parse WebRTC statistics.

### 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.


```js
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");
  }
});
```


```js
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.


```js
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);
});
```


```js
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);
});
```