Class: RemoteVideoTrack

RemoteVideoTrack

A RemoteVideoTrack represents a VideoTrack published to a Room by a RemoteParticipant.


Properties:
Name Type Argument Description
isEnabled boolean

Whether the RemoteVideoTrack is enabled

isSwitchedOff boolean

Whether the RemoteVideoTrack is switched off

sid Track.SID

The RemoteVideoTrack's SID

priority Track.Priority <nullable>

The subscribe priority of the RemoteVideoTrack

Fires:

Extends

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

disabled

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

Parameters:
Name Type Description
track RemoteVideoTrack

The RemoteVideoTrack that was disabled

Overrides:

enabled

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

Parameters:
Name Type Description
track RemoteVideoTrack

The RemoteVideoTrack that was enabled

Overrides:

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:

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