Properties:
Name | Type | Argument | 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 | ||
kind |
Track.Kind | "video" |
|
mediaStreamTrack |
MediaStreamTrack | A video MediaStreamTrack |
|
processedTrack |
MediaStreamTrack |
<nullable> |
The source of processed video frames. It is null if no VideoProcessor has been added. |
processor |
VideoProcessor |
<nullable> |
A VideoProcessor that is currently processing video frames. It is null if video frames are not being processed. |
Fires:
Extends
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