View

View

Manages connection with a secure WebSocket path to signal the Wowza server and establishes a WebRTC connection to view a live stream.

Before you can view an active broadcast, you will need:

  • A connection path that you can get from Director module or from your own implementation.

Constructor

# new View(streamName, tokenGenerator, mediaElementopt, autoReconnectopt)

Parameters:
Name Type Attributes Default Description
streamName String

The name of the Wowza Video real-time stream.
tokenGenerator tokenGeneratorCallback

Callback function executed when a new token is needed.
mediaElement HTMLMediaElement <optional>
 null

The target HTML media element to mount the stream.
autoReconnect Boolean <optional>
 true

Enable automatic reconnection to the stream.
Source:

Extends

Methods

# (async) addRemoteTrack(media, streams) → {Promise.<RTCRtpTransceiver>}

Add a remote receiving track.

Parameters:
Name Type Description
media String

The media type ('audio' | 'video').
streams Array.<MediaStream>

Streams the track will belong to.
Source:
Returns:

Promise that will be resolved when the RTCRtpTransceiver is assigned an mid value.

Type
Promise.<RTCRtpTransceiver>

# (async) connect(optionsopt) → {Promise.<void>}

Connect to an active stream as a subscriber.

In the following example, addStreamToYourVideoTag and getYourSubscriberConnectionPath are your own implementation.

Parameters:
Name Type Attributes Description
options Object <optional>

Available subscriber options.

Properties
Name Type Attributes Default Description
dtx Boolean <optional>
 false

Enable SDP support for DTX in Opus.
absCaptureTime Boolean <optional>
 false

Enable SDP support for an absolute capture time header extension.
disableVideo Boolean <optional>
 false

Disable receiving a video stream.
disableAudio Boolean <optional>
 false

Disable receiving an audio stream.
multiplexedAudioTracks Number <optional>

The number of audio tracks to receive VAD multiplexed audio for secondary sources.
pinnedSourceId String <optional>

The ID of the main source to be received by the default MediaStream.
excludedSourceIds Array.<String> <optional>

Exclude media from the the specified source IDs.
events Array.<String> <optional>

Override which events will be delivered by the server (any of "active" | "inactive" | "vad" | "layers" | "viewercount").*
peerConfig RTCConfiguration <optional>

The new RTCPeerConnection configuration.
layer LayerInfo <optional>

The simulcast encoding layer and SVC layers for the main video track. Leave empty for automatic layer selection based on bandwidth estimation.
forcePlayoutDelay Object <optional>
 false

Ask the server to use the playout delay header extension.

Properties
Name Type Attributes Description
min Number <optional>

Set minimum playout delay value.
max Number <optional>

Set maximum playout delay value.
Source:
Fires:
Returns:

A promise object that resolves when the connection was successfully established.

Type
Promise.<void>
Examples 
await wowzaView.connect(options)
import View from '@wowzamediasystems/sdk-rts'

// Create media element
const videoElement = document.createElement("video")

//Define callback for generate new token
const tokenGenerator = () => getYourSubscriberInformation(accountId, streamName)

//Create a new instance
const streamName = "Wowza Stream Name where i want to connect"
const wowzaView = new View(streamName, tokenGenerator, videoElement)

//Start connection to broadcast
try {
 await wowzaView.connect()
} catch (e) {
 console.log('Connection failed, handle error', e)
}
import View from '@wowzamediasystems/sdk-rts'

//Define callback for generate new token
const tokenGenerator = () => getYourSubscriberInformation(accountId, streamName)

//Create a new instance
const streamName = "Wowza Stream Name where i want to connect"
const wowzaView = new View(streamName, tokenGenerator)

//Set track event handler to receive streams from Publisher.
wowzaView.on('track', (event) => {
  addStreamToYourVideoTag(event.streams[0])
})

//Start connection to broadcast
try {
 await wowzaView.connect()
} catch (e) {
 console.log('Connection failed, handle error', e)
}

# getRTCPeerConnection() → {RTCPeerConnection}

Get the current RTC peer connection.

Inherited From:
Source:
Returns:

The RTCPeerConnection.

Type
RTCPeerConnection

# isActive() → {Boolean}

Get whether the current connection is active.

Inherited From:
Source:
Returns:

True if connected or false if not connected.

Type
Boolean

# (async) project(sourceId, mapping)

Start projecting a source in the selected media IDs.

Parameters:
Name Type Description
sourceId String

The selected source ID.
mapping Array.<Object>

A mapping of the source track IDs to the receiver media IDs.

Properties
Name Type Attributes Description
trackId String <optional>

The track ID from the source (received on the "active" event). If not set, the media type is used instead.
media String <optional>

The media type of the source ('audio' | 'video'). If not set, the track ID is used instead.
mediaId String <optional>

mid value of the rtp receiver in which the media is going to be projected. If no mediaId is defined, the first track from the main media stream with the same media type as the input source track will be used.
layer LayerInfo <optional>

The simulcast encoding layer and SVC layers. Only applicable to video tracks.
promote Boolean <optional>

To remove all existing limitations from the source, such as restricted bitrate or resolution, set this to true.
Source:

# (async) reconnect(dataopt)

Reconnect to the last broadcast.

Parameters:
Name Type Attributes Description
data Object <optional>

This object contains the error property. It may be expanded to contain more information in the future.
Properties
Name Type Description
error String

The value sent in the first reconnect event within the error key of the payload
Inherited From:
Source:
Fires:

# (async) select(layer)

Select the simulcast encoding layer and SVC layers for the main video track.

Parameters:
Name Type Description
layer LayerInfo

The simulcast encoding layer and SVC layers for the main video track. Leave empty for automatic layer selection based on bandwidth estimation.
Source:

# setReconnect()

Set up reconnection if autoReconnect is enabled.

Inherited From:
Source:

# stop()

Stop the connection.

Inherited From:
Source:

# (async) unproject(mediaIds)

Stop projecting the attached source in the selected media IDs.

Parameters:
Name Type Description
mediaIds Array.<String>

The mid value of the receivers that will be detached.
Source:

Events

# reconnect

Emit with every reconnection attempt made when an active stream stops unexpectedly.

Type:
  • Object
Properties
Name Type Description
timeout Number

The next retry interval, in milliseconds.
error Error

Error object with cause of failure. Possible errors are:

  • Signaling error: wsConnectionError if there was an error in the Websocket connection.
  • Connection state change: RTCPeerConnectionState disconnected if there was an error in the RTCPeerConnection.
  • Attempting to reconnect if the reconnect was trigered externally.
  • Or any internal error thrown by either Publish.connect or View.connect methods
Inherited From:
Source: