diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f2b5f15d..ef0ecb00f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,73 @@ The Twilio Programmable Video SDKs use [Semantic Versioning](http://www.semver.o
 
 **Support for the 1.x version ended on December 4th, 2020**. Check [this guide](https://www.twilio.com/docs/video/migrating-1x-2x) to plan your migration to the latest 2.x version.
 
+2.13.0 (March 3, 2021)
+======================
+
+New Features
+------------
+
+**Video Processor API Pilot (Chrome only)**
+- You can now register a `VideoProcessor` with a VideoTrack in order to process its video frames. In a LocalVideoTrack, video frames are processed before being sent to the encoder. In a RemoteVideoTrack, video frames are processed before being sent to the attached `<video>` element(s). The `VideoProcessor` should implement the interface shown below. (VIDEO-3560, VIDEO-3561)
+
+  ```ts
+  abstract class VideoProcessor {
+    abstract processFrame(inputFrame: OffscreenCanvas)
+      : Promise<OffscreenCanvas | null>
+      | OffscreenCanvas | null;
+  }
+  ```
+
+  A VideoTrack provides new methods [addProcessor](https://media.twiliocdn.com/sdk/js/video/releases/2.13.0/docs/VideoTrack.html#addProcessor) and [removeProcessor](https://media.twiliocdn.com/sdk/js/video/releases/2.13.0/docs/VideoTrack.html#removeProcessor) which can be used to add and remove a VideoProcessor. It also provides a new property `processor` which points to the current VideoProcessor being used by the VideoTrack. For example, you can toggle a blur filter on a LocalVideoTrack as shown below.
+
+  ```ts
+  import { createLocalVideoTrack } from 'twilio-video';
+
+  class BlurVideoProcessor {
+    private readonly _outputFrameCtx: CanvasRenderingContext2D;
+    private readonly _outputFrame: OffscreenCanvas;
+
+    constructor(width: number, height: number, blurRadius: number) {
+      this._outputFrame = new OffscreenCanvas(width, height);
+      this._outputFrameCtx = this._outputFrame.getContext('2d');
+      this._outputFrameCtx.filter = `blur(${blurRadius}px)`;
+    }
+
+    processFrame(inputFrame: OffscreenCanvas) {
+      this._outputFrameCtx.drawImage(inputFrame, 0, 0);
+      return this._outputFrame;
+    }
+  }
+
+  // Local video track
+  createLocalVideoTrack({
+    width: 1280,
+    height: 720
+  }).then(track => {
+    const processor = new BlurVideoProcessor(1280, 720, 5);
+    document.getElementById('preview').appendChild(track.attach());
+    document.getElementById('toggle-blur').onclick = () => track.processor
+      ? track.removeProcessor(processor)
+      : track.addProcessor(processor);
+  });
+
+  ```
+  
+  You can also toggle a blur filter on a RemoteVideoTrack as shown below.
+  
+  ```js
+  room.on('trackSubscribed', track => {
+    if (track.kind === 'video') {
+      const { width, height } = track.dimensions;
+      const processor = new BlurVideoProcessor(width, height, 3);
+      document.getElementById('preview-remote').appendChild(track.attach());
+      document.getElementById('toggle-blur-remote').onclick = () => track.processor
+        ? track.removeProcessor(processor)
+        : track.addProcessor(processor);
+    }
+  });
+  ```
+
 2.12.0 (Feb 10, 2020)
 =====================
 
diff --git a/README.md b/README.md
index f69de01ca..12092117a 100644
--- a/README.md
+++ b/README.md
@@ -77,7 +77,7 @@ Releases of twilio-video.js are hosted on a CDN, and you can include these
 directly in your web app using a &lt;script&gt; tag.
 
 ```html
-<script src="//media.twiliocdn.com/sdk/js/video/releases/2.12.0/twilio-video.min.js"></script>
+<script src="//media.twiliocdn.com/sdk/js/video/releases/2.13.0/twilio-video.min.js"></script>
 
 ```
 
diff --git a/lib/localparticipant.js b/lib/localparticipant.js
index e39a7ba07..02a43f9df 100644
--- a/lib/localparticipant.js
+++ b/lib/localparticipant.js
@@ -313,7 +313,13 @@ class LocalParticipant extends Participant {
           self._addTrackPublication(localTrackPublication);
         }
 
-        if (self._signaling.state === 'connected') {
+        const { state } = self._signaling;
+        // NOTE(csantos): For tracks created before joining a room or already joined but about to publish it
+        if (localTrack.processedTrack && (state === 'connected' || state === 'connecting')) {
+          localTrack._captureFrames();
+          localTrack._setSenderMediaStreamTrack(true);
+        }
+        if (state === 'connected') {
           setTimeout(() => {
             self.emit('trackPublished', localTrackPublication);
           });
diff --git a/lib/media/track/audiotrack.js b/lib/media/track/audiotrack.js
index 99aeda42b..d9d906503 100644
--- a/lib/media/track/audiotrack.js
+++ b/lib/media/track/audiotrack.js
@@ -12,6 +12,8 @@ const MediaTrack = require('./mediatrack');
  *   enabled; if the {@link AudioTrack} is not enabled, it is "muted"
  * @property {Track.Kind} kind - "audio"
  * @property {MediaStreamTrack} mediaStreamTrack - An audio MediaStreamTrack
+ * @property {?MediaStreamTrack} processedTrack - The source of processed audio samples.
+ * It is always null as audio processing is not currently supported.
  * @emits AudioTrack#disabled
  * @emits AudioTrack#enabled
  * @emits AudioTrack#started
diff --git a/lib/media/track/localmediatrack.js b/lib/media/track/localmediatrack.js
index 3b96b982f..f26e2f1f8 100644
--- a/lib/media/track/localmediatrack.js
+++ b/lib/media/track/localmediatrack.js
@@ -189,9 +189,13 @@ function mixinLocalMediaTrack(AudioOrVideoTrack) {
       // stopped, this should fire a "stopped" event.
       this._stop();
 
-      return this._trackSender.setMediaStreamTrack(mediaStreamTrack).catch(error => {
+      // NOTE(csantos): If there's an unprocessedTrack, this means RTCRtpSender has
+      // the processedTrack already set, we don't want to replace that.
+      return (this._unprocessedTrack ? Promise.resolve().then(() => {
+        this._unprocessedTrack = mediaStreamTrack;
+      }) : this._trackSender.setMediaStreamTrack(mediaStreamTrack).catch(error => {
         this._log.warn('setMediaStreamTrack failed:', { error, mediaStreamTrack });
-      }).then(() => {
+      })).then(() => {
         this._initialize();
         this._getAllAttachedElements().forEach(el => this._attach(el));
       });
diff --git a/lib/media/track/localvideotrack.js b/lib/media/track/localvideotrack.js
index f1e2fefe6..9493174e2 100644
--- a/lib/media/track/localvideotrack.js
+++ b/lib/media/track/localvideotrack.js
@@ -62,6 +62,13 @@ class LocalVideoTrack extends LocalMediaVideoTrack {
     return `[LocalVideoTrack #${this._instanceId}: ${this.id}]`;
   }
 
+  /**
+   * @private
+   */
+  _canCaptureFrames() {
+    return super._canCaptureFrames.call(this, this._trackSender.isPublishing);
+  }
+
   /**
    * @private
    */
@@ -69,30 +76,139 @@ class LocalVideoTrack extends LocalMediaVideoTrack {
     return super._end.apply(this, arguments);
   }
 
+  /**
+   * @private
+   */
+  _setSenderMediaStreamTrack(useProcessed) {
+    const unprocessedTrack = this.mediaStreamTrack;
+    const mediaStreamTrack = useProcessed ? this.processedTrack : unprocessedTrack;
+
+    return this._trackSender.setMediaStreamTrack(mediaStreamTrack)
+      .catch(error => this._log.warn(
+        'setMediaStreamTrack failed on LocalVideoTrack RTCRtpSender', { error, mediaStreamTrack }))
+      .then(() => {
+        this._unprocessedTrack = useProcessed ? unprocessedTrack : null;
+      });
+  }
+
+  /**
+   * Add a {@link 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.
+   * @param {VideoProcessor} processor - The {@link VideoProcessor} to use.
+   * @returns {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 localVideoTrack = Array.from(room.localParticipant.videoTracks.values())[0].track;
+   * localVideoTrack.addProcessor(new GrayScaleProcessor(100));
+   */
+  addProcessor() {
+    this._log.debug('Adding VideoProcessor to the LocalVideoTrack');
+    const result = super.addProcessor.apply(this, arguments);
+
+    if (!this.processedTrack) {
+      return this._log.warn('Unable to add a VideoProcessor to the LocalVideoTrack');
+    }
+
+    this._log.debug('Updating LocalVideoTrack\'s MediaStreamTrack with the processed MediaStreamTrack', this.processedTrack);
+    this._setSenderMediaStreamTrack(true);
+
+    return result;
+  }
+
+  /**
+   * Remove the previously added {@link VideoProcessor} using `addProcessor` API.
+   * @param {VideoProcessor} processor - The {@link VideoProcessor} to remove.
+   * @returns {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 localVideoTrack = Array.from(room.localParticipant.videoTracks.values())[0].track;
+   * const grayScaleProcessor = new GrayScaleProcessor(100);
+   * localVideoTrack.addProcessor(grayScaleProcessor);
+   *
+   * document.getElementById('remove-button').onclick = () => localVideoTrack.removeProcessor(grayScaleProcessor);
+   */
+  removeProcessor() {
+    this._log.debug('Removing VideoProcessor from the LocalVideoTrack');
+    const result = super.removeProcessor.apply(this, arguments);
+
+    this._log.debug('Updating LocalVideoTrack\'s MediaStreamTrack with the original MediaStreamTrack');
+    this._setSenderMediaStreamTrack()
+      .then(() => this._updateElementsMediaStreamTrack());
+
+    return result;
+  }
+
   /**
    * Disable the {@link LocalVideoTrack}. This is effectively "pause".
+   * If a {@link VideoProcessor} is added, then `processedTrack` is disabled as well.
    * @returns {this}
    * @fires VideoTrack#disabled
    */
   disable() {
-    return super.disable.apply(this, arguments);
+    const result = super.disable.apply(this, arguments);
+    if (this.processedTrack) {
+      this.processedTrack.enabled = false;
+    }
+    return result;
   }
 
   /**
    * Enable the {@link LocalVideoTrack}. This is effectively "unpause".
+   * If a {@link VideoProcessor} is added, then `processedTrack` is enabled as well.
    * @returns {this}
    * @fires VideoTrack#enabled
   *//**
    * Enable or disable the {@link LocalVideoTrack}. This is effectively "unpause"
-   * or "pause".
+   * or "pause". If a {@link VideoProcessor} is added,
+   * then `processedTrack` is enabled or disabled as well.
    * @param {boolean} [enabled] - Specify false to pause the
    *   {@link LocalVideoTrack}
    * @returns {this}
    * @fires VideoTrack#disabled
    * @fires VideoTrack#enabled
    */
-  enable() {
-    return super.enable.apply(this, arguments);
+  enable(enabled = true) {
+    const result = super.enable.apply(this, arguments);
+    if (this.processedTrack) {
+      this.processedTrack.enabled = enabled;
+
+      if (enabled) {
+        this._captureFrames();
+        this._log.debug('Updating LocalVideoTrack\'s MediaStreamTrack with the processed MediaStreamTrack', this.processedTrack);
+        this._setSenderMediaStreamTrack(true);
+      }
+    }
+    return result;
   }
 
   /**
@@ -134,7 +250,13 @@ class LocalVideoTrack extends LocalMediaVideoTrack {
       this._workaroundSilentLocalVideoCleanup();
       this._workaroundSilentLocalVideoCleanup = null;
     }
+
     const promise = super.restart.apply(this, arguments);
+    if (this.processor) {
+      promise.then(() => {
+        this._restartProcessor();
+      });
+    }
 
     if (this._workaroundSilentLocalVideo) {
       promise.finally(() => {
diff --git a/lib/media/track/mediatrack.js b/lib/media/track/mediatrack.js
index 30b3ba641..aa0c19da8 100644
--- a/lib/media/track/mediatrack.js
+++ b/lib/media/track/mediatrack.js
@@ -72,6 +72,10 @@ class MediaTrack extends Track {
         value: options.workaroundWebKitBug212780
           || options.playPausedElementsIfNotBackgrounded
       },
+      _unprocessedTrack: {
+        value: null,
+        writable: true
+      },
       _MediaStream: {
         value: options.MediaStream
       },
@@ -84,8 +88,13 @@ class MediaTrack extends Track {
       mediaStreamTrack: {
         enumerable: true,
         get() {
-          return mediaTrackTransceiver.track;
+          return this._unprocessedTrack || mediaTrackTransceiver.track;
         }
+      },
+      processedTrack: {
+        enumerable: true,
+        value: null,
+        writable: true
       }
     });
 
@@ -122,7 +131,10 @@ class MediaTrack extends Track {
     if (this._dummyEl) {
       this._dummyEl.muted = true;
       this._dummyEl.oncanplay = this._start.bind(this, this._dummyEl);
-      this._attach(this._dummyEl);
+
+      // NOTE(csantos): We always want to attach the original mediaStreamTrack for dummyEl
+      this._attach(this._dummyEl, this.mediaStreamTrack);
+
       this._attachments.delete(this._dummyEl);
     }
   }
@@ -158,22 +170,27 @@ class MediaTrack extends Track {
   }
 
   /**
+   * Attach the provided MediaStreamTrack to the media element.
+   * @param el - The media element to attach to
+   * @param mediaStreamTrack - The MediaStreamTrack to attach. If this is
+   * not provided, it uses the processedTrack if it exists
+   * or it defaults to the current mediaStreamTrack
    * @private
    */
-  _attach(el) {
+  _attach(el, mediaStreamTrack = this.processedTrack || this.mediaStreamTrack) {
     let mediaStream = el.srcObject;
     if (!(mediaStream instanceof this._MediaStream)) {
       mediaStream = new this._MediaStream();
     }
 
-    const getTracks = this.mediaStreamTrack.kind === 'audio'
+    const getTracks = mediaStreamTrack.kind === 'audio'
       ? 'getAudioTracks'
       : 'getVideoTracks';
 
-    mediaStream[getTracks]().forEach(mediaStreamTrack => {
-      mediaStream.removeTrack(mediaStreamTrack);
+    mediaStream[getTracks]().forEach(track => {
+      mediaStream.removeTrack(track);
     });
-    mediaStream.addTrack(this.mediaStreamTrack);
+    mediaStream.addTrack(mediaStreamTrack);
 
     // NOTE(mpatwardhan): resetting `srcObject` here, causes flicker (JSDK-2641), but it lets us
     // to sidestep the a chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1052353
@@ -202,6 +219,14 @@ class MediaTrack extends Track {
     return el;
   }
 
+  /**
+   * @private
+   */
+  _updateElementsMediaStreamTrack() {
+    this._log.debug('Reattaching all elements to update mediaStreamTrack');
+    this._getAllAttachedElements().forEach(el => this._attach(el));
+  }
+
   /**
    * @private
    */
@@ -244,7 +269,7 @@ class MediaTrack extends Track {
 
     const mediaStream = el.srcObject;
     if (mediaStream instanceof this._MediaStream) {
-      mediaStream.removeTrack(this.mediaStreamTrack);
+      mediaStream.removeTrack(this.processedTrack || this.mediaStreamTrack);
     }
 
     this._attachments.delete(el);
diff --git a/lib/media/track/remotemediatrack.js b/lib/media/track/remotemediatrack.js
index fb88621bb..e63d0384a 100644
--- a/lib/media/track/remotemediatrack.js
+++ b/lib/media/track/remotemediatrack.js
@@ -139,6 +139,16 @@ function mixinRemoteMediaTrack(AudioOrVideoTrack) {
         // are no attachments to it (see notes below). Now that there
         // are attachments re-enable the track.
         this.mediaStreamTrack.enabled = true;
+        if (this.processedTrack) {
+          this.processedTrack.enabled = true;
+        }
+
+        // NOTE(csantos): since remote tracks disables/enables the mediaStreamTrack,
+        // captureFrames stops along with it. We need to start it again after re-enabling.
+        // See attach/detach methods in this class and in VideoTrack class.
+        if (this.processor) {
+          this._captureFrames();
+        }
       }
       if (this._workaroundWebKitBug212780) {
         this._workaroundWebKitBug212780Cleanup = this._workaroundWebKitBug212780Cleanup
@@ -157,6 +167,9 @@ function mixinRemoteMediaTrack(AudioOrVideoTrack) {
         // to workaround: here disable the track when
         // there are no elements attached to it.
         this.mediaStreamTrack.enabled = false;
+        if (this.processedTrack) {
+          this.processedTrack.enabled = false;
+        }
 
         if (this._workaroundWebKitBug212780Cleanup) {
           // unhook visibility change
diff --git a/lib/media/track/remotevideotrack.js b/lib/media/track/remotevideotrack.js
index 115e45ae3..0eec3897d 100644
--- a/lib/media/track/remotevideotrack.js
+++ b/lib/media/track/remotevideotrack.js
@@ -35,6 +35,80 @@ class RemoteVideoTrack extends RemoteMediaVideoTrack {
     super(sid, mediaTrackReceiver, isEnabled, isSwitchedOff, setPriority, options);
   }
 
+  /**
+   * Add a {@link 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.
+   * @param {VideoProcessor} processor - The {@link VideoProcessor} to use.
+   * @returns {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);
+   * });
+   */
+  addProcessor() {
+    return super.addProcessor.apply(this, arguments);
+  }
+
+  /**
+   * Remove the previously added {@link VideoProcessor} using `addProcessor` API.
+   * @param {VideoProcessor} processor - The {@link VideoProcessor} to remove.
+   * @returns {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);
+   *   });
+   * }
+   */
+  removeProcessor() {
+    return super.removeProcessor.apply(this, arguments);
+  }
+
   toString() {
     return `[RemoteVideoTrack #${this._instanceId}: ${this.sid}]`;
   }
diff --git a/lib/media/track/sender.js b/lib/media/track/sender.js
index ebe56ed5e..edfb3f5c6 100644
--- a/lib/media/track/sender.js
+++ b/lib/media/track/sender.js
@@ -19,6 +19,11 @@ class MediaTrackSender extends MediaTrackTransceiver {
       },
       _senders: {
         value: new Set()
+      },
+      isPublishing: {
+        get() {
+          return !!this._clones.size;
+        }
       }
     });
   }
diff --git a/lib/media/track/videotrack.js b/lib/media/track/videotrack.js
index 9019feb72..d2ffe4eeb 100644
--- a/lib/media/track/videotrack.js
+++ b/lib/media/track/videotrack.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const MediaTrack = require('./mediatrack');
+const { DEFAULT_FRAME_RATE } = require('../../util/constants');
 
 /**
  * A {@link VideoTrack} is a {@link Track} representing video.
@@ -14,6 +15,10 @@ const MediaTrack = require('./mediatrack');
  *   {@link VideoTrack.Dimensions}
  * @property {Track.Kind} kind - "video"
  * @property {MediaStreamTrack} mediaStreamTrack - A video MediaStreamTrack
+ * @property {?MediaStreamTrack} processedTrack - The source of processed video frames.
+ * It is null if no VideoProcessor has been added.
+ * @property {?VideoProcessor} processor - A {@link VideoProcessor} that is currently
+ *   processing video frames. It is null if video frames are not being processed.
  * @emits VideoTrack#dimensionsChanged
  * @emits VideoTrack#disabled
  * @emits VideoTrack#enabled
@@ -28,17 +33,132 @@ class VideoTrack extends MediaTrack {
   constructor(mediaTrackTransceiver, options) {
     super(mediaTrackTransceiver, options);
     Object.defineProperties(this, {
+      _captureTimeoutId: {
+        value: null,
+        writable: true
+      },
+      _isCapturing: {
+        value: false,
+        writable: true
+      },
+      _inputFrame: {
+        value: null,
+        writable: true
+      },
+      _outputFrame: {
+        value: null,
+        writable: true
+      },
+      _unmuteHandler: {
+        value: null,
+        writable: true
+      },
       dimensions: {
         enumerable: true,
         value: {
           width: null,
           height: null
         }
+      },
+      processor: {
+        enumerable: true,
+        value: null,
+        writable: true
       }
     });
+
     return this;
   }
 
+  /**
+   * @private
+   */
+  _canCaptureFrames(isPublishing = false) {
+    let canCaptureFrames = true;
+    const { enabled, readyState } = this.mediaStreamTrack;
+    if (!enabled) {
+      canCaptureFrames = false;
+      this._log.debug('MediaStreamTrack is disabled');
+    }
+    if (readyState === 'ended') {
+      canCaptureFrames = false;
+      this._log.debug('MediaStreamTrack is ended');
+    }
+    if (!this.processor) {
+      canCaptureFrames = false;
+      this._log.debug('VideoProcessor not detected.');
+    }
+    if (!this._attachments.size && !isPublishing) {
+      canCaptureFrames = false;
+      this._log.debug('VideoTrack is not publishing and there is no attached element.');
+    }
+    return canCaptureFrames;
+  }
+
+  /**
+   * @private
+   */
+  _captureFrames() {
+    if (this._isCapturing) {
+      return this._log.debug('Ignoring captureFrames call. Capture is already in progress');
+    }
+    if (!this._canCaptureFrames()) {
+      this._isCapturing = false;
+      return this._log.debug('Cannot capture frames. Ignoring captureFrames call.');
+    }
+    this._isCapturing = true;
+    this._log.debug('Start capturing frames');
+
+    let startTime = Date.now();
+    let processFramePeriodMs;
+
+    this._dummyEl.play().then(() => {
+      const captureFrame = cb => {
+        clearTimeout(this._captureTimeoutId);
+        const { frameRate = DEFAULT_FRAME_RATE } = this.mediaStreamTrack.getSettings();
+        const capturePeriodMs = Math.floor(1000 / frameRate);
+        let delay = capturePeriodMs - processFramePeriodMs;
+        if (delay < 0 || typeof processFramePeriodMs !== 'number') {
+          delay = 0;
+        }
+        this._captureTimeoutId = setTimeout(cb, delay);
+      };
+      const process = () => {
+        if (!this._canCaptureFrames()) {
+          this._isCapturing = false;
+          return this._log.debug('Cannot capture frames. Stopping capturing frames.');
+        }
+        startTime = Date.now();
+
+        const { width = 0, height = 0 } = this.mediaStreamTrack.getSettings();
+        this._inputFrame.width = width;
+        this._inputFrame.height = height;
+        this._inputFrame.getContext('2d').drawImage(this._dummyEl, 0, 0, width, height);
+
+        let result = null;
+        try {
+          result = this.processor.processFrame(this._inputFrame);
+        } catch (ex) {
+          this._log.debug('Exception detected after calling processFrame.', ex);
+        }
+        ((result instanceof Promise) ? result : Promise.resolve(result))
+          .then(outputFrame => {
+            if (outputFrame && this._outputFrame) {
+              this._outputFrame.width = width;
+              this._outputFrame.height = height;
+              this._outputFrame.getContext('2d').drawImage(outputFrame, 0, 0, width, height);
+              this.processedTrack.requestFrame();
+            }
+          })
+          .finally(() => {
+            processFramePeriodMs = Date.now() - startTime;
+            captureFrame(process);
+          });
+      };
+      captureFrame(process);
+    }).catch(error => this._log.error('Video element cannot be played', { error, track: this }));
+  }
+
   /**
    * @private
    */
@@ -64,6 +184,17 @@ class VideoTrack extends MediaTrack {
     }
   }
 
+  /**
+   * @private
+   */
+  _restartProcessor() {
+    const processor = this.processor;
+    if (processor) {
+      this.removeProcessor(processor);
+      this.addProcessor(processor);
+    }
+  }
+
   /**
    * @private
    */
@@ -75,6 +206,76 @@ class VideoTrack extends MediaTrack {
     return super._start.call(this, dummyEl);
   }
 
+  /**
+   * Add a {@link 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.
+   * @param {VideoProcessor} processor - The {@link VideoProcessor} to use.
+   * @returns {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;
+   *   }
+   * }
+   *
+   * Video.createLocalVideoTrack().then(function(videoTrack) {
+   *   videoTrack.addProcessor(new GrayScaleProcessor(100));
+   * });
+   */
+  addProcessor(processor) {
+    if (typeof OffscreenCanvas !== 'function') {
+      return this._log.warn('Adding a VideoProcessor is not supported in this browser.');
+    }
+    if (!processor || typeof processor.processFrame !== 'function') {
+      throw new Error('Received an invalid VideoProcessor from addProcessor.');
+    }
+    if (this.processor) {
+      throw new Error('A VideoProcessor has already been added.');
+    }
+    if (!this._dummyEl) {
+      throw new Error('VideoTrack has not been initialized.');
+    }
+    this._log.debug('Adding VideoProcessor to the VideoTrack', processor);
+
+    if (!this._unmuteHandler) {
+      this._unmuteHandler = () => {
+        this._log.debug('mediaStreamTrack unmuted');
+        // NOTE(csantos): On certain scenarios where mediaStreamTrack is coming from muted to unmuted state,
+        // the processedTrack doesn't unmutes automatically although enabled is already set to true.
+        // This is a terminal state for the processedTrack and should be restarted. (VIDEO-4176)
+        if (this.processedTrack.muted) {
+          this._log.debug('mediaStreamTrack is unmuted but processedTrack is muted. Restarting processor.');
+          this._restartProcessor();
+        }
+      };
+      this.mediaStreamTrack.addEventListener('unmute', this._unmuteHandler);
+    }
+
+    const { width = 0, height = 0 } = this.mediaStreamTrack.getSettings();
+    this._inputFrame = new OffscreenCanvas(width, height);
+    this._outputFrame = document.createElement('canvas');
+    this._outputFrame.width = width;
+    this._outputFrame.height = height;
+
+    this.processedTrack = this._outputFrame.captureStream(0).getTracks()[0];
+    this.processedTrack.enabled = this.mediaStreamTrack.enabled;
+    this.processor = processor;
+
+    this._updateElementsMediaStreamTrack();
+    this._captureFrames();
+    return this;
+  }
+
   /**
    * Create an HTMLVideoElement and attach the {@link VideoTrack} to it.
    *
@@ -138,7 +339,11 @@ class VideoTrack extends MediaTrack {
    * });
    */
   attach() {
-    return super.attach.apply(this, arguments);
+    const result = super.attach.apply(this, arguments);
+    if (this.processor) {
+      this._captureFrames();
+    }
+    return result;
   }
 
   /**
@@ -167,6 +372,60 @@ class VideoTrack extends MediaTrack {
   detach() {
     return super.detach.apply(this, arguments);
   }
+
+  /**
+   * Remove the previously added {@link VideoProcessor} using `addProcessor` API.
+   * @param {VideoProcessor} processor - The {@link VideoProcessor} to remove.
+   * @returns {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;
+   *   }
+   * }
+   *
+   * Video.createLocalVideoTrack().then(function(videoTrack) {
+   *   const grayScaleProcessor = new GrayScaleProcessor(100);
+   *   videoTrack.addProcessor(grayScaleProcessor);
+   *   document.getElementById('remove-button').onclick = () => videoTrack.removeProcessor(grayScaleProcessor);
+   * });
+   */
+  removeProcessor(processor) {
+    if (!processor) {
+      throw new Error('Received an invalid VideoProcessor from removeProcessor.');
+    }
+    if (!this.processor) {
+      throw new Error('No existing VideoProcessor detected.');
+    }
+    if (processor !== this.processor) {
+      throw new Error('The provided VideoProcessor is different than the existing one.');
+    }
+    this._log.debug('Removing VideoProcessor from the VideoTrack', processor);
+    clearTimeout(this._captureTimeoutId);
+    this.mediaStreamTrack.removeEventListener('unmute', this._unmuteHandler);
+    this._unmuteHandler = null;
+    this._isCapturing = false;
+
+    this.processor = null;
+    this.processedTrack = null;
+    this._inputFrame.getContext('2d').clearRect(0, 0, this._inputFrame.width, this._inputFrame.height);
+    this._outputFrame.getContext('2d').clearRect(0, 0, this._outputFrame.width, this._outputFrame.height);
+    this._inputFrame = null;
+    this._outputFrame = null;
+
+    this._updateElementsMediaStreamTrack();
+    return this;
+  }
 }
 
 VideoTrack.DIMENSIONS_CHANGED = 'dimensionsChanged';
@@ -185,6 +444,19 @@ function dimensionsChanged(track, elem) {
  *   {@link VideoTrack} has not yet started
  */
 
+/**
+ * A {@link VideoProcessor} is used to process incoming video frames before
+ * sending to the encoder or renderer.
+ * @typedef {object} VideoProcessor
+ * @property {function} processFrame - A callback to receive incoming video frames for processing.
+ * Any exception raised (either synchronously or asynchronously) in `processFrame` will result in the frame being dropped.
+ * Developers can drop the current frame by returning null.
+ * This callback has the following signature:
+ * <code>processFrame(inputFrame: OffscreenCanvas)</code><br/>
+ * &nbsp;&nbsp;<code>: Promise<OffscreenCanvas | null></code><br/>
+ * &nbsp;&nbsp;<code>| OffscreenCanvas | null;</code><br/>
+ */
+
 /**
  * The {@link VideoTrack}'s dimensions changed.
  * @param {VideoTrack} track - The {@link VideoTrack} whose dimensions changed
diff --git a/lib/util/constants.js b/lib/util/constants.js
index f13bcbc9f..edbc0702a 100644
--- a/lib/util/constants.js
+++ b/lib/util/constants.js
@@ -42,6 +42,8 @@ module.exports.typeErrors = {
   }
 };
 
+module.exports.DEFAULT_FRAME_RATE = 24;
+
 module.exports.DEFAULT_ICE_GATHERING_TIMEOUT_MS = 15000;
 module.exports.DEFAULT_SESSION_TIMEOUT_SEC = 30;
 
diff --git a/package.json b/package.json
index 9aa50d54f..8ff296a05 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "twilio-video",
   "title": "Twilio Video",
   "description": "Twilio Video JavaScript Library",
-  "version": "2.12.1-dev",
+  "version": "2.13.0-dev",
   "homepage": "https://twilio.com",
   "author": "Mark Andrus Roberts <mroberts@twilio.com>",
   "contributors": [
@@ -61,6 +61,7 @@
     "karma-safari-launcher": "^1.0.0",
     "karma-spec-reporter": "0.0.32",
     "mocha": "^3.2.0",
+    "mock-require": "^3.0.3",
     "node-http-server": "^8.1.2",
     "npm-run-all": "^4.0.2",
     "requirejs": "^2.3.3",
diff --git a/test/unit/index.js b/test/unit/index.js
index 90ff4ba16..1004b4418 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -27,6 +27,7 @@ require('./spec/media/track/mediatrack');
 require('./spec/media/track/localdatatrack');
 require('./spec/media/track/localmediatrack');
 require('./spec/media/track/localaudiotrack');
+require('./spec/media/track/localvideotrack');
 require('./spec/media/track/localtrackpublication');
 require('./spec/media/track/receiver');
 require('./spec/media/track/remotedatatrack');
@@ -34,6 +35,7 @@ require('./spec/media/track/remotemediatrack');
 require('./spec/media/track/remotetrackpublication');
 require('./spec/media/track/sender');
 require('./spec/media/track/transceiver');
+require('./spec/media/track/videotrack');
 
 require('./spec/signaling/participant');
 require('./spec/signaling/room');
diff --git a/test/unit/spec/localparticipant.js b/test/unit/spec/localparticipant.js
index fb296effc..dd5a7196b 100644
--- a/test/unit/spec/localparticipant.js
+++ b/test/unit/spec/localparticipant.js
@@ -449,6 +449,38 @@ describe('LocalParticipant', () => {
                   it('should raise a "trackPublished" event with the LocalTrackPublication after the Promise resolves', () => {
                     assert.equal(trackPublishedEvent, localTrackPublication);
                   });
+
+                  if (hasLocalTrack && kind === 'video' && trackType === 'LocalTrack') {
+                    ['connecting', 'connected'].forEach(state => {
+                      describe(`when handling processed tracks and signaling state is ${state}`, () => {
+                        let localTrack;
+
+                        beforeEach(() => {
+                          test.signaling.state = state;
+                          localTrack = createTrack();
+                          localTrack._captureFrames = sinon.stub();
+                          localTrack._setSenderMediaStreamTrack = sinon.stub();
+                        });
+
+                        it('should update RTCRtpSender\'s MediaStreamTrack if the track has a processedTrack', async () => {
+                          localTrack.processedTrack = 'foo';
+                          publishTrack(localTrack);
+                          test.participant._signaling.tracks.get(localTrack.id).setSid('foo');
+                          await new Promise(resolve => setTimeout(resolve));
+                          sinon.assert.calledOnce(localTrack._captureFrames);
+                          sinon.assert.calledWith(localTrack._setSenderMediaStreamTrack, true);
+                        });
+
+                        it('should not update RTCRtpSender\'s MediaStreamTrack if the track does not have a processedTrack', async () => {
+                          publishTrack(localTrack);
+                          test.participant._signaling.tracks.get(localTrack.id).setSid('foo');
+                          await new Promise(resolve => setTimeout(resolve));
+                          sinon.assert.notCalled(localTrack._captureFrames);
+                          sinon.assert.notCalled(localTrack._setSenderMediaStreamTrack);
+                        });
+                      });
+                    });
+                  }
                 } else {
                   it('should not raise a "trackPublished" event', () => {
                     assert(!trackPublishedEvent);
diff --git a/test/unit/spec/media/track/localmediatrack.js b/test/unit/spec/media/track/localmediatrack.js
index b42390719..b5f0e2cdc 100644
--- a/test/unit/spec/media/track/localmediatrack.js
+++ b/test/unit/spec/media/track/localmediatrack.js
@@ -136,10 +136,31 @@ const { defer } = require('../../../../../lib/util');
         assert.equal(track.name, trackName);
       });
 
-      it('should update underlying mediaStreamTrack', async () => {
+      it('should update underlying mediaStreamTrack if unprocessedTrack does not exists', async () => {
+        const stub = sinon.stub();
+        const originalFn = track._trackSender.setMediaStreamTrack;
+        track._trackSender.setMediaStreamTrack = mediaStreamTrack => {
+          stub(mediaStreamTrack);
+          return originalFn.call(track._trackSender, mediaStreamTrack);
+        };
         const newTrack = new MediaStreamTrack(kind[description]);
         await track._setMediaStreamTrack(newTrack);
         assert.equal(track.mediaStreamTrack, newTrack);
+        sinon.assert.calledWith(stub, newTrack);
+      });
+
+      it('should not update underlying mediaStreamTrack if unprocessedTrack exists', async () => {
+        const stub = sinon.stub();
+        const originalFn = track._trackSender.setMediaStreamTrack;
+        track._trackSender.setMediaStreamTrack = mediaStreamTrack => {
+          stub(mediaStreamTrack);
+          return originalFn.call(track._trackSender, mediaStreamTrack);
+        };
+        const newTrack = new MediaStreamTrack(kind[description]);
+        track._unprocessedTrack = new MediaStreamTrack(kind[description]);
+        await track._setMediaStreamTrack(newTrack);
+        assert.equal(newTrack, track._unprocessedTrack);
+        sinon.assert.notCalled(stub);
       });
 
       it('should fire stopped and started events before and after replacing track respectively', async () => {
@@ -357,6 +378,7 @@ const { defer } = require('../../../../../lib/util');
             'name',
             'isStarted',
             'mediaStreamTrack',
+            'processedTrack',
             'id',
             'isEnabled',
             'isStopped'
@@ -367,7 +389,9 @@ const { defer } = require('../../../../../lib/util');
             'name',
             'isStarted',
             'mediaStreamTrack',
+            'processedTrack',
             'dimensions',
+            'processor',
             'id',
             'isEnabled',
             'isStopped'
@@ -392,7 +416,8 @@ const { defer } = require('../../../../../lib/util');
             isStopped: track.isStopped,
             kind: track.kind,
             mediaStreamTrack: track.mediaStreamTrack,
-            name: track.name
+            name: track.name,
+            processedTrack: null
           });
         } else {
           assert.deepEqual(track.toJSON(), {
@@ -403,7 +428,9 @@ const { defer } = require('../../../../../lib/util');
             dimensions: track.dimensions,
             kind: track.kind,
             mediaStreamTrack: track.mediaStreamTrack,
-            name: track.name
+            name: track.name,
+            processor: null,
+            processedTrack: null
           });
         }
       });
diff --git a/test/unit/spec/media/track/localvideotrack.js b/test/unit/spec/media/track/localvideotrack.js
new file mode 100644
index 000000000..b9d550fac
--- /dev/null
+++ b/test/unit/spec/media/track/localvideotrack.js
@@ -0,0 +1,218 @@
+'use strict';
+
+const assert = require('assert');
+const sinon = require('sinon');
+const mock = require('mock-require');
+const log = require('../../../../lib/fakelog');
+const { FakeMediaStreamTrack: MediaStreamTrack } = require('../../../../lib/fakemediastream');
+
+describe('LocalVideoTrack', () => {
+  const parentClassContext = {};
+  const internalPromise = () => Promise.resolve().then(Promise.resolve());
+  let localVideoTrack;
+  let mediaStreamTrack;
+  let LocalVideoTrack;
+
+  before(() => {
+    delete require.cache[require.resolve('../../../../../lib/media/track/localmediatrack')];
+    delete require.cache[require.resolve('../../../../../lib/media/track/localvideotrack')];
+    mock('../../../../../lib/media/track/localmediatrack', function() {
+      return class LocalMediaTrack {
+        constructor() {
+          this._log = log;
+        }
+        _canCaptureFrames() {
+          return parentClassContext._canCaptureFrames(...arguments);
+        }
+        _captureFrames() {
+          parentClassContext._captureFrames(...arguments);
+        }
+        addProcessor() {
+          return parentClassContext.addProcessor(...arguments);
+        }
+        removeProcessor() {
+          return parentClassContext.removeProcessor(...arguments);
+        }
+        disable() {
+          return parentClassContext.disable(...arguments);
+        }
+        enable() {
+          return parentClassContext.enable(...arguments);
+        }
+        restart() {
+          return parentClassContext.restart(...arguments);
+        }
+      };
+    });
+    LocalVideoTrack = require('../../../../../lib/media/track/localvideotrack');
+  });
+
+  after(() => {
+    mock.stopAll();
+  });
+
+  beforeEach(() => {
+    parentClassContext._canCaptureFrames = sinon.spy();
+    parentClassContext._captureFrames = sinon.spy();
+    parentClassContext.addProcessor = sinon.spy();
+    parentClassContext.removeProcessor = sinon.spy();
+    parentClassContext.disable = sinon.spy();
+    parentClassContext.enable = sinon.spy();
+    parentClassContext.restart = sinon.stub().resolves({});
+
+    mediaStreamTrack = new MediaStreamTrack('foo', 'video');
+    localVideoTrack = new LocalVideoTrack(mediaStreamTrack, {});
+    localVideoTrack._trackSender = {
+      setMediaStreamTrack: sinon.stub().resolves({}),
+      isPublishing: false,
+    };
+    localVideoTrack._updateElementsMediaStreamTrack = sinon.stub();
+    localVideoTrack.mediaStreamTrack = mediaStreamTrack;
+  });
+
+  describe('#_canCaptureFrames', () => {
+    it('should call parent class method with isPublishing equal to false', () => {
+      localVideoTrack._canCaptureFrames();
+      sinon.assert.calledWith(parentClassContext._canCaptureFrames, false);
+    });
+    it('should call parent class method with isPublishing equal to true', () => {
+      localVideoTrack._trackSender.isPublishing = true;
+      localVideoTrack._canCaptureFrames();
+      sinon.assert.calledWith(parentClassContext._canCaptureFrames, true);
+    });
+  });
+
+  describe('#addProcessor', () => {
+    it('should call parent class method', () => {
+      localVideoTrack.addProcessor('foo');
+      sinon.assert.calledWith(parentClassContext.addProcessor, 'foo');
+    });
+
+    it('should not set RTCRtpSender if processedTrack is not available', () => {
+      localVideoTrack.addProcessor();
+      sinon.assert.notCalled(localVideoTrack._trackSender.setMediaStreamTrack);
+    });
+
+    it('should set RTCRtpSender if processedTrack is available', () => {
+      localVideoTrack.processedTrack = 'foo';
+      localVideoTrack.addProcessor();
+      sinon.assert.calledWith(localVideoTrack._trackSender.setMediaStreamTrack, 'foo');
+    });
+  });
+
+  describe('#removeProcessor', () => {
+    beforeEach(() => {
+      localVideoTrack._unprocessedTrack = 'bar';
+      localVideoTrack.removeProcessor('foo');
+    });
+
+    it('should call parent class method', () => {
+      sinon.assert.calledWith(parentClassContext.removeProcessor, 'foo');
+    });
+
+    it('should set RTCRtpSender with the original mediaStreamTrack', () => {
+      sinon.assert.calledWith(localVideoTrack._trackSender.setMediaStreamTrack, mediaStreamTrack);
+    });
+
+    it('should set attached elements srcObject with the original mediaStreamTrack', async () => {
+      // Resolves _trackSender.setMediaStreamTrack
+      await internalPromise();
+      // Trigger the 'then' callback
+      await internalPromise();
+      sinon.assert.called(localVideoTrack._updateElementsMediaStreamTrack);
+    });
+
+    it('should set unprocessedTrack to null after trackSender.setMediaStreamTrack resolves', async () => {
+      assert.equal(localVideoTrack._unprocessedTrack, 'bar');
+      // Resolves _trackSender.setMediaStreamTrack
+      await internalPromise();
+      // Trigger the 'then' callback
+      await internalPromise();
+      assert.equal(localVideoTrack._unprocessedTrack, null);
+    });
+  });
+
+  describe('#enable', () => {
+    it('should call parent class method', () => {
+      localVideoTrack.enable();
+      sinon.assert.calledOnce(parentClassContext.enable);
+    });
+
+    [true, undefined].forEach(param => {
+      context(`when enabled parameter is ${param}`, () => {
+        it('should enable processedTrack', () => {
+          localVideoTrack.processedTrack = {};
+          localVideoTrack.enable(param);
+          assert(localVideoTrack.processedTrack.enabled);
+        });
+
+        it('should start capturing frames if processedTrack is available', () => {
+          localVideoTrack.processedTrack = { foo: 'foo' };
+          localVideoTrack.enable(param);
+          sinon.assert.calledOnce(parentClassContext._captureFrames);
+          sinon.assert.calledWith(localVideoTrack._trackSender.setMediaStreamTrack, { enabled: true, foo: 'foo' });
+        });
+
+        it('should not start capturing frames if processedTrack is not available', () => {
+          localVideoTrack.enable(param);
+          sinon.assert.notCalled(parentClassContext._captureFrames);
+          sinon.assert.notCalled(localVideoTrack._trackSender.setMediaStreamTrack);
+        });
+      });
+    });
+
+    context('when enabled parameter is false', () => {
+      it('should disable processedTrack', () => {
+        localVideoTrack.processedTrack = {};
+        localVideoTrack.enable(false);
+        assert(!localVideoTrack.processedTrack.enabled);
+      });
+
+      it('should not start capturing frames if processedTrack is available', () => {
+        localVideoTrack.processedTrack = {};
+        localVideoTrack.enable(false);
+        sinon.assert.notCalled(parentClassContext._captureFrames);
+        sinon.assert.notCalled(localVideoTrack._trackSender.setMediaStreamTrack);
+      });
+    });
+  });
+
+  describe('#disable', () => {
+    it('should call parent class method', () => {
+      localVideoTrack.disable();
+      sinon.assert.calledOnce(parentClassContext.disable);
+    });
+
+    it('should disable processedTrack', () => {
+      localVideoTrack.processedTrack = {};
+      localVideoTrack.disable();
+      assert(localVideoTrack.processedTrack.enabled === false);
+    });
+  });
+
+  describe('#restart', () => {
+    beforeEach(() => {
+      localVideoTrack._restartProcessor = sinon.stub();
+    });
+
+    it('should call parent class method', () => {
+      localVideoTrack.restart();
+      sinon.assert.calledOnce(parentClassContext.restart);
+    });
+
+    it('should not call _restartProcessor if no VideoProcessor is added', () => {
+      localVideoTrack.restart();
+      sinon.assert.notCalled(localVideoTrack._restartProcessor);
+    });
+
+    it('should call restart and _restartProcessor in the correct order', async () => {
+      localVideoTrack.processor = 'foo';
+      localVideoTrack.restart();
+      await internalPromise();
+      sinon.assert.calledOnce(parentClassContext.restart);
+      sinon.assert.calledOnce(localVideoTrack._restartProcessor);
+
+      sinon.assert.callOrder(parentClassContext.restart, localVideoTrack._restartProcessor);
+    });
+  });
+});
diff --git a/test/unit/spec/media/track/mediatrack.js b/test/unit/spec/media/track/mediatrack.js
index beff2fad6..a92fa85da 100644
--- a/test/unit/spec/media/track/mediatrack.js
+++ b/test/unit/spec/media/track/mediatrack.js
@@ -29,13 +29,22 @@ describe('MediaTrack', () => {
   });
 
   describe('constructor', () => {
-    before(() => {
+    beforeEach(() => {
       track = createMediaTrack('1', 'audio');
     });
 
     it('should call ._initialize', () => {
       assert.equal(track._initialize.callCount, 1);
     });
+
+    it('should return unprocessedTrack as the mediaStreamTrack if it exists', () => {
+      track._unprocessedTrack = 'foo';
+      assert.equal(track.mediaStreamTrack, 'foo');
+    });
+
+    it('should return the mediaTrackTransceiver.track as the mediaStreamTrack if unprocessedTrack does not exists', () => {
+      assert.equal(track.mediaStreamTrack, track.tranceiver.track);
+    });
   });
 
   describe('_initialize', () => {
@@ -383,6 +392,20 @@ describe('MediaTrack', () => {
     });
   });
 
+  describe('_updateElementsMediaStreamTrack', () => {
+    it('should reattach each existing elements', () => {
+      track = createMediaTrack('1', 'video');
+      track._attach = sinon.spy();
+      track._attachments.add('foo');
+      track._attachments.add('bar');
+      track._updateElementsMediaStreamTrack();
+
+      sinon.assert.calledTwice(track._attach);
+      assert.equal(track._attach.firstCall.args[0], 'foo');
+      assert.equal(track._attach.secondCall.args[0], 'bar');
+    });
+  });
+
   describe('_getAllAttachedElements', () => {
     it('should return an array with all elements in ._attachments', () => {
       track = createMediaTrack('1', 'audio');
@@ -429,6 +452,18 @@ describe('MediaTrack', () => {
       it('should remove the element from ._attachments', () => {
         assert(!track._attachments.has(el1));
       });
+
+      it('should remove the MediaTrack\'s MediaStreamTrack from the element\'s .srcObject MediaStream if there is a processedTrack', () => {
+        track = createMediaTrack('1', 'video');
+        track.processedTrack = { foo: 'ff' };
+        el1 = document.createElement('video');
+        el1.srcObject = new MediaStream();
+        el1.srcObject.removeTrack = sinon.stub();
+        el1.srcObject.addTrack(track.processedTrack);
+        track._attachments.add(el1);
+        track._detachElement(el1);
+        sinon.assert.calledWithExactly(el1.srcObject.removeTrack, track.processedTrack);
+      });
     });
 
     context('when the element is not attached', () => {
@@ -449,8 +484,14 @@ describe('MediaTrack', () => {
     let track;
     let mediaStream;
     let MediaStream;
+    let processedTrack;
 
     beforeEach(() => {
+      processedTrack = {
+        getAudioTracks: sinon.stub(),
+        getVideoTracks: sinon.stub(),
+        kind: 'audio'
+      };
       MediaStream = sinon.spy(function MediaStream() {
         // eslint-disable-next-line consistent-this
         mediaStream = this;
@@ -460,6 +501,7 @@ describe('MediaTrack', () => {
       MediaStream.prototype.removeTrack = sinon.spy();
       el = document.createElement('audio');
       track = createMediaTrack(1, 'audio', { MediaStream: MediaStream });
+      track.processedTrack = null;
     });
 
     context('when the .srcObject of the HTMLMediaElement is not a MediaStream', () => {
@@ -480,6 +522,31 @@ describe('MediaTrack', () => {
         assert(MediaStream.prototype.addTrack.calledWith(track.mediaStreamTrack));
       });
 
+      context('when processedTrack is not null', () => {
+        it('should call .addTrack() with the MediaTrack\'s processedTrack on the MediaStream', () => {
+          track.processedTrack = processedTrack;
+          track._attach(el);
+          assert(MediaStream.prototype.addTrack.calledWith(processedTrack));
+        });
+      });
+
+      context('when mediaStreamTrack parameter is provided', () => {
+        const newMediaStreamTrack = {
+          getAudioTracks: sinon.stub(),
+          getVideoTracks: sinon.stub(),
+          kind: 'audio'
+        };
+        it('should use the provided mediaStreamTrack if processedTrack is null', () => {
+          track._attach(el, newMediaStreamTrack);
+          assert(MediaStream.prototype.addTrack.calledWith(newMediaStreamTrack));
+        });
+        it('should use the provided mediaStreamTrack if processedTrack is not null', () => {
+          track.processedTrack = processedTrack;
+          track._attach(el, newMediaStreamTrack);
+          assert(MediaStream.prototype.addTrack.calledWith(newMediaStreamTrack));
+        });
+      });
+
       it('should set the .srcObject of the HTMLMediaElement to the MediaStream', () => {
         assert.equal(el.srcObject, mediaStream);
       });
@@ -523,6 +590,14 @@ describe('MediaTrack', () => {
         assert(MediaStream.prototype.addTrack.calledWith(track.mediaStreamTrack));
       });
 
+      context('when processedTrack is not null', () => {
+        it('should call .addTrack() with the MediaTrack\'s processedTrack on the MediaStream', () => {
+          track.processedTrack = processedTrack;
+          track._attach(el);
+          assert(MediaStream.prototype.addTrack.calledWith(processedTrack));
+        });
+      });
+
       it('should set the .srcObject of the HTMLMediaElement to the MediaStream', () => {
         assert.equal(el.srcObject, mediaStream);
       });
@@ -549,7 +624,9 @@ describe('MediaTrack', () => {
 function createMediaTrack(id, kind, options) {
   const mediaStreamTrack = new MediaStreamTrack(id, kind);
   const mediaTrackTransceiver = new MediaTrackTransceiver(id, mediaStreamTrack);
-  return new MediaTrack(mediaTrackTransceiver, Object.assign({ log: log }, options));
+  const mediaTrack = new MediaTrack(mediaTrackTransceiver, Object.assign({ log: log }, options));
+  mediaTrack.tranceiver = mediaTrackTransceiver;
+  return mediaTrack;
 }
 
 function MediaStreamTrack(id, kind) {
diff --git a/test/unit/spec/media/track/remotemediatrack.js b/test/unit/spec/media/track/remotemediatrack.js
index 7b5097a04..ef3cfed28 100644
--- a/test/unit/spec/media/track/remotemediatrack.js
+++ b/test/unit/spec/media/track/remotemediatrack.js
@@ -216,6 +216,7 @@ const { FakeMediaStreamTrack } = require('../../../../lib/fakemediastream');
             'name',
             'isStarted',
             'mediaStreamTrack',
+            'processedTrack',
             'isEnabled',
             'isSwitchedOff',
             'priority',
@@ -227,7 +228,9 @@ const { FakeMediaStreamTrack } = require('../../../../lib/fakemediastream');
             'name',
             'isStarted',
             'mediaStreamTrack',
+            'processedTrack',
             'dimensions',
+            'processor',
             'isEnabled',
             'isSwitchedOff',
             'priority',
@@ -238,20 +241,49 @@ const { FakeMediaStreamTrack } = require('../../../../lib/fakemediastream');
     });
 
     describe('#attach', () => {
-      it('enables the track if disabled', () => {
-        let track = makeTrack({ id: 'foo', sid: 'MT1', kind, isEnabled: true, options: null, RemoteTrack });
+      let track;
+
+      beforeEach(() => {
+        track = makeTrack({ id: 'foo', sid: 'MT1', kind, isEnabled: true, options: null, RemoteTrack });
+        track.mediaStreamTrack.enabled = false;
+        track._captureFrames = sinon.stub();
         track._createElement = sinon.spy(() => {
           // return a unique element.
           return {
             internalId: Date()
           };
         });
+      });
 
-        track.mediaStreamTrack.enabled = false;
+      it('enables the track if disabled', () => {
         let el1 = track.attach();
         assert(el1);
         assert.equal(track.mediaStreamTrack.enabled, true);
       });
+
+      it('starts processing frames if processor exists', () => {
+        track.processor = 'foo';
+        track.attach();
+        sinon.assert.called(track._captureFrames);
+      });
+
+      it('do not start processing frames if processor does not exists', () => {
+        track.processor = null;
+        track.attach();
+        sinon.assert.notCalled(track._captureFrames);
+      });
+
+      it('set processedTrack to enabled if it exists', () => {
+        track.processedTrack = {};
+        track.attach();
+        assert(track.processedTrack.enabled);
+      });
+
+      it('do not set processedTrack to enabled if it does not exists', () => {
+        track.processedTrack = null;
+        track.attach();
+        assert(!track.processedTrack);
+      });
     });
 
     describe('#detach', () => {
@@ -292,6 +324,17 @@ const { FakeMediaStreamTrack } = require('../../../../lib/fakemediastream');
         track.detach(el2);
         assert.equal(track.mediaStreamTrack.enabled, false);
       });
+
+      it('set processedTrack to disabled if it exists', () => {
+        track.processedTrack = {};
+        track.detach();
+        assert.equal(track.processedTrack.enabled, false);
+      });
+
+      it('do not set processedTrack to disabled if it does not exists', () => {
+        track.detach();
+        assert(!track.processedTrack);
+      });
     });
 
 
@@ -312,6 +355,7 @@ const { FakeMediaStreamTrack } = require('../../../../lib/fakemediastream');
             mediaStreamTrack: track.mediaStreamTrack,
             name: track.name,
             priority: null,
+            processedTrack: null,
             sid: track.sid
           });
         } else {
@@ -324,6 +368,8 @@ const { FakeMediaStreamTrack } = require('../../../../lib/fakemediastream');
             mediaStreamTrack: track.mediaStreamTrack,
             name: track.name,
             priority: null,
+            processedTrack: null,
+            processor: null,
             sid: track.sid
           });
         }
diff --git a/test/unit/spec/media/track/sender.js b/test/unit/spec/media/track/sender.js
index e7998899c..4523e821a 100644
--- a/test/unit/spec/media/track/sender.js
+++ b/test/unit/spec/media/track/sender.js
@@ -63,6 +63,19 @@ describe('MediaTrackSender', () => {
     });
   });
 
+  describe('isPublishing', () => {
+    it('should return true if there are clones', () => {
+      sender = new MediaTrackSender(mediaStreamTrack);
+      sender.clone();
+      assert(sender.isPublishing);
+    });
+
+    it('should return false if there are no clones', () => {
+      sender = new MediaTrackSender(mediaStreamTrack);
+      assert(!sender.isPublishing);
+    });
+  });
+
   describe('clone', () => {
     it('returns a new MediaTrackSender containing a clone of the underlying MediaStreamTrack', () => {
       sender = new MediaTrackSender(mediaStreamTrack);
diff --git a/test/unit/spec/media/track/videotrack.js b/test/unit/spec/media/track/videotrack.js
new file mode 100644
index 000000000..7291fd427
--- /dev/null
+++ b/test/unit/spec/media/track/videotrack.js
@@ -0,0 +1,682 @@
+'use strict';
+
+const assert = require('assert');
+const sinon = require('sinon');
+const { EventEmitter } = require('events');
+const { inherits } = require('util');
+const log = require('../../../../lib/fakelog');
+const Document = require('../../../../lib/document');
+const VideoTrack = require('../../../../../lib/media/track/videotrack');
+const MediaTrackTransceiver = require('../../../../../lib/media/track/transceiver');
+
+let mediaStreamTrackSettings = {
+  width: 1280,
+  height: 720,
+  frameRate: 24,
+  enabled: true
+};
+
+describe('VideoTrack', () => {
+  let captureStream;
+  let clock;
+  let videoTrack;
+  let mediaStreamTrack;
+  let processedTrack;
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers();
+
+    mediaStreamTrackSettings = {
+      width: 1280,
+      height: 720,
+      frameRate: 24,
+      enabled: true
+    };
+
+    processedTrack = { requestFrame: sinon.stub() };
+    captureStream = sinon.stub().returns({ getTracks: () => [processedTrack] });
+    const document = new Document();
+    document.createElement = () => ({ captureStream });
+    global.document = document;
+
+    mediaStreamTrack = new MediaStreamTrack('1', 'video');
+    const mediaTrackTransceiver = new MediaTrackTransceiver('1', mediaStreamTrack);
+    videoTrack = new VideoTrack(mediaTrackTransceiver, { log: log });
+
+    videoTrack._attach = sinon.stub();
+    videoTrack._selectElement = sinon.stub();
+    videoTrack._updateElementsMediaStreamTrack = sinon.stub();
+  });
+
+  afterEach(() => {
+    delete global.document;
+    clock.restore();
+  });
+
+  describe('#attach', () => {
+    beforeEach(() => {
+      videoTrack._captureFrames = sinon.stub();
+    });
+
+    it('should start capturing frames if a VideoProcessor is attached', () => {
+      videoTrack.processor = 'foo';
+      videoTrack.attach('foo');
+      sinon.assert.calledOnce(videoTrack._captureFrames);
+    });
+
+    it('should not start capturing frames if a VideoProcessor is not attached', () => {
+      videoTrack.attach('foo');
+      sinon.assert.notCalled(videoTrack._captureFrames);
+    });
+  });
+
+  describe('#addProcessor', () => {
+    let processor;
+
+    beforeEach(() => {
+      processor = { processFrame: sinon.spy() };
+      videoTrack._dummyEl = 'foo';
+      log.warn = sinon.spy();
+    });
+
+    describe('when OffscreenCanvas is not supported', () => {
+      it('should not add a VideoProcessor', () => {
+        videoTrack.addProcessor(processor);
+        assert(!videoTrack.processor);
+      });
+
+      it('should log a warning', () => {
+        videoTrack.addProcessor(processor);
+        sinon.assert.calledWith(log.warn, 'Adding a VideoProcessor is not supported in this browser.');
+      });
+    });
+
+    describe('when OffscreenCanvas is supported', () => {
+      before(() => {
+        global.OffscreenCanvas = OffscreenCanvas;
+      });
+
+      after(() => {
+        delete global.OffscreenCanvas;
+      });
+
+      describe('unmute handler', () => {
+        beforeEach(() => {
+          videoTrack._captureFrames = sinon.stub();
+        });
+
+        it('should add unmuteHandler if it does not exists', () => {
+          videoTrack.processor = null;
+          videoTrack.addProcessor(processor);
+          assert(!!videoTrack._unmuteHandler);
+        });
+
+        it('should not add unmuteHandler if it exists', () => {
+          videoTrack._unmuteHandler = 'foo';
+          videoTrack.processor = null;
+          videoTrack.addProcessor(processor);
+          assert.equal(videoTrack._unmuteHandler, 'foo');
+        });
+
+        it('should call restartProcessor if processedTrack is still muted after mediaStreamTrack is unmuted', () => {
+          videoTrack.addProcessor(processor);
+          videoTrack.processedTrack = { muted: true };
+          videoTrack._restartProcessor = sinon.stub();
+          videoTrack.mediaStreamTrack.emit('unmute');
+          sinon.assert.calledOnce(videoTrack._restartProcessor);
+        });
+
+        it('should not call restartProcessor if processedTrack is not muted after mediaStreamTrack is unmuted', () => {
+          videoTrack.addProcessor(processor);
+          videoTrack._restartProcessor = sinon.stub();
+          videoTrack.mediaStreamTrack.emit('unmute');
+          sinon.assert.notCalled(videoTrack._restartProcessor);
+        });
+      });
+
+      describe('when a valid VideoProcessor is provided', () => {
+        beforeEach(() => {
+          videoTrack._captureFrames = sinon.stub();
+          videoTrack.addProcessor(processor);
+        });
+
+        it('should add a VideoProcessor', () => {
+          assert.equal(videoTrack.processor, processor);
+        });
+
+        it('should not log a warning', () => {
+          sinon.assert.notCalled(log.warn);
+        });
+
+        it('should initialize canvases', () => {
+          assert(!!videoTrack._inputFrame);
+          assert(!!videoTrack._outputFrame);
+          assert.equal(videoTrack._inputFrame.width, mediaStreamTrackSettings.width);
+          assert.equal(videoTrack._inputFrame.height, mediaStreamTrackSettings.height);
+          assert.equal(videoTrack._outputFrame.width, mediaStreamTrackSettings.width);
+          assert.equal(videoTrack._outputFrame.height, mediaStreamTrackSettings.height);
+        });
+
+        it('should set processedTrack with the correct settings', () => {
+          sinon.assert.calledWith(captureStream, 0);
+          assert.equal(videoTrack.processedTrack.enabled, mediaStreamTrackSettings.enabled);
+        });
+
+        it('should set processedTrack with correct dimensions', () => {
+          videoTrack.processor = null;
+          const settings = {
+            width: 400,
+            height: 200,
+          };
+          videoTrack.mediaStreamTrack.getSettings = () => settings;
+          videoTrack.addProcessor(processor);
+          assert.equal(videoTrack._inputFrame.width, settings.width);
+          assert.equal(videoTrack._inputFrame.height, settings.height);
+          assert.equal(videoTrack._outputFrame.width, settings.width);
+          assert.equal(videoTrack._outputFrame.height, settings.height);
+        });
+
+        it('should set processedTrack with default dimensions', () => {
+          videoTrack.processor = null;
+          const settings = {};
+          videoTrack.mediaStreamTrack.getSettings = () => settings;
+          videoTrack.addProcessor(processor);
+          assert.equal(videoTrack._inputFrame.width, 0);
+          assert.equal(videoTrack._inputFrame.height, 0);
+          assert.equal(videoTrack._outputFrame.width, 0);
+          assert.equal(videoTrack._outputFrame.height, 0);
+        });
+
+        it('should update the mediaStreamTrack of attached elements', () => {
+          sinon.assert.calledOnce(videoTrack._updateElementsMediaStreamTrack);
+        });
+
+        it('should start capturing frames after setting the processor', () => {
+          sinon.assert.calledOnce(videoTrack._captureFrames);
+        });
+      });
+
+      context('raise an error', () => {
+        [{
+          name: 'processor is null',
+          errorMsg: 'Received an invalid VideoProcessor from addProcessor.',
+          param: null,
+        }, {
+          name: 'processor is undefined',
+          errorMsg: 'Received an invalid VideoProcessor from addProcessor.',
+          param: undefined,
+        }, {
+          name: 'processFrame is null',
+          errorMsg: 'Received an invalid VideoProcessor from addProcessor.',
+          param: { processFrame: null },
+        }, {
+          name: 'processFrame is undefined',
+          errorMsg: 'Received an invalid VideoProcessor from addProcessor.',
+          param: { processFrame: undefined },
+        }, {
+          name: 'processor is already set',
+          errorMsg: 'A VideoProcessor has already been added.',
+          param: { processFrame: sinon.spy() },
+          setup: () => { videoTrack.processor = { processFrame: sinon.spy() }; }
+        }, {
+          name: 'dummyEl is not set',
+          errorMsg: 'VideoTrack has not been initialized.',
+          param: { processFrame: sinon.spy() },
+          setup: () => { videoTrack._dummyEl = null; }
+        }].forEach(({ name, errorMsg, param, setup }) => {
+          it(`when ${name}`, () => {
+            if (setup) {
+              setup();
+            }
+            const regex = new RegExp(errorMsg);
+            assert.throws(() => { videoTrack.addProcessor(param); }, regex);
+          });
+        });
+      });
+    });
+  });
+
+  describe('#removeProcessor', () => {
+    let processor;
+
+    beforeEach(() => {
+      processor = { foo: 'foo' };
+      videoTrack.processor = processor;
+      videoTrack.processedTrack = 'foo';
+      videoTrack._isCapturing = true;
+      videoTrack._inputFrame = new OffscreenCanvas(1, 2);
+      videoTrack._outputFrame = new OffscreenCanvas(3, 4);
+      videoTrack._updateElementsMediaStreamTrack = sinon.stub();
+      videoTrack.mediaStreamTrack.removeEventListener = sinon.stub();
+    });
+
+    it('should clear existing timeout callback', () => {
+      let cb = sinon.stub();
+      videoTrack._captureTimeoutId = setTimeout(cb, 50);
+      clock.tick(50);
+      sinon.assert.calledOnce(cb);
+
+      cb = sinon.stub();
+      videoTrack._captureTimeoutId = setTimeout(cb, 50);
+      videoTrack.removeProcessor(processor);
+      clock.tick(50);
+      sinon.assert.notCalled(cb);
+    });
+
+    it('should update attached video elements mediaStreamTrack', () => {
+      videoTrack.removeProcessor(processor);
+      sinon.assert.calledOnce(videoTrack._updateElementsMediaStreamTrack);
+    });
+
+    it('should clear inputFrame canvas', () => {
+      const inputFrame = videoTrack._inputFrame;
+      assert(inputFrame.drawing);
+      videoTrack.removeProcessor(processor);
+      assert(!inputFrame.drawing);
+    });
+
+    it('should clear outputFrame canvas', () => {
+      const outputFrame = videoTrack._outputFrame;
+      assert(outputFrame.drawing);
+      videoTrack.removeProcessor(processor);
+      assert(!outputFrame.drawing);
+    });
+
+    describe('should reset field', () => {
+      const unmuteHandler = () => {};
+      beforeEach(() => {
+        videoTrack._unmuteHandler = unmuteHandler;
+        videoTrack.removeProcessor(processor);
+      });
+
+      it('isCapturing flag', () => {
+        assert(!videoTrack._isCapturing);
+      });
+
+      it('existing VideoProcessor', () => {
+        assert(!videoTrack.processor);
+      });
+
+      it('processedTrack', () => {
+        assert(!videoTrack.processedTrack);
+      });
+
+      it('_inputFrame', () => {
+        assert(!videoTrack._inputFrame);
+      });
+
+      it('_outputFrame', () => {
+        assert(!videoTrack._outputFrame);
+      });
+
+      it('_unmuteHandler', () => {
+        sinon.assert.calledWith(videoTrack.mediaStreamTrack.removeEventListener, 'unmute', unmuteHandler);
+      });
+    });
+
+    context('raise an error', () => {
+      [{
+        name: 'processor param is null',
+        errorMsg: 'Received an invalid VideoProcessor from removeProcessor.',
+        getParam: () => null
+      }, {
+        name: 'processor param is undefined',
+        errorMsg: 'Received an invalid VideoProcessor from removeProcessor.',
+        getParam: () => undefined
+      }, {
+        name: 'there is no existing processor',
+        errorMsg: 'No existing VideoProcessor detected.',
+        getParam: () => processor,
+        setup: () => {
+          videoTrack.processor = null;
+        }
+      }, {
+        name: 'processor param is not the same as the existing one',
+        errorMsg: 'The provided VideoProcessor is different than the existing one.',
+        getParam: () => ({ bar: 'bar' })
+      }].forEach(({ name, errorMsg, getParam, setup }) => {
+        it(`when ${name}`, () => {
+          if (setup) {
+            setup();
+          }
+          const regex = new RegExp(errorMsg);
+          assert.throws(() => { videoTrack.removeProcessor(getParam()); }, regex);
+        });
+      });
+    });
+  });
+
+  describe('#_restartProcessor', () => {
+    beforeEach(() => {
+      videoTrack.addProcessor = sinon.stub();
+      videoTrack.removeProcessor = sinon.stub();
+    });
+
+    it('should not restart if processor is not present', () => {
+      videoTrack.processor = null;
+      videoTrack._restartProcessor();
+      sinon.assert.notCalled(videoTrack.addProcessor);
+      sinon.assert.notCalled(videoTrack.removeProcessor);
+    });
+
+    it('should restart if processor is present', () => {
+      videoTrack.processor = 'foo';
+      videoTrack._restartProcessor();
+      sinon.assert.calledOnce(videoTrack.addProcessor);
+      sinon.assert.calledOnce(videoTrack.removeProcessor);
+      sinon.assert.callOrder(videoTrack.removeProcessor, videoTrack.addProcessor);
+    });
+  });
+
+  describe('#_captureFrames', () => {
+    // As of node12, the Promise.then and Promise.finally requires separate
+    // promises to resolve internally.
+    const internalPromise = () => Promise.resolve().then(Promise.resolve());
+    let timeoutMs;
+    let processFrame;
+    let internalOutputFrame;
+
+    beforeEach(() => {
+      timeoutMs = Math.floor(1000 / mediaStreamTrackSettings.frameRate);
+      processFrame = sinon.spy();
+      videoTrack._attachments.add('foo');
+      videoTrack.processor = { processFrame };
+
+      videoTrack._dummyEl.play = () => ({ then: cb => {
+        cb();
+        return { catch: sinon.stub() };
+      } });
+
+      videoTrack._inputFrame = new OffscreenCanvas(mediaStreamTrackSettings.width, mediaStreamTrackSettings.height);
+      videoTrack._outputFrame = new OffscreenCanvas(mediaStreamTrackSettings.width, mediaStreamTrackSettings.height);
+      internalOutputFrame = videoTrack._outputFrame;
+    });
+
+    describe('processFrame', () => {
+      beforeEach(() => {
+        videoTrack.processedTrack = processedTrack;
+      });
+
+      it('should pass the inputFrames to the processFrame method', () => {
+        videoTrack._captureFrames();
+        clock.tick(timeoutMs);
+        sinon.assert.calledWith(processFrame, videoTrack._inputFrame);
+      });
+
+      it('should update processedTrack\'s current frame', async () => {
+        videoTrack.processor.processFrame = () => 'myframe';
+        videoTrack._captureFrames();
+        clock.tick(timeoutMs);
+        await internalPromise();
+        sinon.assert.calledOnce(processedTrack.requestFrame);
+      });
+
+      [{
+        name: 'should draw the processed frame to the outputFrame if the return value is valid and not a promise',
+        getReturnValue: () => 'myframe',
+        expectedDrawing: { image: 'myframe', x: 0, y: 0, width: 1280, height: 720 }
+      }, {
+        name: 'should draw the processed frame to the outputFrame if the return value is valid in a promise',
+        getReturnValue: () =>  Promise.resolve('myframe'),
+        expectedDrawing: { image: 'myframe', x: 0, y: 0, width: 1280, height: 720 }
+      }, {
+        name: 'should drop the frame if processFrame throws an exception',
+        getReturnValue: () => { throw new Error('foo'); },
+        expectedDrawing: {}
+      }, {
+        name: 'should drop the frame if the internal output frame is null',
+        getReturnValue: () =>  Promise.resolve('myframe'),
+        expectedDrawing: {},
+        setup: () => {
+          videoTrack._outputFrame = null;
+        }
+      }, {
+        name: 'should drop the frame if processFrame returns null',
+        getReturnValue: () => null,
+        expectedDrawing: {}
+      }, {
+        name: 'should drop the frame if processFrame returns a promise which resolves to null',
+        getReturnValue: () => Promise.resolve(null),
+        expectedDrawing: {}
+      }, {
+        name: 'should update inputFrame dimension at runtime',
+        getReturnValue: () => 'myframe',
+        expectedDrawing: { image: 'myframe', x: 0, y: 0, width: 400, height: 200 },
+        setup: () => {
+          mediaStreamTrackSettings.width = 400;
+          mediaStreamTrackSettings.height = 200;
+        }
+      }].forEach(({ name, getReturnValue, expectedDrawing, setup }) => {
+        it(name, async () => {
+          if (setup) {
+            setup();
+          }
+          videoTrack.processor.processFrame = () => getReturnValue();
+          videoTrack._captureFrames();
+          clock.tick(timeoutMs);
+          await internalPromise();
+          assert.deepEqual(internalOutputFrame.drawing, expectedDrawing);
+          if (expectedDrawing.image) {
+            assert.equal(videoTrack._inputFrame.width, mediaStreamTrackSettings.width);
+            assert.equal(videoTrack._inputFrame.height, mediaStreamTrackSettings.height);
+            assert.equal(videoTrack._outputFrame.width, mediaStreamTrackSettings.width);
+            assert.equal(videoTrack._outputFrame.height, mediaStreamTrackSettings.height);
+          }
+        });
+      });
+    });
+
+    describe('capture frame loop', () => {
+      it('should call processFrame with the correct frame rate at run time', async () => {
+        const settings = {
+          width: 640,
+          height: 480,
+          frameRate: 20,
+        };
+        const timeoutMs = Math.floor(1000 / settings.frameRate);
+        videoTrack._inputFrame = new OffscreenCanvas(settings.width, settings.height);
+        videoTrack._outputFrame = new OffscreenCanvas(settings.width, settings.height);
+        videoTrack.mediaStreamTrack.getSettings = () => settings;
+
+        const cb = sinon.stub();
+        const artificialDelay = 12;
+        videoTrack.processor.processFrame = () => {
+          return new Promise(resolve => {
+            setTimeout(() => {
+              cb();
+              return resolve();
+            }, artificialDelay);
+          });
+        };
+
+        videoTrack._captureFrames();
+        await internalPromise();
+
+        clock.tick(artificialDelay - 1);
+        await internalPromise();
+        sinon.assert.notCalled(cb);
+
+        clock.tick(1);
+        await internalPromise();
+        sinon.assert.calledOnce(cb);
+
+        clock.tick(timeoutMs - artificialDelay);
+        await internalPromise();
+        sinon.assert.calledOnce(cb);
+
+        settings.frameRate -= 10;
+        const newTimeoutMs = Math.floor(1000 / settings.frameRate);
+        clock.tick(timeoutMs - artificialDelay);
+        await internalPromise();
+        sinon.assert.calledTwice(cb);
+
+        // The callback should not trigger since we decrease the frameRate
+        // so it still called twice
+        clock.tick(timeoutMs - artificialDelay);
+        await internalPromise();
+        sinon.assert.calledTwice(cb);
+
+        // The callback should now trigger with the new frameRate
+        clock.tick(newTimeoutMs - (timeoutMs - newTimeoutMs));
+        await internalPromise();
+        sinon.assert.calledThrice(cb);
+      });
+
+      [{
+        state: 'mediaStreamTrack is disabled',
+        setState: () => {
+          mediaStreamTrack.enabled = false;
+        }
+      }, {
+        state: 'mediaStreamTrack is ended',
+        setState: () => {
+          mediaStreamTrack.readyState = 'ended';
+        }
+      }, {
+        state: 'there is no VideoProcessor added',
+        setState: () => {
+          videoTrack.processor = null;
+        }
+      }, {
+        state: 'there are no video elements attached and isPublishing has default value',
+        setState: () => {
+          videoTrack._attachments.clear();
+        }
+      }, {
+        state: 'there are no video elements attached and isPublishing false',
+        setState: () => {
+          videoTrack._origCanCaptureFrames = videoTrack._canCaptureFrames;
+          videoTrack._canCaptureFrames = () => {
+            return videoTrack._origCanCaptureFrames(false);
+          };
+          videoTrack._attachments.clear();
+        }
+      }].forEach(({ state, setState }) => {
+        it(`should stop capturing frames if ${state}`, async () => {
+          videoTrack._captureFrames();
+
+          clock.tick(timeoutMs);
+          sinon.assert.calledOnce(processFrame);
+
+          setState();
+          await internalPromise();
+          clock.tick(timeoutMs);
+          sinon.assert.calledOnce(processFrame);
+        });
+
+        it(`should not start capturing frames if ${state}`, async () => {
+          setState();
+          videoTrack._captureFrames();
+          clock.tick(timeoutMs);
+          sinon.assert.notCalled(processFrame);
+
+          await internalPromise();
+          clock.tick(timeoutMs);
+          sinon.assert.notCalled(processFrame);
+        });
+      });
+
+      describe('when isPublishing is true', () => {
+        let setup;
+
+        beforeEach(() => {
+          setup = () => {
+            videoTrack._origCanCaptureFrames = videoTrack._canCaptureFrames;
+            videoTrack._canCaptureFrames = () => {
+              return videoTrack._origCanCaptureFrames(true);
+            };
+            videoTrack._attachments.clear();
+          };
+        });
+
+        it('should not stop capturing frames if isPublishing is true and there are no attached elements', async () => {
+          videoTrack._captureFrames();
+
+          clock.tick(timeoutMs);
+          sinon.assert.calledOnce(processFrame);
+
+          setup();
+          await internalPromise();
+          clock.tick(timeoutMs);
+          sinon.assert.calledTwice(processFrame);
+        });
+
+        it('should start capturing frames if isPublishing is true and there are no attached elements', async () => {
+          setup();
+          videoTrack._captureFrames();
+          clock.tick(timeoutMs);
+          sinon.assert.calledOnce(processFrame);
+
+          await internalPromise();
+          clock.tick(timeoutMs);
+          sinon.assert.calledTwice(processFrame);
+        });
+      });
+    });
+
+    describe('no operation', () => {
+      beforeEach(() => {
+        videoTrack._dummyEl.play = sinon.stub().returns(Promise.resolve());
+      });
+
+      it('when called more than once', () => {
+        videoTrack._captureFrames();
+        videoTrack._captureFrames();
+        videoTrack._captureFrames();
+        videoTrack._captureFrames();
+        sinon.assert.calledOnce(videoTrack._dummyEl.play);
+      });
+
+      it('when a VideoProcessor is not added', () => {
+        videoTrack.processor = null;
+        videoTrack._captureFrames();
+        sinon.assert.notCalled(videoTrack._dummyEl.play);
+      });
+
+      it('when no video elements are attached', () => {
+        videoTrack._attachments.clear();
+        videoTrack._captureFrames();
+        sinon.assert.notCalled(videoTrack._dummyEl.play);
+      });
+
+      it('when mediaStreamTrack is disabled', () => {
+        mediaStreamTrack.enabled = false;
+        videoTrack._captureFrames();
+        sinon.assert.notCalled(videoTrack._dummyEl.play);
+      });
+
+      it('when mediaStreamTrack is ended', () => {
+        mediaStreamTrack.readyState = 'ended';
+        videoTrack._captureFrames();
+        sinon.assert.notCalled(videoTrack._dummyEl.play);
+      });
+    });
+  });
+});
+
+function OffscreenCanvas(width, height) {
+  this.width = width;
+  this.height = height;
+  this.drawing = {};
+  this.getContext = () => ({
+    drawImage: (image, x, y, width, height) => {
+      this.drawing = { image, x, y, width, height };
+    },
+    clearRect: () => { this.drawing = null; }
+  });
+}
+
+function MediaStreamTrack(id, kind) {
+  EventEmitter.call(this);
+  Object.defineProperties(this, {
+    id: { value: id },
+    kind: { value: kind },
+    enabled: { value: mediaStreamTrackSettings.enabled, writable: true },
+    readyState: { value: 'live', writable: true },
+    muted: { value: false, writable: true },
+    getSettings: { value: () => mediaStreamTrackSettings, writable: true }
+  });
+}
+inherits(MediaStreamTrack, EventEmitter);
+MediaStreamTrack.prototype.addEventListener = MediaStreamTrack.prototype.addListener;
+MediaStreamTrack.prototype.removeEventListener = MediaStreamTrack.prototype.removeListener;
diff --git a/tsdef/VideoProcessor.d.ts b/tsdef/VideoProcessor.d.ts
new file mode 100644
index 000000000..0b94cedfc
--- /dev/null
+++ b/tsdef/VideoProcessor.d.ts
@@ -0,0 +1,5 @@
+export class VideoProcessor {
+  processFrame(inputFrame: OffscreenCanvas)
+    : Promise<OffscreenCanvas | null>
+    | OffscreenCanvas | null;
+}
diff --git a/tsdef/VideoTrack.d.ts b/tsdef/VideoTrack.d.ts
index 36597b100..7e169f4f6 100644
--- a/tsdef/VideoTrack.d.ts
+++ b/tsdef/VideoTrack.d.ts
@@ -1,4 +1,5 @@
 import { Track } from './Track';
+import { VideoProcessor } from './VideoProcessor';
 
 export namespace VideoTrack {
   interface Dimensions {
@@ -12,8 +13,12 @@ export class VideoTrack extends Track {
   isEnabled: boolean;
   dimensions: VideoTrack.Dimensions;
   kind: 'video';
+  processor: VideoProcessor | null;
   mediaStreamTrack: MediaStreamTrack;
+  processedTrack: MediaStreamTrack | null;
 
+  addProcessor(processor: VideoProcessor): this;
+  removeProcessor(processor: VideoProcessor): this;
   attach(element?: HTMLMediaElement | string): HTMLVideoElement;
   detach(element?: HTMLMediaElement | string): HTMLVideoElement[];
 
diff --git a/tsdef/index.d.ts b/tsdef/index.d.ts
index d0ff5796d..0641c1f2f 100644
--- a/tsdef/index.d.ts
+++ b/tsdef/index.d.ts
@@ -22,6 +22,7 @@ export { LocalTrackPublication } from './LocalTrackPublication';
 export { LocalVideoTrack } from './LocalVideoTrack';
 export { LocalVideoTrackPublication } from './LocalVideoTrackPublication';
 export { Log } from './loglevel';
+export { VideoProcessor } from './VideoProcessor';
 export { Participant } from './Participant';
 export { RemoteAudioTrack } from './RemoteAudioTrack';
 export { RemoteAudioTrackPublication } from './RemoteAudioTrackPublication';