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";
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:
<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:
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:
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:
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.
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.
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.
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);
});