Class: RemoteVideoTrack

Extends

• VideoTrack

Methods

---

addProcessor(processor)

Add a VideoProcessor to allow for custom processing of video frames belonging to a VideoTrack. When a Participant unpublishes and re-publishes a VideoTrack, a new RemoteVideoTrack is created and any VideoProcessors attached to the previous RemoteVideoTrack would have to be re-added again. 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.

Overrides:

• VideoTrack#addProcessor

Returns:

Type

this

Example

class GrayScaleProcessor {
  constructor(percentage) {
    this.outputFrame = new OffscreenCanvas(0, 0);
    this.percentage = percentage;
  }
  processFrame(inputFrame) {
    this.outputFrame.width = inputFrame.width;
    this.outputFrame.height = inputFrame.height;

    const context = this.outputFrame.getContext('2d');
    context.filter = `grayscale(${this.percentage}%)`;
    context.drawImage(inputFrame, 0, 0, inputFrame.width, inputFrame.height);
    return this.outputFrame;
  }
}

const grayscaleProcessor = new GrayScaleProcessor(100);

Array.from(room.participants.values()).forEach(participant => {
  const remoteVideoTrack = Array.from(participant.videoTracks.values())[0].track;
  remoteVideoTrack.addProcessor(grayscaleProcessor);
});

---

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.

Inherited From:

• VideoTrack#attach

Overrides:

• VideoTrack#attach

Returns:

videoElement

Type

HTMLVideoElement

Example

const Video = require('twilio-video');

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

---

detach()

Detach the VideoTrack from all previously attached HTMLMediaElements.

Inherited From:

• VideoTrack#detach

Overrides:

• VideoTrack#detach

Returns:

mediaElements

Type

Array.<HTMLMediaElement>

Example

const mediaElements = videoTrack.detach();
mediaElements.forEach(mediaElement => mediaElement.remove());
  

---

removeProcessor(processor)

Remove the previously added VideoProcessor using addProcessor API.

Parameters:

Name	Type	Description
processor	VideoProcessor	The VideoProcessor to remove.

Overrides:

• VideoTrack#removeProcessor

Returns:

Type

this

Example

class GrayScaleProcessor {
  constructor(percentage) {
    this.outputFrame = new OffscreenCanvas(0, 0);
    this.percentage = percentage;
  }
  processFrame(inputFrame) {
    this.outputFrame.width = inputFrame.width;
    this.outputFrame.height = inputFrame.height;

    const context = this.outputFrame.getContext('2d');
    context.filter = `grayscale(${this.percentage}%)`;
    context.drawImage(inputFrame, 0, 0, inputFrame.width, inputFrame.height);
    return this.outputFrame;
  }
}

const grayscaleProcessor = new GrayScaleProcessor(100);

Array.from(room.participants.values()).forEach(participant => {
  const remoteVideoTrack = Array.from(participant.videoTracks.values())[0].track;
  remoteVideoTrack.addProcessor(grayscaleProcessor);
});

document.getElementById('remove-button').onclick = () => {
  Array.from(room.participants.values()).forEach(participant => {
    const remoteVideoTrack = Array.from(participant.videoTracks.values())[0].track;
    remoteVideoTrack.removeProcessor(grayscaleProcessor);
  });
}

---

setPriority(priority)

Update the subscribe Track.Priority of the RemoteVideoTrack.

Parameters:

Name	Type	Argument	Description
priority	Track.Priority	<nullable>	the new subscribe Track.Priority; If null, then the subscribe Track.Priority is cleared, which means the Track.Priority set by the publisher is now the effective priority.

Throws:

RangeError

Returns:

Type

this

Events

---

dimensionsChanged

The RemoteVideoTrack's dimensions changed.

Parameters:

Name	Type	Description
track	RemoteVideoTrack	The RemoteVideoTrack whose dimensions changed

Overrides:

• VideoTrack#event:dimensionsChanged

---

disabled

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

Parameters:

Name	Type	Description
track	RemoteVideoTrack	The RemoteVideoTrack that was disabled

Overrides:

• VideoTrack#event:disabled

---

enabled

The RemoteVideoTrack was enabled, i.e. "resumed".

Parameters:

Name	Type	Description
track	RemoteVideoTrack	The RemoteVideoTrack that was enabled

Overrides:

• VideoTrack#event:enabled

---

started

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

Parameters:

Name	Type	Description
track	RemoteVideoTrack	The RemoteVideoTrack that started

Overrides:

• VideoTrack#event:started

---

switchedOff

A RemoteVideoTrack was switched off.

Parameters:

Name	Type	Description
track	RemoteVideoTrack	The RemoteVideoTrack that was switched off

---

switchedOn

A RemoteVideoTrack was switched on.

Parameters:

Name	Type	Description
track	RemoteVideoTrack	The RemoteVideoTrack that was switched on