@opentok/client 2.27.3 → 2.27.4

package/dist/js/opentok.js

@@ -1,11 +1,11 @@
 /**
- * @license OpenTok.js 2.27.3 60c008e
+ * @license OpenTok.js 2.27.4 e40b742
  *
  * Copyright (c) 2010-2024 TokBox, Inc.
  * Subject to the applicable Software Development Kit (SDK) License Agreement:
  * https://www.vonage.com/legal/communications-apis/terms-of-use/
  *
- * Date: Wed, 27 Mar 2024 17:25:24 GMT
+ * Date: Wed, 17 Apr 2024 10:04:05 GMT
  */
 
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -6765,9 +6765,10 @@ function EventsFactory(deps) {
       reason
     });
   };
-  Events.ConnectionStateChangedEvent = function ConnectionStateChangedEvent(type, target) {
+  Events.ConnectionStateChangedEvent = function ConnectionStateChangedEvent(type, target, mediaMode) {
     return new _Event4.default(type, false, {
-      target
+      target,
+      mediaMode
     });
   };
 
@@ -7946,7 +7947,7 @@ const logging = (0, _log.default)('StaticConfig');
 */
 
 /** @type builtInConfig */
-const builtInConfig = (0, _cloneDeep.default)({"version":"v2.27.3","buildHash":"60c008e","minimumVersion":{"firefox":52,"chrome":49},"debug":false,"websiteURL":"http://www.tokbox.com","configURL":"https://config.opentok.com","ipWhitelistConfigURL":"","cdnURL":"","loggingURL":"https://hlg.tokbox.com/prod","apiURL":"https://anvil.opentok.com"});
+const builtInConfig = (0, _cloneDeep.default)({"version":"v2.27.4","buildHash":"e40b742","minimumVersion":{"firefox":52,"chrome":49},"debug":false,"websiteURL":"http://www.tokbox.com","configURL":"https://config.opentok.com","ipWhitelistConfigURL":"","cdnURL":"","loggingURL":"https://hlg.tokbox.com/prod","apiURL":"https://anvil.opentok.com"});
 const whitelistAllowedRuntimeProperties = (0, _pick.default)(['apiURL', 'assetURL', 'cdnURL', 'sessionInfoOverrides', 'loggingURL']);
 const liveConfigMap = {
   apiUrl: 'apiURL',
@@ -14873,9 +14874,9 @@ function StylableComponent(self, initialStyles, showControls, logSetStyleWithPay
    *
    *       <li><code>videoDisabledDisplayMode</code> (String) &#151; Whether to display the video
    *       disabled indicator and video disabled warning icons for a Subscriber. These icons
-   *       indicate that the video has been disabled (or is in risk of being disabled for
+   *       indicate that the video has been disabled (or is at risk of being disabled for
    *       the warning icon) due to poor stream quality. Possible values are: <code>"auto"</code>
-   *       (the icons are automatically when the displayed video is disabled or in risk of being
+   *       (the icons are automatically when the displayed video is disabled or at risk of being
    *       disabled due to poor stream quality), <code>"off"</code> (do not display the icons), and
    *       <code>"on"</code> (display the icons).</li>
    *   </ul>
@@ -21164,6 +21165,14 @@ function PublisherFactory(_ref) {
      * They are not supported in other (non-Chromium-based) browsers or on iOS.  You can check if the client
      * supports this feature by calling the
      * <a href="OT.html#hasMediaProcessorSupport">OT.hasMediaProcessorSupport()</a> method.
+     * </p>
+     *
+     * <p>
+     * <b>Important:</b> Video filters require adequate processor support.
+     * Even in supported browsers, transformers may not be stable when background
+     * processes limit available processing resources. See
+     * <a href="https://tokbox.com/developer/guides/vonage-media-processor/js/#client-requirements">Client requirements</a>.
+     * </p>
      *
      * <p>
      * Calling this method results in an error (the Promise returned by the method is rejected)
@@ -21616,6 +21625,13 @@ function PublisherFactory(_ref) {
      * </p>
      *
      * <p>
+     * <b>Important:</b> Media processors require adequate processor support.
+     * Even in supported browsers, transformers may not be stable when background
+     * processes limit available processing resources. See
+     * <a href="https://tokbox.com/developer/guides/vonage-media-processor/js/#client-requirements">Client requirements</a>.
+     * </p>
+     *
+     * <p>
      * Calling this method results in an error (the Promise returned by the method is rejected)
      * in the following conditions:
      * <ul>
@@ -21768,6 +21784,13 @@ function PublisherFactory(_ref) {
      * </p>
      *
      * <p>
+     * <b>Important:</b> Media processors require adequate processor support.
+     * Even in supported browsers, transformers may not be stable when background
+     * processes limit available processing resources. See
+     * <a href="https://tokbox.com/developer/guides/vonage-media-processor/js/#client-requirements">Client requirements</a>.
+     * </p>
+     *
+     * <p>
      * Calling this method results in an error (the Promise returned by the method is rejected)
      * in the following conditions:
      * <ul>
@@ -22166,7 +22189,7 @@ function PublisherFactory(_ref) {
    *   <p>
    *   You can enable this audio-only fallback feature, by setting the
    *   <code>publisher</code> property to <code>true</code> in the
-   *   <code>audioFallback</code> option passed
+   *   <code>audioFallbackEnabled</code> option passed
    *   into the <code>OT.initPublisher()</code> method for the publishing client. (See
    *   <a href="OT.html#initPublisher">OT.initPublisher()</a>.)</li>
    *
@@ -34380,7 +34403,7 @@ function SubscriberFactory(_ref2) {
           _widgetView.loading(currentConnectionState !== _eventNames.default.SUBSCRIBER_CONNECTED);
         }
         logging.debug(`OT.Subscriber.connectionStateChanged to ${state}`);
-        this.dispatchEvent(new Events.ConnectionStateChangedEvent(currentConnectionState, this));
+        this.dispatchEvent(new Events.ConnectionStateChangedEvent(currentConnectionState, this, (0, _getMediaModeBySourceStreamId.default)(sourceStreamId)));
       }
     };
     const onIceRestartSuccess = () => {
@@ -35606,9 +35629,10 @@ function SubscriberFactory(_ref2) {
     * You can set the initial preferred resolution used by setting the
     * <code>preferredResolution</code> property of the <code>options</code> object you pass into the
     * <code>Session.subscribe()</code> method.
-    * <b>Note:</b> If you set the initial preferred resolution to <code>auto</code> and decide to set it
-    * to a particular value using this method, you will receive a warning that setting the resolution
-    * using <code>setPreferredResolution()</code> method is not allowed.
+    * <p>
+    * <b>Note:</b> If you set the initial preferred resolution to <code>"auto"</code> when calling
+    * <code>Session.subscribe()</code>, calling <code>setPreferredResolution()</code> fails silently,
+    * and you will receive a warning.
     *
     * @param {Object} resolution Set this to an object with two properties: <code>width</code> and
     * <code>height</code> (both numbers), such as <code>{width: 320, height: 240}</code>. Set this to
@@ -63298,10 +63322,10 @@ function initPublisherFactory(deps) {
   *
   *       <li><code>videoDisabledDisplayMode</code> (String) &#151; Whether to display the video
   *       disabled indicator and video disabled warning icons for the Publisher. These icons
-  *       indicate that the video has been disabled (or is in risk of being disabled for
+  *       indicate that the video has been disabled (or is at risk of being disabled for
   *       the warning icon) due to poor stream quality. This style only applies to the Publisher
   *       object. Possible values are: <code>"auto"</code> (the icons are automatically when the
-  *       displayed video is disabled or in risk of being disabled due to poor stream quality),
+  *       displayed video is disabled or at risk of being disabled due to poor stream quality),
   *       <code>"off"</code> (do not display the icons), and <code>"on"</code> (display the
   *       icons). The default setting is <code>"auto"</code>.
   *       <p>
@@ -65235,13 +65259,15 @@ function SessionFactory(deps) {
     *   <code>setPreferredFrameRate()</code> method of the Subscriber object.
     *   </li>
     *   <li>
-    *   <code>preferredResolution</code> (Object) &#151; The preferred resolution of the subscriber's
-    *   video. Set this to either a string <code>'auto'</code> to have the resolution to be handled by OpenTok, or
-    *   an object with two properties: <code>width</code> and <code>height</code>
+    *   <code>preferredResolution</code> (String | Object) &#151; The preferred resolution of the subscriber's
+    *   video. Set this to <code>"auto"</code> (a string, recommended) to have OpenTok.js
+    *   set the resolution based on the subscriber's dimensions in the browser.
+    *   Or set this to an object with two properties: <code>width</code> and <code>height</code>
     *   (both numbers), such as <code>{width: 320, height: 240}</code>. Lowering the preferred video
     *   resolution lowers video quality on the subscribing client, but it also reduces network and CPU
     *   usage. You may want to use a lower resolution based on the dimensions of subscriber's video on
-    *   the web page. You may want to use a resolution for subscribers to a stream that is less
+    *   the web page (which is handled automatically with the <code>"auto"</code> setting).
+    *   Or you may want to use a resolution for subscribers to a stream that is less
     *   important (and smaller) than other streams.
     *   <p>
     *   This property only applies when subscribing to a stream that uses the
@@ -65325,10 +65351,10 @@ function SessionFactory(deps) {
     *
     *       <li><code>videoDisabledDisplayMode</code> (String) &#151; Whether to display the video
     *       disabled indicator and video disabled warning icons for a Subscriber. These icons
-    *       indicate that the video has been disabled (or is in risk of being disabled for
+    *       indicate that the video has been disabled (or is at risk of being disabled for
     *       the warning icon) due to poor stream quality. This style only applies to the Subscriber
     *       object. Possible values are: <code>"auto"</code> (the icons are automatically when the
-    *       displayed video is disabled or in risk of being disabled due to poor stream quality),
+    *       displayed video is disabled or at risk of being disabled due to poor stream quality),
     *       <code>"off"</code> (do not display the icons), and <code>"on"</code> (display the
     *       icons). The default setting is <code>"auto"</code></li>
     *   </ul>
@@ -91909,16 +91935,27 @@ function SinglePeerConnectionAdapterFactory(deps) {
   return function SinglePeerConnectionAdapter(options, controller) {
     const _transceivers = {};
     const _tracks = [];
-    let _iceConnectedEmitted = false;
     const mediaStream = createMediaStream();
     this._id = (0, _uuid.default)();
 
-    // SPC events wrapper for PeerConnection
-
+    // Trigger wrappers to ensure events only fired once
+    let _iceConnectedEmitted = false;
     const _onIceConnected = () => {
-      this.trigger('iceConnected');
-      _iceConnectedEmitted = true;
+      if (!_iceConnectedEmitted) {
+        this.trigger('iceConnected');
+        _iceConnectedEmitted = true;
+      }
+    };
+    let _iceConnectionStateConnectedEmitted = false;
+    const _onIceConnectionStateChanged = state => {
+      if (state === 'connected' && _iceConnectionStateConnectedEmitted) {
+        return;
+      }
+      _iceConnectionStateConnectedEmitted = state === 'connected';
+      this.trigger('iceConnectionStateChange', state);
     };
+
+    // SPC events wrapper for PeerConnection
     const _onClosed = () => this.trigger('close');
     const _onRemoteVideoSupported = supported => this.trigger('remoteVideoSupported', supported);
     const _onPeerError = _ref => {
@@ -91933,7 +91970,6 @@ function SinglePeerConnectionAdapterFactory(deps) {
       qos.parsedStats.singlePeerConnection = true;
       this.trigger('qos', qos);
     };
-    const _onIceConnectionStateChange = state => this.trigger('iceConnectionStateChange', state);
     const _onSignalingStateChange = state => this.trigger('signalingStateChange', state);
     const _onSignalingStateStable = state => this.trigger('signalingStateStable', state);
     const _onDecryptFailed = () => this.trigger('decryptFailed');
@@ -91947,25 +91983,26 @@ function SinglePeerConnectionAdapterFactory(deps) {
       signalingStateStable: _onSignalingStateStable,
       error: _onPeerError,
       qos: _onQoS,
-      iceConnectionStateChange: _onIceConnectionStateChange,
+      iceConnectionStateChange: _onIceConnectionStateChanged,
       remoteVideoSupported: _onRemoteVideoSupported,
       decryptFailed: _onDecryptFailed,
       decryptRestored: _onDecryptRestored
     }, this);
 
     // Specific SPC logic
-
-    const shouldEmitIceConnected = () => _peerConnection.iceConnectionStateIsConnected() && !_iceConnectedEmitted;
-    this._onTrackAdded = _ref2 => {
+    this.onTrackAdded = _ref2 => {
       let track = _ref2.track,
         transceiver = _ref2.transceiver;
       _transceivers[track.id] = transceiver.mid;
       controller.addSubscriberMid(transceiver.mid, this._id);
       _tracks.push(track);
       mediaStream.addTrack(track);
-      if (shouldEmitIceConnected()) {
-        // Since PC is already connected, we will need to emit the event now.
+      if (_peerConnection.iceConnectionStateIsConnected()) {
+        // For SPC if ICE state is already connected when track is added
+        // then this is not the first subscriber and we must trigger the event manually
+        // using the following wrappers protect against firing events multiple times.
         _onIceConnected();
+        _onIceConnectionStateChanged('connected');
       }
       this.trigger('trackAdded', {
         stream: mediaStream,
@@ -103084,7 +103121,7 @@ let SinglePeerConnectionController = /*#__PURE__*/function () {
       // Also store all tracks per SinglePeerConnection
       this._tracks.push(track.id);
       this._currentAndPreviousMids.push(transceiver.mid);
-      this._subscriberPcToAdd._onTrackAdded({
+      this._subscriberPcToAdd.onTrackAdded({
         track,
         transceiver
       });