View

View

Manages connection with a secure WebSocket path to signal the Millicast 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

Millicast existing Stream Name where you want to connect.
tokenGenerator tokenGeneratorCallback

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

Target HTML media element to mount stream.
autoReconnect Boolean <optional>
 true

Enable auto reconnect to stream.
Source:

Extends

Methods

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

Add remote receving track.

Parameters:
Name Type Description
media String

Media kind ('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>}

Connects to an active stream as subscriber.

In the example, addStreamToYourVideoTag and getYourSubscriberConnectionPath is your own implementation.

Parameters:
Name Type Attributes Description
options Object <optional>

General subscriber options.

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

True to modify SDP for supporting dtx in opus. Otherwise False.
absCaptureTime Boolean <optional>
 false

True to modify SDP for supporting absolute capture time header extension. Otherwise False.
disableVideo Boolean <optional>
 false

Disable the opportunity to receive video stream.
disableAudio Boolean <optional>
 false

Disable the opportunity to receive audio stream.
multiplexedAudioTracks Number <optional>

Number of audio tracks to recieve VAD multiplexed audio for secondary sources.
pinnedSourceId String <optional>

Id of the main source that will be received by the default MediaStream.
excludedSourceIds Array.<String> <optional>

Do not receive media from the these 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>

Options to configure the new RTCPeerConnection.
layer LayerInfo <optional>

Select 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:

Promise object which resolves when the connection was successfully established.

Type
Promise.<void>
Examples 
await millicastView.connect(options)
import View from '@millicast/sdk'

// 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 = "Millicast Stream Name where i want to connect"
const millicastView = new View(streamName, tokenGenerator, videoElement)

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

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

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

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

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

# getRTCPeerConnection() → {RTCPeerConnection}

Get current RTC peer connection.

Inherited From:
Source:
Returns:

Object which represents the RTCPeerConnection.

Type
RTCPeerConnection

# isActive() → {Boolean}

Get if the current connection is active.

Inherited From:
Source:
Returns:
  • True if connected, false if not.
Type
Boolean

# (async) project(sourceId, mapping)

Start projecting source in selected media ids.

Parameters:
Name Type Description
sourceId String

Selected source id.
mapping Array.<Object>

Mapping of the source track ids to the receiver mids

Properties
Name Type Attributes Description
trackId String <optional>

Track id from the source (received on the "active" event), if not set the media kind will be used instead.
media String <optional>

Track kind of the source ('audio' | 'video'), if not set the trackId will be 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>

Select the simulcast encoding layer and svc layers, only applicable to video tracks.
Source:

# (async) reconnect(dataopt)

Reconnects to 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

leave empty for automatic layer selection based on bandwidth estimation.
Source:

# setReconnect()

Sets reconnection if autoReconnect is enabled.

Inherited From:
Source:

# stop()

Stops connection.

Inherited From:
Source:

# (async) unproject(mediaIds)

Stop projecting attached source in selected media ids.

Parameters:
Name Type Description
mediaIds Array.<String>

mid value of the receivers that are going to be detached.
Source:

Events

# reconnect

Emits with every reconnection attempt made when an active stream stopped unexpectedly.

Type:
  • Object
Properties
Name Type Description
timeout Number

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: