Release - 0.12.26 (#3416)

packages/hms-video-store/src/analytics/AnalyticsEventFactory.ts

@@ -138,7 +138,7 @@ export default class AnalyticsEventFactory {
   static audioRecovered(message: string) {
     return new AnalyticsEvent({
       name: 'audioRecovered',
-      level: AnalyticsEventLevel.VERBOSE,
+      level: AnalyticsEventLevel.INFO,
       properties: {
         message,
       },

packages/hms-video-store/src/device-manager/DeviceManager.ts

@@ -106,7 +106,6 @@ export class DeviceManager implements HMSDeviceManager {
     // do it only on initial load.
     if (!force) {
       await this.updateToActualDefaultDevice();
-      await this.autoSelectAudioOutput();
       this.startPollingForDevices();
     }
     this.logDevices('Init');
@@ -134,12 +133,12 @@ export class DeviceManager implements HMSDeviceManager {
   }
 
   cleanup() {
-    this.initialized = false;
-    this.earpieceSelected = false;
     if (this.timer) {
       clearTimeout(this.timer);
       this.timer = null;
     }
+    this.initialized = false;
+    this.earpieceSelected = false;
     this.audioInput = [];
     this.audioOutput = [];
     this.videoInput = [];
@@ -483,8 +482,9 @@ export class DeviceManager implements HMSDeviceManager {
    * Mweb is not able to play via call channel by default, this is to switch from media channel to call channel
    */
   // eslint-disable-next-line complexity
-  private autoSelectAudioOutput = async () => {
-    if ('ondevicechange' in navigator.mediaDevices) {
+  public autoSelectAudioOutput = async () => {
+    // do this only after join so the earpiece would be selected at the right time
+    if ('ondevicechange' in navigator.mediaDevices || !this.store.getLocalPeer()?.joinedAt) {
       return;
     }
     const { bluetoothDevice, earpiece, speakerPhone, wired } = this.categorizeAudioInputDevices();

packages/hms-video-store/src/diagnostics/DiagnosticsStatsCollector.ts

@@ -67,7 +67,9 @@ export class DiagnosticsStatsCollector {
     const ridAveragedVideoBitrateList = this.localVideoTrackStatsList.map(trackStatsMap =>
       trackStatsMap ? calculateAverage(Object.values(trackStatsMap), curr => curr.bitrate) : 0,
     );
-
+    const audioJitter = getLastElement(this.remoteAudioTrackStatsList)?.jitter || 0;
+    const videoJitter = getLastElement(this.remoteVideoTrackStatsList)?.jitter || 0;
+    const jitter = Math.max(audioJitter, videoJitter);
     const lastLocalAudioTrackStats = getLastElement(this.localAudioTrackStatsList);
     const lastLocalVideoTrackStats = getLastElement(this.localVideoTrackStatsList);
 
@@ -80,6 +82,7 @@ export class DiagnosticsStatsCollector {
         bytesReceived: lastSubscribeStats?.bytesReceived || 0,
         bitrateSent: calculateAverage(this.peerStatsList, curr => curr.publish?.bitrate),
         bitrateReceived: calculateAverage(this.peerStatsList, curr => curr.subscribe?.bitrate),
+        jitter: jitter,
       },
       audio: {
         roundTripTime,
@@ -91,6 +94,7 @@ export class DiagnosticsStatsCollector {
         bytesSent: lastLocalAudioTrackStats
           ? Object.values(lastLocalAudioTrackStats).reduce((acc, curr) => acc + (curr.bytesSent || 0), 0)
           : 0,
+        jitter: audioJitter,
       },
       video: {
         roundTripTime,
@@ -102,6 +106,7 @@ export class DiagnosticsStatsCollector {
         bytesSent: lastLocalVideoTrackStats
           ? Object.values(lastLocalVideoTrackStats).reduce((acc, curr) => acc + (curr.bytesSent || 0), 0)
           : 0,
+        jitter: videoJitter,
       },
     };
   }

packages/hms-video-store/src/diagnostics/interfaces.ts

@@ -88,4 +88,5 @@ export interface DiagnosticsRTCStats {
   bitrateSent: number;
   bitrateReceived: number;
   roundTripTime: number;
+  jitter: number;
 }

packages/hms-video-store/src/interfaces/hls-config.ts

@@ -26,8 +26,7 @@ export interface HLSMeetingURLVariant {
    */
   meetingURL: string;
   /**
-   * additional metadata for this URL for example - landscape/portrait, the field is not currently supported
-   * @alpha
+   * additional metadata for this URL for example - landscape/portrait
    */
   metadata?: string;
 }

packages/hms-video-store/src/interfaces/peer/connection-quality.ts

@@ -5,7 +5,6 @@
  * experience in the session.
  * Note that this is not an absolute measure, a bandwidth of 1 MBPs may be good
  * for a 1:1 call but poor for a large call.
- * @alpha
  */
 export interface HMSConnectionQuality {
   peerID: string;

packages/hms-video-store/src/interfaces/room.ts

@@ -80,9 +80,6 @@ export interface HMSHLSRecording {
 
 export interface HMSRTMP {
   running: boolean;
-  /**
-   * @alpha
-   **/
   startedAt?: Date;
   state?: HMSStreamingState;
   error?: HMSException;

packages/hms-video-store/src/interfaces/session-store/interactivity-center.ts

@@ -22,6 +22,5 @@ export interface HMSInteractivityCenter {
   fetchLeaderboard(pollID: string, offset: number, count: number): Promise<HMSQuizLeaderboardResponse>;
   getPollResponses(poll: HMSPoll, self: boolean): Promise<void>;
   getPolls(): Promise<HMSPoll[]>;
-  /** @alpha */
   whiteboard: HMSWhiteboardInteractivityCenter;
 }

packages/hms-video-store/src/reactive-store/HMSReactiveStore.ts

@@ -72,13 +72,13 @@ export class HMSReactiveStore<T extends HMSGenericTypes = { sessionStore: Record
   }
 
   /**
-   * By default store.subscribe does not call the handler with the current state at time of subscription,
+   * By default, store.subscribe does not call the handler with the current state at time of subscription,
    * this behaviour can be modified by calling this function. What it means is that instead of calling the
    * handler only for changes which happen post subscription we'll also call it exactly once at the time
    * of subscription with the current state. This behaviour is similar to that of BehaviourSubject in RxJS.
    * This will be an irreversible change
    *
-   * Note: you don't need this if you're using our react hooks, it takes care of this requirement.
+   * Note: you don't need this if you're using our React hooks, it takes care of this requirement.
    */
   triggerOnSubscribe(): void {
     if (this.initialTriggerOnSubscribe) {
@@ -125,9 +125,6 @@ export class HMSReactiveStore<T extends HMSGenericTypes = { sessionStore: Record
     return { onNotification: this.notifications.onNotification };
   }
 
-  /**
-   * @alpha
-   */
   getStats = (): IHMSStatsStoreReadOnly => {
     if (!this.stats) {
       this.stats = new HMSStats(this.store as unknown as IHMSStore, this.sdk);

packages/hms-video-store/src/schema/schema.ts

@@ -46,7 +46,6 @@ export interface HMSStore<T extends HMSGenericTypes = { sessionStore: Record<str
   polls: Record<string, HMSPoll>;
   /** @internal */
   hideLocalPeer: boolean;
-  /** @alpha */
   whiteboards: Record<string, HMSWhiteboard>;
 }
 

packages/hms-video-store/src/sdk/index.ts

@@ -666,6 +666,7 @@ export class HMSSdk implements HMSInterface {
       await this.notifyJoin();
       this.sdkState.isJoinInProgress = false;
       await this.publish(config.settings, previewRole);
+      await this.deviceManager.autoSelectAudioOutput();
     } catch (error) {
       this.analyticsTimer.end(TimedEvent.JOIN);
       this.sdkState.isJoinInProgress = false;

packages/hms-virtual-background/src/constants.ts

@@ -1 +1 @@
-export const EFFECTS_SDK_ASSETS = 'https://assets.100ms.live/effectsdk/3.2.3/';
+export const EFFECTS_SDK_ASSETS = 'https://assets.100ms.live/effectsdk/3.4.3/';

packages/roomkit-react/src/Diagnostics/ConnectivityTest.tsx

@@ -11,7 +11,6 @@ import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
 
 const Regions = {
   in: 'India',
-  eu: 'Europe',
   us: 'United States',
 };
 
@@ -164,6 +163,7 @@ const AudioStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
           <DetailedInfo title="Bitrate Sent" value={formatBytes(stats.bitrateSent, 'b/s')} />
           <DetailedInfo title="Bitrate Received" value={formatBytes(stats.bitrateReceived, 'b/s')} />
           <DetailedInfo title="Round Trip Time" value={`${stats.roundTripTime} ms`} />
+          <DetailedInfo title="Jitter" value={`${stats.jitter * 1000} ms`} />
         </Flex>
       )}
     </ConnectivityTestStepResult>
@@ -182,6 +182,7 @@ const VideoStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
           <DetailedInfo title="Bitrate Sent" value={formatBytes(stats.bitrateSent, 'b/s')} />
           <DetailedInfo title="Bitrate Received" value={formatBytes(stats.bitrateReceived, 'b/s')} />
           <DetailedInfo title="Round Trip Time" value={`${stats.roundTripTime} ms`} />
+          <DetailedInfo title="Jitter" value={`${stats.jitter * 1000} ms`} />
         </Flex>
       )}
     </ConnectivityTestStepResult>

packages/roomkit-react/src/Prebuilt/App.tsx

@@ -1,11 +1,13 @@
 import React, { MutableRefObject, useEffect, useRef } from 'react';
-import { HMSStatsStoreWrapper, HMSStoreWrapper, IHMSNotifications } from '@100mslive/hms-video-store';
 import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
 import {
   HMSActions,
   HMSReactiveStore,
   HMSRoomProvider,
+  HMSStatsStoreWrapper,
+  HMSStoreWrapper,
+  IHMSNotifications,
   selectIsConnectedToRoom,
   useHMSActions,
   useHMSStore,
@@ -207,15 +209,15 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
 
                   return (
                     <HMSThemeProvider
-                      // issue is with stichtes caching the theme using the theme name / class
+                      // issue is with stitches caching the theme using the theme name / class
                       // no updates to the themes are fired if the name is same.
                       // TODO: cache the theme and do deep check to trigger name change in the theme
                       themeType={`${theme.name}-${Date.now()}`}
                       theme={{
-                        //@ts-ignore: Prebuilt theme to match stiches theme
+                        //@ts-ignore: Prebuilt theme to match stitches theme
                         colors: theme.palette,
                         fonts: {
-                          //@ts-ignore: font list to match token types of stiches
+                          //@ts-ignore: font list to match token types of stitches
                           sans: fontFamily,
                         },
                       }}

packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -155,7 +155,7 @@ export const NoiseCancellation = ({
     return (
       <ActionTile.Root
         active={isNoiseCancellationEnabled && isKrispPluginAdded}
-        disable={inProgress}
+        disabled={inProgress}
         onClick={async () => {
           await setNoiseCancellationWithPlugin(!isNoiseCancellationEnabled);
           setOpenOptionsSheet?.(false);