Documentation

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

setContentPreferences(contentPreferences)

Set the RemoteVideoTrack's content preferences. This method is applicable only for the group rooms and only when connected with videoContentPreferencesMode in video bandwidth profile options set to 'manual'

Parameters:
Name Type Description
contentPreferences VideoContentPreferences

requested preferences.
Returns:
Type
this

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

switchOff()

Request to switch off a RemoteVideoTrack, This method is applicable only for the group rooms and only when connected with clientTrackSwitchOffControl in video bandwidth profile options set to 'manual'

Returns:
Type
this

switchOn()

Request to switch on a RemoteVideoTrack, This method is applicable only for the group rooms and only when connected with clientTrackSwitchOffControl in video bandwidth profile options set to 'manual'

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