Class: VideoTrack

VideoTrack

A VideoTrack is a Track representing video.


Properties:
Name Type Description
isStarted boolean

Whether or not the VideoTrack has started; if the VideoTrack started, there is enough video data to begin playback

isEnabled boolean

Whether or not the VideoTrack is enabled; if the VideoTrack is not enabled, it is "paused"

dimensions VideoTrack.Dimensions

The VideoTrack's VideoTrack.Dimensions

kind Track.Kind

"video"

mediaStreamTrack MediaStreamTrack

A video MediaStreamTrack

Fires:

Extends

Members


id

The Track's ID.

Properties:
Type Description
Track.ID
Inherited From:

Methods


attach(selector)

Attach the VideoTrack to an HTMLMediaElement selected by document.querySelector. The HTMLMediaElement could be an HTMLAudioElement or an HTMLVideoElement.

If the HTMLMediaElement's srcObject is not set to a MediaStream, this method sets it to a new MediaStream containing the VideoTrack's MediaStreamTrack; otherwise, it adds the VideoTrack's MediaStreamTrack to the existing MediaStream. Finally, if there are any other MediaStreamTracks of the same kind on the MediaStream, this method removes them.

Parameters:
Name Type Description
selector string

A query selector for the HTMLMediaElement to attach to

Returns:

mediaElement

Type
HTMLMediaElement
Example
const Video = require('twilio-video');

const videoElement = document.createElement('video');
videoElement.id = 'my-video-element';
document.body.appendChild(videoElement);

Video.createLocalVideoTrack().then(function(track) {
  track.attach('#my-video-element');
});

attach(mediaElement)

Attach the VideoTrack to an existing HTMLMediaElement. The HTMLMediaElement could be an HTMLAudioElement or an HTMLVideoElement.

If the HTMLMediaElement's srcObject is not set to a MediaStream, this method sets it to a new MediaStream containing the VideoTrack's MediaStreamTrack; otherwise, it adds the MediaTrack's MediaStreamTrack to the existing MediaStream. Finally, if there are any other MediaStreamTracks of the same kind on the MediaStream, this method removes them.

Parameters:
Name Type Description
mediaElement HTMLMediaElement

The HTMLMediaElement to attach to

Returns:

mediaElement

Type
HTMLMediaElement
Example
const Video = require('twilio-video');

const videoElement = document.createElement('video');
document.body.appendChild(videoElement);

Video.createLocalVideoTrack().then(function(videoTrack) {
  videoTrack.attach(videoElement);
});
  

attach()

Create an HTMLVideoElement and attach the VideoTrack to it.

The HTMLVideoElement's srcObject will be set to a new MediaStream containing the VideoTrack's MediaStreamTrack.

Returns:

videoElement

Type
HTMLVideoElement
Example
const Video = require('twilio-video');

Video.createLocalVideoTrack().then(function(videoTrack) {
  const videoElement = videoTrack.attach();
  document.body.appendChild(videoElement);
});
  

detach(selector)

Detach the VideoTrack from a previously attached HTMLMediaElement specified by document.querySelector.

Parameters:
Name Type Description
selector string

The query selector of HTMLMediaElement to which the VideoTrack is attached

Returns:

mediaElement

Type
HTMLMediaElement
Example
videoTrack.detach('#my-video-element').remove();

detach(mediaElement)

Detach the VideoTrack from a previously attached HTMLMediaElement.

Parameters:
Name Type Description
mediaElement HTMLMediaElement

One of the HTMLMediaElements to which the VideoTrack is attached

Returns:

mediaElement

Type
HTMLMediaElement
Example
const videoElement = document.getElementById('my-video-element');
videoTrack.detach(videoElement).remove();
  

detach()

Detach the VideoTrack from all previously attached HTMLMediaElements.

Returns:

mediaElements

Type
Array.<HTMLMediaElement>
Example
const mediaElements = videoTrack.detach();
mediaElements.forEach(mediaElement => mediaElement.remove());
  

Type Definitions


Dimensions

A VideoTrack's width and height.

Type:
  • object
Properties:
Name Type Argument Description
width number <nullable>

The VideoTrack's width or null if the VideoTrack has not yet started

height number <nullable>

The VideoTrack's height or null if the VideoTrack has not yet started

Events


dimensionsChanged

The VideoTrack's dimensions changed.

Parameters:
Name Type Description
track VideoTrack

The VideoTrack whose dimensions changed


disabled

The VideoTrack was disabled, i.e. "paused".

Parameters:
Name Type Description
track VideoTrack

The VideoTrack that was disabled


enabled

The VideoTrack was enabled, i.e. "unpaused".

Parameters:
Name Type Description
track VideoTrack

The VideoTrack that was enabled


started

The VideoTrack started. This means there is enough video data to begin playback.

Parameters:
Name Type Description
track VideoTrack

The VideoTrack that started