Add adaptive simulcast (#639)

* Update SDK version and enable adaptive simulcast

* Add changelog entry

* Update changelog entry

* Fix tests

* Fix linting

Author: timmydoza

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.6.2 (February 4, 2022)
+
+### Dependency Upgrades
+
+- `twilio-video` has been upgraded from 2.18.2 to to 2.19.0. This new version introduces a new feature called Adaptive Simulcast. When this feature is enabled (by setting `preferredVideoCodecs: "auto"` in the [ConnectOptions](https://sdk.twilio.com/js/video/releases/2.19.0/docs/global.html#ConnectOptions)), the SDK will use VP8 simulcast, and will enable/disable simulcast layers dynamically, thus improving bandwidth and CPU usage for the publishing client. For more information, please see [this changelog entry](https://github.com/twilio/twilio-video.js/blob/master/CHANGELOG.md#2190-january-31-2022) for the [Twilio Video JS SDK](https://github.com/twilio/twilio-video.js).
+
 ## 0.6.1 (December 17, 2021)
 
 ### Dependency Upgrades

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "twilio-video-app-react",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
@@ -43,7 +43,7 @@
     "strip-color": "^0.1.0",
     "ts-node": "^9.1.1",
     "twilio": "^3.63.1",
-    "twilio-video": "^2.18.2",
+    "twilio-video": "^2.19.0",
     "typescript": "^3.8.3"
   },
   "devDependencies": {

package.json

@@ -26,7 +26,7 @@ describe('the useConnectionOptions function', () => {
       dominantSpeaker: true,
       maxAudioBitrate: 0,
       networkQuality: { local: 1, remote: 1 },
-      preferredVideoCodecs: [{ codec: 'VP8', simulcast: true }],
+      preferredVideoCodecs: 'auto',
     };
 
     mockUseAppState.mockImplementationOnce(() => ({ settings }));
@@ -56,34 +56,10 @@ describe('the useConnectionOptions function', () => {
       dominantSpeaker: true,
       maxAudioBitrate: 0,
       networkQuality: { local: 1, remote: 1 },
-      preferredVideoCodecs: [{ codec: 'VP8', simulcast: true }],
+      preferredVideoCodecs: 'auto',
     };
 
     mockUseAppState.mockImplementationOnce(() => ({ settings }));
     expect(useConnectionOptions()).toEqual(result);
   });
-
-  it('should disable simulcast when the room type is peer to peer', () => {
-    const settings: Settings = {
-      trackSwitchOffMode: 'detected',
-      dominantSpeakerPriority: 'high',
-      bandwidthProfileMode: 'collaboration',
-      maxAudioBitrate: '0',
-    };
-
-    mockUseAppState.mockImplementationOnce(() => ({ settings, roomType: 'peer-to-peer' }));
-    expect(useConnectionOptions()).toMatchObject({ preferredVideoCodecs: [{ codec: 'VP8', simulcast: false }] });
-  });
-
-  it('should disable simulcast when the room type is "go"', () => {
-    const settings: Settings = {
-      trackSwitchOffMode: 'detected',
-      dominantSpeakerPriority: 'high',
-      bandwidthProfileMode: 'collaboration',
-      maxAudioBitrate: '0',
-    };
-
-    mockUseAppState.mockImplementationOnce(() => ({ settings, roomType: 'go' }));
-    expect(useConnectionOptions()).toMatchObject({ preferredVideoCodecs: [{ codec: 'VP8', simulcast: false }] });
-  });
 });

src/utils/useConnectionOptions/useConnectionOptions.test.tsx

@@ -3,7 +3,7 @@ import { isMobile, removeUndefineds } from '..';
 import { useAppState } from '../../state';
 
 export default function useConnectionOptions() {
-  const { roomType, settings } = useAppState();
+  const { settings } = useAppState();
 
   // See: https://sdk.twilio.com/js/video/releases/2.0.0/docs/global.html#ConnectOptions
   // for available connection options.
@@ -27,11 +27,7 @@ export default function useConnectionOptions() {
     // Comment this line if you are playing music.
     maxAudioBitrate: Number(settings.maxAudioBitrate),
 
-    // VP8 simulcast enables the media server in a Small Group or Group Room
-    // to adapt your encoded video quality for each RemoteParticipant based on
-    // their individual bandwidth constraints. Simulcast should be disabled if
-    // you are using Peer-to-Peer or 'Go' Rooms.
-    preferredVideoCodecs: [{ codec: 'VP8', simulcast: roomType !== 'peer-to-peer' && roomType !== 'go' }],
+    preferredVideoCodecs: 'auto',
 
     //@ts-ignore - Internal use only. This property is not exposed in type definitions.
     environment: process.env.REACT_APP_TWILIO_ENVIRONMENT,