Class: VideoTrack

Extends

• Track

Methods

---

addProcessor(processor)

Add a VideoProcessor to allow for custom processing of video frames belonging to a VideoTrack. Only Chrome supports this as of now. Calling this API from a non-supported browser will result in a log warning.

Parameters:

Name	Type	Description
processor	VideoProcessor	The VideoProcessor to use.

Returns:

Type

this

Example

class GrayScaleProcessor {
  constructor(percentage) {
    this.percentage = percentage;
  }
  processFrame(inputFrameBuffer, outputFrameBuffer) {
    const context = outputFrameBuffer.getContext('2d');
    context.filter = `grayscale(${this.percentage}%)`;
    context.drawImage(inputFrameBuffer, 0, 0, inputFrameBuffer.width, inputFrameBuffer.height);
  }
}

Video.createLocalVideoTrack().then(function(videoTrack) {
  videoTrack.addProcessor(new GrayScaleProcessor(100));
});

---

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

---

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

---

detach()

Detach the VideoTrack from all previously attached HTMLMediaElements.

Returns:

mediaElements

Type

Array.<HTMLMediaElement>

Example

const mediaElements = videoTrack.detach();
mediaElements.forEach(mediaElement => mediaElement.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(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();

---

removeProcessor(processor)

Remove the previously added VideoProcessor using addProcessor API.

Parameters:

Name	Type	Description
processor	VideoProcessor	The VideoProcessor to remove.

Returns:

Type

this

Example

class GrayScaleProcessor {
  constructor(percentage) {
    this.percentage = percentage;
  }
  processFrame(inputFrameBuffer, outputFrameBuffer) {
    const context = outputFrameBuffer.getContext('2d');
    context.filter = `grayscale(${this.percentage}%)`;
    context.drawImage(inputFrameBuffer, 0, 0, inputFrameBuffer.width, inputFrameBuffer.height);
  }
}

Video.createLocalVideoTrack().then(function(videoTrack) {
  const grayScaleProcessor = new GrayScaleProcessor(100);
  videoTrack.addProcessor(grayScaleProcessor);
  document.getElementById('remove-button').onclick = () => videoTrack.removeProcessor(grayScaleProcessor);
});

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