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:

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

// 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";

Add HTML elements

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

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

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.

Example

An example wowza/rts configuration looks like this:

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.

Example

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

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.

Example

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

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]"
})

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.

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.

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

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.

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 console.log("Idle");
    case flowplayer.rts.state.Receiving: 
      return console.log("Receiving");
  }
});

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.

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

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