twilio-video 2.26.2 → 2.28.0

package/CHANGELOG.md

@@ -2,6 +2,52 @@ The Twilio Programmable Video SDKs use [Semantic Versioning](http://www.semver.o
 
 **Version 1.x reached End of Life on September 8th, 2021.** See the changelog entry [here](https://www.twilio.com/changelog/end-of-life-complete-for-unsupported-versions-of-the-programmable-video-sdk). Support for the 1.x version ended on December 4th, 2020.
 
+2.28.0 (September 14, 2023)
+===========================
+
+Bug Fixes
+---------
+
+- Fixed a bug where a Chrome iOS 17 Participant's audio with Krisp Noise Cancellation did not recover after interacting with a system popup. (VIDEO-13012)
+- Fixed a bug where a Chrome iOS 17 Participant's audio with Krisp Noise Cancellation did not recover after invoking Siri. (VIDEO-13013)
+
+2.27.0 (March 21, 2023)
+=======================
+
+Changes
+-------
+
+`VideoTrack.addProcessor` now works on browsers that support `OffscreenCanvas` as well as `HTMLCanvasElement`. When used with
+[@twilio/video-processors v2.0.0](https://github.com/twilio/twilio-video-processors.js/blob/2.0.0/CHANGELOG.md), the Virtual
+Background feature will work on browsers that supports [WebGL2](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext).
+See [VideoTrack.addProcessor](https://sdk.twilio.com/js/video/releases/2.27.0/docs/VideoTrack.html#addProcessor__anchor) and
+[@twilio/video-processors v2.0.0](https://github.com/twilio/twilio-video-processors.js/blob/2.0.0/CHANGELOG.md) for details.
+
+### Example
+
+```ts
+import { createLocalVideoTrack } from 'twilio-video';
+import { Pipeline, VirtualBackgroundProcessor } from '@twilio/video-processors';
+
+const virtualBackgroundProcessor = new VirtualBackgroundProcessor({
+  pipeline: Pipeline.WebGL2,
+  // ...otherOptions
+});
+
+await virtualBackgroundProcessor.loadModel();
+
+const videoTrack = await createLocalVideoTrack({
+  width: 640,
+  height: 480,
+  frameRate: 24
+});
+
+videoTrack.addProcessor(processor, {
+  inputFrameBufferType: 'video',
+  outputFrameBufferContextType: 'webgl2',
+});
+```
+
 2.26.2 (February 21, 2023)
 ==========================
 

package/README.md

@@ -74,7 +74,7 @@ Releases of twilio-video.js are hosted on a CDN, and you can include these
 directly in your web app using a <script> tag.
 
 ```html
-<script src="//sdk.twilio.com/js/video/releases/2.26.2/twilio-video.min.js"></script>
+<script src="//sdk.twilio.com/js/video/releases/2.28.0/twilio-video.min.js"></script>
 ```
 
 Using this method, twilio-video.js will set a browser global:

package/dist/twilio-video.js

@@ -1,4 +1,4 @@
-/*! twilio-video.js 2.26.2
+/*! twilio-video.js 2.28.0
 
 The following license applies to all parts of this software except as
 documented below.
@@ -2627,7 +2627,9 @@ var LocalParticipant = /** @class */ (function (_super) {
  * @event LocalParticipant#trackPublicationFailed
  */
 /**
- * A {@link LocalTrack} was successfully published.
+ * A {@link LocalTrack} that was added using {@link LocalParticipant#publishTrack} was successfully published. This event
+ * is not raised for {@link LocalTrack}s added in {@link ConnectOptions}<code>.tracks</code> or auto-created within
+ * <a href="module-twilio-video.html#.connect__anchor"><code>{@link connect}</code></a>.
  * @param {LocalTrackPublication} publication - The resulting
  *   {@link LocalTrackPublication} for the published {@link LocalTrack}
  * @event LocalParticipant#trackPublished
@@ -3593,7 +3595,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 var getUserMedia = require('../../webrtc').getUserMedia;
 var isIOS = require('../../util/browserdetection').isIOS;
-var _a = require('../../util'), capitalize = _a.capitalize, defer = _a.defer, isUserMediaTrack = _a.isUserMediaTrack, waitForSometime = _a.waitForSometime, waitForEvent = _a.waitForEvent;
+var _a = require('../../util'), capitalize = _a.capitalize, defer = _a.defer, waitForSometime = _a.waitForSometime, waitForEvent = _a.waitForEvent;
 var ILLEGAL_INVOKE = require('../../util/constants').typeErrors.ILLEGAL_INVOKE;
 var detectSilentAudio = require('../../util/detectsilentaudio');
 var detectSilentVideo = require('../../util/detectsilentvideo');
@@ -3622,7 +3624,6 @@ function mixinLocalMediaTrack(AudioOrVideoTrack) {
         function LocalMediaTrack(mediaStreamTrack, options) {
             var _this = this;
             var workaroundWebKitBug1208516 = isIOS()
-                && isUserMediaTrack(mediaStreamTrack)
                 && typeof document === 'object'
                 && typeof document.addEventListener === 'function'
                 && typeof document.visibilityState === 'string';
@@ -3668,6 +3669,9 @@ function mixinLocalMediaTrack(AudioOrVideoTrack) {
                 _isCreatedByCreateLocalTracks: {
                     value: options.isCreatedByCreateLocalTracks
                 },
+                _noiseCancellation: {
+                    value: options.noiseCancellation || null
+                },
                 _trackSender: {
                     value: mediaTrackSender
                 },
@@ -3856,9 +3860,16 @@ function mixinLocalMediaTrack(AudioOrVideoTrack) {
  * @returns {function} Clean up listeners attached by the workaround
  */
 function restartWhenInadvertentlyStopped(localMediaTrack) {
-    var log = localMediaTrack._log, kind = localMediaTrack.kind;
-    var detectSilence = { audio: detectSilentAudio, video: detectSilentVideo }[kind];
-    var el = localMediaTrack._dummyEl, mediaStreamTrack = localMediaTrack.mediaStreamTrack;
+    var log = localMediaTrack._log, kind = localMediaTrack.kind, noiseCancellation = localMediaTrack._noiseCancellation;
+    var detectSilence = {
+        audio: detectSilentAudio,
+        video: detectSilentVideo
+    }[kind];
+    var getSourceMediaStreamTrack = function () { return noiseCancellation
+        ? noiseCancellation.sourceTrack
+        : localMediaTrack.mediaStreamTrack; };
+    var el = localMediaTrack._dummyEl;
+    var mediaStreamTrack = getSourceMediaStreamTrack();
     var trackChangeInProgress = null;
     function checkSilence() {
         // The dummy element is paused, so play it and then detect silence.
@@ -3873,13 +3884,16 @@ function restartWhenInadvertentlyStopped(localMediaTrack) {
         }).catch(function (error) {
             log.warn('Failed to detect silence:', error);
         }).finally(function () {
-            // Pause the dummy element again.
-            el.pause();
+            // Pause the dummy element again, if there is no processed track.
+            if (!localMediaTrack.processedTrack) {
+                el.pause();
+            }
         });
     }
     function shouldReacquireTrack() {
-        var _workaroundWebKitBug1208516Cleanup = localMediaTrack._workaroundWebKitBug1208516Cleanup, isStopped = localMediaTrack.isStopped, muted = localMediaTrack.mediaStreamTrack.muted;
+        var _workaroundWebKitBug1208516Cleanup = localMediaTrack._workaroundWebKitBug1208516Cleanup, isStopped = localMediaTrack.isStopped;
         var isInadvertentlyStopped = isStopped && !!_workaroundWebKitBug1208516Cleanup;
+        var muted = getSourceMediaStreamTrack().muted;
         // NOTE(mmalavalli): Restart the LocalMediaTrack if:
         // 1. The app is foregrounded, and
         // 2. A restart is not already in progress, and
@@ -3900,7 +3914,7 @@ function restartWhenInadvertentlyStopped(localMediaTrack) {
                 localMediaTrack._restart().finally(function () {
                     el = localMediaTrack._dummyEl;
                     removeMediaStreamTrackListeners();
-                    mediaStreamTrack = localMediaTrack.mediaStreamTrack;
+                    mediaStreamTrack = getSourceMediaStreamTrack();
                     addMediaStreamTrackListeners();
                     trackChangeInProgress.resolve();
                     trackChangeInProgress = null;
@@ -4144,7 +4158,6 @@ var isIOS = require('../../util/browserdetection').isIOS;
 var detectSilentVideo = require('../../util/detectsilentvideo');
 var mixinLocalMediaTrack = require('./localmediatrack');
 var VideoTrack = require('./videotrack');
-var isUserMediaTrack = require('../../util').isUserMediaTrack;
 var LocalMediaVideoTrack = mixinLocalMediaTrack(VideoTrack);
 /**
  * A {@link LocalVideoTrack} is a {@link VideoTrack} representing video that
@@ -4178,7 +4191,6 @@ var LocalVideoTrack = /** @class */ (function (_super) {
         var _this = this;
         options = Object.assign({
             workaroundSilentLocalVideo: isIOS()
-                && isUserMediaTrack(mediaStreamTrack)
                 && typeof document !== 'undefined'
                 && typeof document.createElement === 'function'
         }, options);
@@ -4232,8 +4244,8 @@ var LocalVideoTrack = /** @class */ (function (_super) {
     };
     /**
      * 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.
+     * @param {AddProcessorOptions} [options] - {@link AddProcessorOptions} to provide.
      * @returns {this}
      * @example
      * class GrayScaleProcessor {
@@ -4433,9 +4445,10 @@ function workaroundSilentLocalVideo(localVideoTrack, doc) {
         }).catch(function (error) {
             log.warn('Failed to detect silence and restart:', error);
         }).finally(function () {
-            // If silent frames were not detected, then pause the dummy element again.
+            // If silent frames were not detected, then pause the dummy element again,
+            // if there is no processed track.
             el = localVideoTrack._dummyEl;
-            if (el && !el.paused) {
+            if (el && !el.paused && !localVideoTrack.processedTrack) {
                 el.pause();
             }
             // Reset the unmute handler.
@@ -4491,7 +4504,7 @@ function workaroundSilentLocalVideo(localVideoTrack, doc) {
  */
 module.exports = LocalVideoTrack;
 
-},{"../../util":132,"../../util/browserdetection":123,"../../util/detectsilentvideo":127,"./localmediatrack":24,"./videotrack":43}],27:[function(require,module,exports){
+},{"../../util/browserdetection":123,"../../util/detectsilentvideo":127,"./localmediatrack":24,"./videotrack":43}],27:[function(require,module,exports){
 'use strict';
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -6351,8 +6364,8 @@ var RemoteVideoTrack = /** @class */ (function (_super) {
      * Add a {@link VideoProcessor} to allow for custom processing of video frames belonging to a VideoTrack.
      * When a Participant un-publishes and re-publishes a VideoTrack, a new RemoteVideoTrack is created and
      * any VideoProcessors attached to the previous RemoteVideoTrack would have to be re-added again.
-     * Only Chrome supports this as of now. Calling this API from a non-supported browser will result in a log warning.
      * @param {VideoProcessor} processor - The {@link VideoProcessor} to use.
+     * @param {AddProcessorOptions} [options] - {@link AddProcessorOptions} to provide.
      * @returns {this}
      * @example
      * class GrayScaleProcessor {
@@ -7019,10 +7032,10 @@ var VideoProcessorEventObserver = /** @class */ (function (_super) {
         if (!this._processorInfo) {
             return {};
         }
-        var _a = this._processorInfo, processor = _a.processor, captureHeight = _a.captureHeight, captureWidth = _a.captureWidth, inputFrameRate = _a.inputFrameRate, isRemoteVideoTrack = _a.isRemoteVideoTrack;
-        var data = { captureHeight: captureHeight, captureWidth: captureWidth, inputFrameRate: inputFrameRate, isRemoteVideoTrack: isRemoteVideoTrack };
+        var _a = this._processorInfo, processor = _a.processor, captureHeight = _a.captureHeight, captureWidth = _a.captureWidth, inputFrameRate = _a.inputFrameRate, isRemoteVideoTrack = _a.isRemoteVideoTrack, inputFrameBufferType = _a.inputFrameBufferType, outputFrameBufferContextType = _a.outputFrameBufferContextType;
+        var data = { captureHeight: captureHeight, captureWidth: captureWidth, inputFrameRate: inputFrameRate, isRemoteVideoTrack: isRemoteVideoTrack, inputFrameBufferType: inputFrameBufferType, outputFrameBufferContextType: outputFrameBufferContextType };
         data.name = processor._name || 'VideoProcessor';
-        ['assetsPath', 'blurFilterRadius', 'fitType', 'isSimdEnabled', 'maskBlurRadius', 'version'].forEach(function (prop) {
+        ['assetsPath', 'blurFilterRadius', 'debounce', 'fitType', 'isSimdEnabled', 'maskBlurRadius', 'pipeline', 'version'].forEach(function (prop) {
             var val = processor["_" + prop];
             if (typeof val !== 'undefined') {
                 data[prop] = val;
@@ -7160,6 +7173,10 @@ var VideoTrack = /** @class */ (function (_super) {
                 value: null,
                 writable: true,
             },
+            _processorOptions: {
+                value: {},
+                writable: true,
+            },
             _unmuteHandler: {
                 value: null,
                 writable: true
@@ -7251,18 +7268,21 @@ var VideoTrack = /** @class */ (function (_super) {
                 var _a = _this.mediaStreamTrack.getSettings(), _b = _a.width, width = _b === void 0 ? 0 : _b, _c = _a.height, height = _c === void 0 ? 0 : _c;
                 // Setting the canvas' dimension triggers a redraw.
                 // Only set it if it has changed.
-                if (_this._inputFrame.width !== width) {
-                    _this._inputFrame.width = width;
-                    _this._inputFrame.height = height;
-                    if (_this._outputFrame) {
-                        _this._outputFrame.width = width;
-                        _this._outputFrame.height = height;
+                if (_this._outputFrame && _this._outputFrame.width !== width) {
+                    _this._outputFrame.width = width;
+                    _this._outputFrame.height = height;
+                }
+                if (_this._inputFrame) {
+                    if (_this._inputFrame.width !== width) {
+                        _this._inputFrame.width = width;
+                        _this._inputFrame.height = height;
                     }
+                    _this._inputFrame.getContext('2d').drawImage(_this._dummyEl, 0, 0, width, height);
                 }
-                _this._inputFrame.getContext('2d').drawImage(_this._dummyEl, 0, 0, width, height);
                 var result = null;
                 try {
-                    result = _this.processor.processFrame(_this._inputFrame, _this._outputFrame);
+                    var input = _this._processorOptions.inputFrameBufferType === 'video' ? _this._dummyEl : _this._inputFrame;
+                    result = _this.processor.processFrame(input, _this._outputFrame);
                 }
                 catch (ex) {
                     _this._log.debug('Exception detected after calling processFrame.', ex);
@@ -7270,7 +7290,9 @@ var VideoTrack = /** @class */ (function (_super) {
                 ((result instanceof Promise) ? result : Promise.resolve(result))
                     .then(function () {
                     if (_this._outputFrame) {
-                        _this.processedTrack.requestFrame();
+                        if (typeof _this.processedTrack.requestFrame === 'function') {
+                            _this.processedTrack.requestFrame();
+                        }
                         _this._processorEventObserver.emit('stats');
                     }
                 })
@@ -7313,8 +7335,9 @@ var VideoTrack = /** @class */ (function (_super) {
     VideoTrack.prototype._restartProcessor = function () {
         var processor = this.processor;
         if (processor) {
+            var processorOptions = Object.assign({}, this._processorOptions);
             this.removeProcessor(processor);
-            this.addProcessor(processor);
+            this.addProcessor(processor, processorOptions);
         }
     };
     /**
@@ -7329,8 +7352,8 @@ var VideoTrack = /** @class */ (function (_super) {
     };
     /**
      * 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.
+     * @param {AddProcessorOptions} [options] - {@link AddProcessorOptions} to provide.
      * @returns {this}
      * @example
      * class GrayScaleProcessor {
@@ -7348,11 +7371,8 @@ var VideoTrack = /** @class */ (function (_super) {
      *   videoTrack.addProcessor(new GrayScaleProcessor(100));
      * });
      */
-    VideoTrack.prototype.addProcessor = function (processor) {
+    VideoTrack.prototype.addProcessor = function (processor, options) {
         var _this = this;
-        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.');
         }
@@ -7376,12 +7396,46 @@ var VideoTrack = /** @class */ (function (_super) {
             };
             this.mediaStreamTrack.addEventListener('unmute', this._unmuteHandler);
         }
-        var _a = this.mediaStreamTrack.getSettings(), _b = _a.width, width = _b === void 0 ? 0 : _b, _c = _a.height, height = _c === void 0 ? 0 : _c, _d = _a.frameRate, frameRate = _d === void 0 ? DEFAULT_FRAME_RATE : _d;
-        this._inputFrame = new OffscreenCanvas(width, height);
+        this._processorOptions = options || {};
+        var _a = this._processorOptions, inputFrameBufferType = _a.inputFrameBufferType, outputFrameBufferContextType = _a.outputFrameBufferContextType;
+        if (typeof OffscreenCanvas === 'undefined' && inputFrameBufferType === 'offscreencanvas') {
+            throw new Error('OffscreenCanvas is not supported by this browser.');
+        }
+        if (inputFrameBufferType && inputFrameBufferType !== 'video' && inputFrameBufferType !== 'canvas' && inputFrameBufferType !== 'offscreencanvas') {
+            throw new Error("Invalid inputFrameBufferType of " + inputFrameBufferType);
+        }
+        if (!inputFrameBufferType) {
+            inputFrameBufferType = typeof OffscreenCanvas === 'undefined' ? 'canvas' : 'offscreencanvas';
+        }
+        var _b = this.mediaStreamTrack.getSettings(), _c = _b.width, width = _c === void 0 ? 0 : _c, _d = _b.height, height = _d === void 0 ? 0 : _d, _e = _b.frameRate, frameRate = _e === void 0 ? DEFAULT_FRAME_RATE : _e;
+        if (inputFrameBufferType === 'offscreencanvas') {
+            this._inputFrame = new OffscreenCanvas(width, height);
+        }
+        if (inputFrameBufferType === 'canvas') {
+            this._inputFrame = document.createElement('canvas');
+        }
+        if (this._inputFrame) {
+            this._inputFrame.width = width;
+            this._inputFrame.height = height;
+        }
         this._outputFrame = document.createElement('canvas');
         this._outputFrame.width = width;
         this._outputFrame.height = height;
-        this.processedTrack = this._outputFrame.captureStream(0).getTracks()[0];
+        // NOTE(csantos): Initialize the rendering context for future renders. This also ensures
+        // that the correct type is used and on Firefox, it throws an exception if you try to capture
+        // frames prior calling getContext https://bugzilla.mozilla.org/show_bug.cgi?id=1572422
+        outputFrameBufferContextType = outputFrameBufferContextType || '2d';
+        var ctx = this._outputFrame.getContext(outputFrameBufferContextType);
+        if (!ctx) {
+            throw new Error("Cannot get outputFrameBufferContextType: " + outputFrameBufferContextType + ".");
+        }
+        // NOTE(csantos): Zero FPS means we can control when to render the next frame by calling requestFrame.
+        // Some browsers such as Firefox doesn't support requestFrame so we will use default, which is an undefined value.
+        // This means, the browser will use the highest FPS available.
+        var targetFps = typeof CanvasCaptureMediaStreamTrack !== 'undefined' && CanvasCaptureMediaStreamTrack.prototype &&
+            // eslint-disable-next-line
+            typeof CanvasCaptureMediaStreamTrack.prototype.requestFrame === 'function' ? 0 : undefined;
+        this.processedTrack = this._outputFrame.captureStream(targetFps).getTracks()[0];
         this.processedTrack.enabled = this.mediaStreamTrack.enabled;
         this.processor = processor;
         this._processorEventObserver.emit('add', {
@@ -7389,7 +7443,9 @@ var VideoTrack = /** @class */ (function (_super) {
             captureHeight: height,
             captureWidth: width,
             inputFrameRate: frameRate,
-            isRemoteVideoTrack: this.toString().includes('RemoteVideoTrack')
+            isRemoteVideoTrack: this.toString().includes('RemoteVideoTrack'),
+            inputFrameBufferType: inputFrameBufferType,
+            outputFrameBufferContextType: outputFrameBufferContextType
         });
         this._updateElementsMediaStreamTrack();
         this._captureFrames();
@@ -7526,12 +7582,11 @@ var VideoTrack = /** @class */ (function (_super) {
         this._log.debug('Removing VideoProcessor from the VideoTrack', processor);
         clearTimeout(this._captureTimeoutId);
         this.mediaStreamTrack.removeEventListener('unmute', this._unmuteHandler);
+        this._processorOptions = {};
         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();
@@ -7565,7 +7620,7 @@ function dimensionsChanged(track, elem) {
  * Any exception raised (either synchronously or asynchronously) in `processFrame` will result in the frame being dropped.
  * This callback has the following signature:<br/><br/>
  * <code>processFrame(</code><br/>
- * &nbsp;&nbsp;<code>inputFrameBuffer: OffscreenCanvas,</code><br/>
+ * &nbsp;&nbsp;<code>inputFrameBuffer: OffscreenCanvas | HTMLCanvasElement | HTMLVideoElement,</code><br/>
  * &nbsp;&nbsp;<code>outputFrameBuffer: HTMLCanvasElement</code><br/>
  * <code>): Promise&lt;void&gt; | void;</code>
  *
@@ -7581,6 +7636,30 @@ function dimensionsChanged(track, elem) {
  *   }
  * }
  */
+/**
+ * Possible options to provide to {@link LocalVideoTrack#addProcessor} and {@link RemoteVideoTrack#addProcessor}.
+ * @typedef {object} AddProcessorOptions
+ * @property {string} [inputFrameBufferType="offscreencanvas"] - This option allows you to specify what kind of input you want to receive in your
+ * Video Processor. The default is `offscreencanvas` and will fallback to a regular `canvas` if the browser does not support it.
+ * Possible values include the following.
+ * <br/>
+ * <br/>
+ * `offscreencanvas` - Your Video Processor will receive an [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas)
+ * which is good for canvas-related processing that can be rendered off screen.
+ * <br/>
+ * <br/>
+ * `canvas` - Your Video Processor will receive an [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement).
+ * This is recommended on browsers that doesn't support `OffscreenCanvas`, or if you need to render the frame on the screen.
+ * <br/>
+ * <br/>
+ * `video` - Your Video Processor will receive an [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement).
+ * Use this option if you are processing the frame using WebGL or if you only need to [draw](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)
+ * the frame directly to your output canvas.
+ * @property {string} [outputFrameBufferContextType="2d"] - The SDK needs the [context type](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext)
+ * that your Video Processor uses in order to properly generate the processed track. For example, if your Video Processor uses WebGL2 (`canvas.getContext('webgl2')`),
+ * you should set `outputFrameBufferContextType` to `webgl2`. Or if you're using Canvas 2D processing (`canvas.getContext('2d')`),
+ * you should set `outputFrameBufferContextType` to `2d`.
+ */
 /**
  * The {@link VideoTrack}'s dimensions changed.
  * @param {VideoTrack} track - The {@link VideoTrack} whose dimensions changed
@@ -22595,16 +22674,6 @@ function isChromeScreenShareTrack(track) {
     // we will check for label that starts with "screen:D" where D being a digit.
     return util.guessBrowser() === 'chrome' && track.kind === 'video' && 'displaySurface' in track.getSettings();
 }
-/**
- * returns true if given MediaStreamTrack is a user media track
- * @private
- * @param {MediaStreamTrack} track
- * @returns {boolean}
- */
-function isUserMediaTrack(track) {
-    // NOTE(mpatwardhan): tracks obtained from getUserMedia have a deviceId in its settings.
-    return typeof track.getSettings().deviceId === 'string';
-}
 /**
  * Returns a promise that resolve after timeoutMS have passed.
  * @param {number} timeoutMS - time to wait in milliseconds.
@@ -22660,7 +22729,6 @@ exports.trackPublicationClass = trackPublicationClass;
 exports.valueToJSON = valueToJSON;
 exports.withJitter = withJitter;
 exports.isChromeScreenShareTrack = isChromeScreenShareTrack;
-exports.isUserMediaTrack = isUserMediaTrack;
 exports.waitForSometime = waitForSometime;
 exports.waitForEvent = waitForEvent;
 
@@ -30083,7 +30151,7 @@ module.exports={
   "name": "twilio-video",
   "title": "Twilio Video",
   "description": "Twilio Video JavaScript Library",
-  "version": "2.26.2",
+  "version": "2.28.0",
   "homepage": "https://twilio.com",
   "author": "Mark Andrus Roberts <mroberts@twilio.com>",
   "contributors": [
@@ -30105,6 +30173,8 @@ module.exports={
   },
   "devDependencies": {
     "@babel/core": "^7.14.2",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/preset-env": "^7.14.2",
     "@babel/preset-typescript": "^7.13.0",
     "@types/express": "^4.11.0",