twilio-video 2.32.0 → 2.32.1

package/CHANGELOG.md

@@ -2,6 +2,15 @@ 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.32.1 (August 1, 2025)
+====================
+
+Bug Fixes
+---------
+- Fixed an issue where video tracks would freeze when the video element was offscreen in a document Picture-in-Picture window.
+- Fixed an issue where `LocalVideoTrack.restart()` would fail on some devices when a video processor was active.
+- Fixed an issue where SDP munging would generate duplicated payload types, causing SDP negotiation failures with Chrome 137+.
+
 2.32.0 (July 23, 2025)
 ====================
 

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.32.0/twilio-video.min.js"></script>
+<script src="//sdk.twilio.com/js/video/releases/2.32.1/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.32.0
+/*! twilio-video.js 2.32.1
 
 The following license applies to all parts of this software except as
 documented below.
@@ -4338,6 +4338,10 @@ var LocalVideoTrack = /** @class */ (function (_super) {
             _workaroundSilentLocalVideoCleanup: {
                 value: null,
                 writable: true
+            },
+            _pipIntersectionObserver: {
+                value: null,
+                writable: true
             }
         });
         // NOTE(mmalavalli): In iOS Safari, we work around a bug where local video
@@ -4351,6 +4355,96 @@ var LocalVideoTrack = /** @class */ (function (_super) {
     LocalVideoTrack.prototype.toString = function () {
         return "[LocalVideoTrack #" + this._instanceId + ": " + this.id + "]";
     };
+    /**
+     * Handle document PiP enter event - set up intersection observer for PiP-specific visibility tracking
+     *
+     * NOTE(lrivas): This is only created if we are in document PiP mode and should be considered deprecated
+     * if Chrome's native PiP fixes the issue in the future.
+     * @private
+     */
+    LocalVideoTrack.prototype._onDocumentPipEnter = function () {
+        this._log.debug('LocalVideoTrack: Setting up PiP intersection observer');
+        this._setupPipIntersectionObserver();
+    };
+    /**
+     * Handle document PiP exit event - clean up intersection observer
+     * NOTE(lrivas): This is only created if we are in document PiP mode and should be considered deprecated
+     * if Chrome's native PiP fixes the issue in the future.
+     * @private
+     */
+    LocalVideoTrack.prototype._onDocumentPipExit = function () {
+        this._log.debug('LocalVideoTrack: Cleaning up PiP intersection observer');
+        this._cleanupPipIntersectionObserver();
+    };
+    /**
+     * Set up an IntersectionObserver to track visibility of elements attached in document PiP.
+     * This ensures that videos in PiP play when visible.
+     *
+     * NOTE(lrivas): This is only created if we are in document PiP mode and should be considered deprecated
+     * if Chrome's native PiP fixes the issue in the future.
+     * @private
+     */
+    LocalVideoTrack.prototype._setupPipIntersectionObserver = function () {
+        var _this = this;
+        if (!this._pipIntersectionObserver && this._documentPipWindow) {
+            this._log.debug('LocalVideoTrack: Creating PiP intersection observer');
+            this._pipIntersectionObserver = new IntersectionObserver(function (entries) {
+                var hasVisibleElements = entries.some(function (entry) { return entry.isIntersecting; });
+                if (hasVisibleElements) {
+                    _this._log.debug('LocalVideoTrack: Element visible in PiP, ensuring videos are playing');
+                    VideoTrack._ensureDocumentPipVideosPlaying(_this);
+                }
+            }, { threshold: 0.25 });
+            this._attachments.forEach(function (el) {
+                _this._log.debug('LocalVideoTrack: Observing element for PiP visibility');
+                _this._pipIntersectionObserver.observe(el);
+            });
+        }
+    };
+    /**
+     * Clean up PiP-specific intersection observer
+     *
+     * NOTE(lrivas): This is only created if we are in document PiP mode and should be considered deprecated
+     * if Chrome's native PiP fixes the issue in the future.
+     * @private
+     */
+    LocalVideoTrack.prototype._cleanupPipIntersectionObserver = function () {
+        if (this._pipIntersectionObserver) {
+            this._log.debug('LocalVideoTrack: Disconnecting PiP intersection observer');
+            this._pipIntersectionObserver.disconnect();
+            this._pipIntersectionObserver = null;
+        }
+    };
+    /**
+     * Attach the {@link LocalVideoTrack} to an HTMLMediaElement.
+     * @returns {HTMLMediaElement} mediaElement
+     */
+    LocalVideoTrack.prototype.attach = function () {
+        var result = _super.prototype.attach.apply(this, arguments);
+        // If we're in document PiP, new elements should be observed for visibility
+        if (this._pipIntersectionObserver) {
+            this._log.debug('LocalVideoTrack: Observing newly attached element for PiP visibility');
+            this._pipIntersectionObserver.observe(result);
+        }
+        return result;
+    };
+    /**
+     * Detach the {@link LocalVideoTrack} from HTMLMediaElement(s).
+     * @returns {HTMLMediaElement|Array<HTMLMediaElement>} mediaElement(s)
+     */
+    LocalVideoTrack.prototype.detach = function () {
+        var _this = this;
+        var result = _super.prototype.detach.apply(this, arguments);
+        var elements = Array.isArray(result) ? result : [result];
+        // Stop observing detached elements if we're in document PiP
+        if (this._pipIntersectionObserver) {
+            elements.forEach(function (el) {
+                _this._log.debug('LocalVideoTrack: Unobserving detached element from PiP visibility');
+                _this._pipIntersectionObserver.unobserve(el);
+            });
+        }
+        return result;
+    };
     /**
      * @private
      */
@@ -4364,6 +4458,8 @@ var LocalVideoTrack = /** @class */ (function (_super) {
         return _super.prototype._end.apply(this, arguments);
     };
     /**
+     * @param {boolean} useProcessed - Whether to use the processed track or the unprocessed track.
+     * @returns {Promise<void>}
      * @private
      */
     LocalVideoTrack.prototype._setSenderMediaStreamTrack = function (useProcessed) {
@@ -4487,12 +4583,18 @@ var LocalVideoTrack = /** @class */ (function (_super) {
      * the MediaStreamTrack directly, please do so in the "started" event handler. Also,
      * the {@link LocalVideoTrack}'s ID is no longer guaranteed to be the same as the
      * underlying MediaStreamTrack's ID.
+     *
+     * If a {@link VideoProcessor} is applied to this track, it will be automatically
+     * restarted after the new MediaStreamTrack is created to ensure proper processing
+     * continues with the new video source.
+     *
      * @param {MediaTrackConstraints} [constraints] - The optional <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints" target="_blank">MediaTrackConstraints</a>
      *   for restarting the {@link LocalVideoTrack}; If not specified, then the current MediaTrackConstraints
      *   will be used; If <code>{}</code> (empty object) is specified, then the default MediaTrackConstraints
      *   will be used
-     * @returns {Promise<void>} Rejects with a TypeError if the {@link LocalVideoTrack} was not created
-     *   using an one of <code>createLocalVideoTrack</code>, <code>createLocalTracks</code> or <code>connect</code>;
+     * @returns {Promise<void>} Resolves when the restart is complete, including any processor restart operations.
+     *   Rejects with a TypeError if the {@link LocalVideoTrack} was not created
+     *   using one of <code>createLocalVideoTrack</code>, <code>createLocalTracks</code> or <code>connect</code>;
      *   Also rejects with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Exceptions" target="_blank">DOMException</a>
      *   raised by <code>getUserMedia</code> when it fails
      * @fires LocalVideoTrack#stopped
@@ -4520,9 +4622,7 @@ var LocalVideoTrack = /** @class */ (function (_super) {
         }
         var promise = _super.prototype.restart.apply(this, arguments);
         if (this.processor) {
-            promise.then(function () {
-                _this._restartProcessor();
-            });
+            promise = promise.then(function () { return _this._restartProcessor(); });
         }
         if (this._workaroundSilentLocalVideo) {
             promise.finally(function () {
@@ -4531,6 +4631,26 @@ var LocalVideoTrack = /** @class */ (function (_super) {
         }
         return promise;
     };
+    /**
+     * Restarts the video processor by removing and re-adding it with the same options,
+     * then updates the sender to use the newly processed MediaStreamTrack.
+     *
+     * This operations are done synchronously to ensure the processor is restarted before the
+     * sender is updated to avoid race conditions.
+     *
+     * @returns {Promise<void>}
+     * @private
+     */
+    LocalVideoTrack.prototype._restartProcessor = function () {
+        var processor = this.processor;
+        var processorOptions = Object.assign({}, this._processorOptions);
+        // Local video track's removeProcessor and addProcessor call setSenderMediaStreamTrack async,
+        // but we need to wait for that operation to finish for a successful restart.
+        // So we call the parent's removeProcessor and addProcessor, then setSenderMediaStreamTrack right after.
+        _super.prototype.removeProcessor.apply(this, [processor]);
+        _super.prototype.addProcessor.apply(this, [processor, processorOptions]);
+        return this._setSenderMediaStreamTrack(true);
+    };
     /**
      * Calls stop on the underlying MediaStreamTrack. If you choose to stop a
      * {@link LocalVideoTrack}, you should unpublish it after stopping.
@@ -4542,6 +4662,8 @@ var LocalVideoTrack = /** @class */ (function (_super) {
             this._workaroundSilentLocalVideoCleanup();
             this._workaroundSilentLocalVideoCleanup = null;
         }
+        // Clean up PiP intersection observer when stopping
+        this._cleanupPipIntersectionObserver();
         return _super.prototype.stop.apply(this, arguments);
     };
     return LocalVideoTrack;
@@ -6313,7 +6435,7 @@ var documentVisibilityMonitor = require('../../util/documentvisibilitymonitor.js
 var NullObserver = require('../../util/nullobserver.js').NullObserver;
 var Timeout = require('../../util/timeout');
 var RemoteMediaVideoTrack = mixinRemoteMediaTrack(VideoTrack);
-var TRACK_TURN_OF_DELAY_MS = 50;
+var TRACK_TURN_OFF_DELAY_MS = 50;
 /**
  * A {@link RemoteVideoTrack} represents a {@link VideoTrack} published to a
  * {@link Room} by a {@link RemoteParticipant}.
@@ -6380,7 +6502,7 @@ var RemoteVideoTrack = /** @class */ (function (_super) {
             _turnOffTimer: {
                 value: new Timeout(function () {
                     _this._setRenderHint({ enabled: false });
-                }, TRACK_TURN_OF_DELAY_MS, false),
+                }, TRACK_TURN_OFF_DELAY_MS, false),
             },
             _resizeObserver: {
                 value: new options.ResizeObserver(function (entries) {
@@ -6646,6 +6768,8 @@ function maybeUpdateEnabledHint(remoteVideoTrack) {
     if (enabled === true) {
         remoteVideoTrack._turnOffTimer.clear();
         remoteVideoTrack._setRenderHint({ enabled: true });
+        // Check if videos in document PiP are actually playing
+        VideoTrack._ensureDocumentPipVideosPlaying(remoteVideoTrack);
     }
     else if (!remoteVideoTrack._turnOffTimer.isSet) {
         // set the track to be turned off after some delay.
@@ -7398,6 +7522,18 @@ var VideoTrack = /** @class */ (function (_super) {
                 enumerable: true,
                 value: null,
                 writable: true
+            },
+            _documentPipWindow: {
+                value: null,
+                writable: true
+            },
+            _documentPipEnterListener: {
+                value: null,
+                writable: true
+            },
+            _documentPipExitListener: {
+                value: null,
+                writable: true
             }
         });
         _this._processorEventObserver = new (options.VideoProcessorEventObserver || VideoProcessorEventObserver)(_this._log);
@@ -7720,6 +7856,10 @@ var VideoTrack = /** @class */ (function (_super) {
      */
     VideoTrack.prototype.attach = function () {
         var result = _super.prototype.attach.apply(this, arguments);
+        // Set up document PiP listener on first attach
+        if (this._attachments.size === 1) {
+            setupDocumentPipListener(this);
+        }
         if (this.processor) {
             this._captureFrames();
         }
@@ -7749,7 +7889,12 @@ var VideoTrack = /** @class */ (function (_super) {
      * videoTrack.detach('#my-video-element').remove();
      */
     VideoTrack.prototype.detach = function () {
-        return _super.prototype.detach.apply(this, arguments);
+        var result = _super.prototype.detach.apply(this, arguments);
+        // Clean up document PiP listener when no attachments remain
+        if (this._attachments.size === 0) {
+            cleanupDocumentPipListener(this);
+        }
+        return result;
     };
     /**
      * Remove the previously added {@link VideoProcessor} using `addProcessor` API.
@@ -7805,6 +7950,87 @@ function dimensionsChanged(track, elem) {
     return track.dimensions.width !== elem.videoWidth
         || track.dimensions.height !== elem.videoHeight;
 }
+/**
+ * Set up document PiP listener for a VideoTrack.
+ *
+ * The received VideoTrack can define `_onDocumentPipEnter` and `_onDocumentPipExit`
+ * to handle PiP-specific setup and cleanup.
+ * @param {VideoTrack} videoTrack - The VideoTrack to set up the listener for
+ * @private
+ */
+function setupDocumentPipListener(videoTrack) {
+    if (!videoTrack._documentPipEnterListener && 'documentPictureInPicture' in globalThis &&
+        globalThis.documentPictureInPicture &&
+        typeof globalThis.documentPictureInPicture.addEventListener === 'function') {
+        videoTrack._documentPipEnterListener = function (event) {
+            videoTrack._log.debug('document pip entered');
+            videoTrack._documentPipWindow = event.window;
+            // Set up exit listener on the PiP window
+            videoTrack._documentPipExitListener = function () {
+                videoTrack._log.debug('document pip exited');
+                videoTrack._documentPipWindow = null;
+                if (typeof videoTrack._onDocumentPipExit === 'function') {
+                    videoTrack._onDocumentPipExit();
+                }
+            };
+            // Listen for window close on the PiP window
+            if (event.window && typeof event.window.addEventListener === 'function') {
+                event.window.addEventListener('pagehide', videoTrack._documentPipExitListener);
+            }
+            // Immediate fix for any paused videos
+            ensureDocumentPipVideosPlaying(videoTrack);
+            if (typeof videoTrack._onDocumentPipEnter === 'function') {
+                videoTrack._onDocumentPipEnter(event);
+            }
+        };
+        globalThis.documentPictureInPicture.addEventListener('enter', videoTrack._documentPipEnterListener);
+    }
+}
+/**
+ * Clean up document PiP listener for VideoTrack
+ * @private
+ */
+function cleanupDocumentPipListener(videoTrack) {
+    if (videoTrack._documentPipEnterListener) {
+        if (globalThis.documentPictureInPicture && typeof globalThis.documentPictureInPicture.removeEventListener === 'function') {
+            globalThis.documentPictureInPicture.removeEventListener('enter', videoTrack._documentPipEnterListener);
+        }
+        // Clean up exit listener from PiP window if it exists
+        if (videoTrack._documentPipWindow && videoTrack._documentPipExitListener &&
+            typeof videoTrack._documentPipWindow.removeEventListener === 'function') {
+            videoTrack._documentPipWindow.removeEventListener('pagehide', videoTrack._documentPipExitListener);
+        }
+        videoTrack._documentPipEnterListener = null;
+        videoTrack._documentPipExitListener = null;
+        videoTrack._documentPipWindow = null;
+    }
+}
+/**
+ * This is a workaround to ensure that videos rendered in a document PIP continue playing after being enabled
+ * by the Intersection Observer. It appears to be a bug in Chrome, and we should revisit this issue once the
+ * Document Picture-in-Picture feature is more reliably supported.
+ * @private
+ */
+function ensureDocumentPipVideosPlaying(videoTrack) {
+    if (!videoTrack._documentPipWindow) {
+        return;
+    }
+    try {
+        var pipEls_1 = new WeakSet(videoTrack._documentPipWindow.document.querySelectorAll('video'));
+        videoTrack._attachments.forEach(function (el) {
+            if (pipEls_1.has(el) && el.paused) {
+                el.play().then(function () {
+                    videoTrack._log.debug('Successfully played inadvertently paused video element in document PiP window');
+                }).catch(function (error) {
+                    videoTrack._log.debug('Failed to play inadvertently paused video element in document PiP window', error);
+                });
+            }
+        });
+    }
+    catch (error) {
+        videoTrack._log.debug('Error checking document PiP video playback:', error);
+    }
+}
 /**
  * A {@link VideoTrack}'s width and height.
  * @typedef {object} VideoTrack.Dimensions
@@ -7892,6 +8118,7 @@ function dimensionsChanged(track, elem) {
  * @param {VideoTrack} track - The {@link VideoTrack} that started
  * @event VideoTrack#started
  */
+VideoTrack._ensureDocumentPipVideosPlaying = ensureDocumentPipVideosPlaying;
 module.exports = VideoTrack;
 
 },{"../../util/constants":127,"../../webrtc/util":172,"./capturevideoframes":15,"./mediatrack":29,"./videoprocessoreventobserver":43}],45:[function(require,module,exports){
@@ -23995,6 +24222,11 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 var _a = require('../'), difference = _a.difference, flatMap = _a.flatMap;
 var setSimulcastInMediaSection = require('./simulcast');
 var ptToFixedBitrateAudioCodecName = {
@@ -24040,6 +24272,11 @@ function createMidToMediaSectionMap(sdp) {
  */
 function createPtToCodecName(mediaSection) {
     return getPayloadTypesInMediaSection(mediaSection).reduce(function (ptToCodecName, pt) {
+        // NOTE(lrivas): Ignore repeated PTs to prevent RFC non‑compliant SDP generation.
+        // See, https://github.com/twilio/twilio-video.js/issues/2122.
+        if (ptToCodecName.has(pt)) {
+            return ptToCodecName;
+        }
         var rtpmapPattern = new RegExp("a=rtpmap:" + pt + " ([^/]+)");
         var matches = mediaSection.match(rtpmapPattern);
         var codecName = matches
@@ -24261,10 +24498,13 @@ function filterCodecsInMediaSection(section, peerMidsToMediaSections, codecsToRe
     // Payload Type if present.
     var rtxPts = codecsToPts.get('rtx') || [];
     // In "a=fmtp:<rtxPt> apt=<apt>", extract the codec PT <apt> associated with rtxPt.
-    pts = pts.concat(rtxPts.filter(function (rtxPt) {
+    var additionalRtxPts = rtxPts.filter(function (rtxPt) {
         var fmtpAttrs = getFmtpAttributesForPt(rtxPt, section);
         return fmtpAttrs && pts.includes(fmtpAttrs.apt);
-    }));
+    });
+    // NOTE(lrivas): Retain rtx Payload Types that reference a codec already in `pts`.
+    // Using an intermediate Set to prevent duplicates from being reintroduced after concatenation.
+    pts = Array.from(new Set(__spreadArray(__spreadArray([], __read(pts)), __read(additionalRtxPts))));
     // Filter out the below mentioned attribute lines in the m= section that do not
     // belong to one of the Payload Types that are to be retained.
     // 1. "a=rtpmap:<pt> <codec>"
@@ -24277,7 +24517,9 @@ function filterCodecsInMediaSection(section, peerMidsToMediaSections, codecsToRe
     });
     // Filter the list of Payload Types in the first line of the m= section.
     var orderedPts = getPayloadTypesInMediaSection(section).filter(function (pt) { return pts.includes(pt); });
-    return setPayloadTypesInMediaSection(orderedPts, lines.join('\r\n'));
+    // Ensure only unique Payload Types are retained.
+    var uniquePayloadTypes = Array.from(new Set(orderedPts));
+    return setPayloadTypesInMediaSection(uniquePayloadTypes, lines.join('\r\n'));
 }
 /**
  * Filter local codecs based on the remote SDP.
@@ -24561,6 +24803,7 @@ function sdpWorkaround(sdp) {
 function mediaSectionWorkaround(mediaSection) {
     var ptToCodecName = createPtToCodecName(mediaSection);
     mediaSection = deleteDuplicateRtxPts(mediaSection, ptToCodecName);
+    mediaSection = resolvePayloadTypeConflicts(mediaSection);
     var codecNameToPts = createCodecNameToPts(ptToCodecName);
     var rtxPts = codecNameToPts.get('rtx') || new Set();
     var invalidRtxPts = new Set();
@@ -24588,6 +24831,42 @@ function mediaSectionWorkaround(mediaSection) {
     });
     return mediaSection;
 }
+/**
+ * Resolve payload type conflicts where same PT maps to different codecs
+ * @param {string} mediaSection
+ * @returns {string} resolvedMediaSection
+ */
+function resolvePayloadTypeConflicts(mediaSection) {
+    var lines = mediaSection.split('\r\n');
+    var seenPts = new Map(); // PT -> first codec seen
+    var nextAvailablePt = 96; // Start from 96, which is the first dynamic PT. See https://datatracker.ietf.org/doc/html/rfc3551#section-3
+    for (var i = 0; i < lines.length; i++) {
+        var rtpmapMatch = lines[i].match(/^a=rtpmap:(\d+) ([^/]+)/);
+        if (rtpmapMatch) {
+            var pt = parseInt(rtpmapMatch[1], 10);
+            var codec = rtpmapMatch[2].toLowerCase();
+            if (seenPts.has(pt) && seenPts.get(pt) !== codec) {
+                // Conflict detected - reassign this PT
+                while (seenPts.has(nextAvailablePt) || nextAvailablePt === pt) {
+                    nextAvailablePt++;
+                }
+                var newPt = nextAvailablePt;
+                seenPts.set(newPt, codec);
+                lines[i] = lines[i].replace("a=rtpmap:" + pt, "a=rtpmap:" + newPt);
+                for (var j = i + 1; j < lines.length; j++) {
+                    // eslint-disable-next-line max-depth
+                    if (lines[j].match(new RegExp("^a=(fmtp|rtcp-fb):" + pt + "\\b"))) {
+                        lines[j] = lines[j].replace(new RegExp("^a=(fmtp|rtcp-fb):" + pt + "\\b"), "a=$1:" + newPt);
+                    }
+                }
+            }
+            else {
+                seenPts.set(pt, codec);
+            }
+        }
+    }
+    return lines.join('\r\n');
+}
 /**
  * @param {string} mediaSection
  * @param {Map<PT, Codec>} ptToCodecName
@@ -30942,7 +31221,7 @@ module.exports={
   "name": "twilio-video",
   "title": "Twilio Video",
   "description": "Twilio Video JavaScript Library",
-  "version": "2.32.0",
+  "version": "2.32.1",
   "homepage": "https://twilio.com",
   "author": "Mark Andrus Roberts <mroberts@twilio.com>",
   "contributors": [
@@ -31032,7 +31311,7 @@ module.exports={
     "webrtc-adapter": "^7.7.1"
   },
   "engines": {
-    "node": ">=0.12"
+    "node": ">=22"
   },
   "license": "BSD-3-Clause",
   "main": "./es5/index.js",
@@ -31092,12 +31371,10 @@ module.exports={
   "dependencies": {
     "events": "^3.3.0",
     "util": "^0.12.4",
-    "ws": "^7.4.6",
-    "xmlhttprequest": "^1.8.0"
+    "ws": "^7.4.6"
   },
   "browser": {
-    "ws": "./src/ws.js",
-    "xmlhttprequest": "./src/xmlhttprequest.js"
+    "ws": "./src/ws.js"
   }
 }