Merge pull request #1888 from twilio/prep-2.24.2

Prep for 2.24.2

CHANGELOG.md

@@ -2,6 +2,18 @@ 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.24.2 (September 29, 2022)
+===========================
+
+Bug Fixes
+---------
+
+- Fixed a bug where sometimes, a `MediaClientRemoteDescFailedError` was raised when a Chrome Participant who had enabled
+  Adaptive Simulcast (`ConnectOptions.preferredVideoCodecs = 'auto'`) tried to publish a camera Track after publishing a
+  `<canvas>` Track. (VIDEO-11516)
+- Fixed an issue where the Krisp Noise Cancellation fails to load in an application where the content security policy
+  directives `default-src self unsafe-eval` are used. (VIDEO-11537)
+
 2.24.1 (September 6, 2022)
 ==========================
 
@@ -73,6 +85,10 @@ function updateNoiseCancellation(enable: boolean) {
 }
 
 ```
+
+**NOTE:** If your application is using the `default-src self` content security policy directive, then you should add
+another directive `unsafe-eval`, which is required for the Krisp Audio Plugin to load successfully.
+
 2.22.2 (July 25, 2022)
 ======================
 

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.24.1/twilio-video.min.js"></script>
+<script src="//sdk.twilio.com/js/video/releases/2.24.2/twilio-video.min.js"></script>
 
 ```
 
@@ -154,6 +154,14 @@ you should also include the following `script-src` directive:
 script-src https://sdk.twilio.com
 ```
 
+If you are enabling [Krisp Noise Cancellation](https://www.twilio.com/docs/video/noise-cancellation) for
+your local audio, and you are using the following `default-src self` directive, you should also add the
+`unsafe-eval` directive:
+
+```
+default-src self unsafe-eval
+```
+
 Keep in mind, you may need to merge these policy directives with your own if
 you're using other services.
 

lib/noisecancellationadapter.ts

@@ -1,10 +1,10 @@
-/* eslint-disable no-console */
 'use strict';
+
 import { AudioProcessor } from '../tsdef/AudioProcessor';
 import { NoiseCancellationOptions } from '../tsdef/types';
-const Log = require('./util/log');
 
-const dynamicImport = require('./vendor/dynamicimport');
+const dynamicImport = require('./util/dynamicimport');
+const Log = require('./util/log');
 
 const PLUGIN_CONFIG = {
   krisp: {
@@ -16,6 +16,7 @@ const PLUGIN_CONFIG = {
     pluginFile: 'rnnoise_sdk.mjs'
   }
 };
+
 // AudioProcessor assumes following interface from the Plugin
 interface NoiseCancellationPlugin {
   init(options: { rootDir: string }): Promise<void>;

lib/signaling/v2/peerconnection.js

@@ -471,11 +471,16 @@ class PeerConnectionV2 extends StateMachine {
     if (track.kind !== 'video' || track.readyState === 'ended') {
       return false;
     }
-
-    const browser = util.guessBrowser();
-
+    // NOTE(mmalavalli): There is no guarantee that CanvasCaptureMediaStreamTracks will always have "width" and "height"
+    // in their settings. So, we don't update the encodings if they are not present.
+    // Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1367082
+    const { height, width } = track.getSettings();
+    if (typeof height !== 'number' || typeof width !== 'number') {
+      return false;
+    }
     // Note(mpatwardhan): always configure encodings for safari.
     // for chrome only when adaptive simulcast enabled.
+    const browser = util.guessBrowser();
     if (browser === 'safari' || (browser === 'chrome' && this._isAdaptiveSimulcastEnabled)) {
       this._updateEncodings(track, encodings, trackReplaced);
       return true;

lib/util/dynamicimport.js

@@ -0,0 +1,22 @@
+'use strict';
+
+module.exports = (function(scope) {
+  const { location, URL } = scope;
+  if ([location, URL].some(api => !api)) {
+    return function dynamicImportNotSupported(module) {
+      return Promise.reject(new Error(`Failed to import: ${module}: dynamicImport is not supported`));
+    };
+  }
+  scope.__twilioVideoImportedModules = {
+    // Imported module map.
+  };
+  return function dynamicImport(module) {
+    if (module in scope.__twilioVideoImportedModules) {
+      return Promise.resolve(scope.__twilioVideoImportedModules[module]);
+    }
+    // NOTE(mmalavalli): Calling import() directly can cause build issues in TypeScript and Webpack
+    // (and probably other frameworks). So, we create a Function that calls import() in its body.
+    // eslint-disable-next-line no-new-func
+    return new Function('scope', `return import('${new URL(module, location)}').then(m => scope.__twilioVideoImportedModules['${module}'] = m);`)(scope);
+  };
+}(globalThis));

test/unit/spec/signaling/v2/peerconnection.js

@@ -569,7 +569,7 @@ describe('PeerConnectionV2', () => {
             break;
         }
 
-        const tracks = [{ id: 1 }];
+        const tracks = [{ id: 1, getSettings: () => ({ height: 0, width: 0 }) }];
         trackSender = makeMediaTrackSender(tracks[0]);
         test.pcv2.addMediaTrackSender(trackSender);
 
@@ -655,7 +655,7 @@ describe('PeerConnectionV2', () => {
 
     beforeEach(() => {
       test = makeTest({ offers: 1 });
-      const tracks = [{ id: 1 }];
+      const tracks = [{ id: 1, getSettings: () => ({ height: 0, width: 0 }) }];
       trackSender = makeMediaTrackSender(tracks[0]);
       test.pcv2.addMediaTrackSender(trackSender);