livekit-client 2.7.4 → 2.8.0

package/src/room/Room.ts

@@ -86,6 +86,7 @@ import {
   isBrowserSupported,
   isCloud,
   isReactNative,
+  isSafari,
   isWeb,
   supportsSetSinkId,
   toHttpUrl,
@@ -234,6 +235,21 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
     if (this.options.e2ee) {
       this.setupE2EE();
     }
+
+    if (isWeb()) {
+      const abortController = new AbortController();
+
+      // in order to catch device changes prior to room connection we need to register the event in the constructor
+      navigator.mediaDevices?.addEventListener('devicechange', this.handleDeviceChange, {
+        signal: abortController.signal,
+      });
+
+      if (Room.cleanupRegistry) {
+        Room.cleanupRegistry.register(this, () => {
+          abortController.abort();
+        });
+      }
+    }
   }
 
   /**
@@ -434,6 +450,12 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
     return DeviceManager.getInstance().getDevices(kind, requestPermissions);
   }
 
+  static cleanupRegistry =
+    typeof FinalizationRegistry !== 'undefined' &&
+    new FinalizationRegistry((cleanup: () => void) => {
+      cleanup();
+    });
+
   /**
    * prepareConnection should be called as soon as the page is loaded, in order
    * to speed up the connection attempt. This function will
@@ -769,7 +791,6 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
     }
     if (isWeb()) {
       document.addEventListener('freeze', this.onPageLeave);
-      navigator.mediaDevices?.addEventListener('devicechange', this.handleDeviceChange);
     }
     this.setAndEmitConnectionState(ConnectionState.Connected);
     this.emit(RoomEvent.Connected);
@@ -1097,14 +1118,14 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
    * @param deviceId
    */
   async switchActiveDevice(kind: MediaDeviceKind, deviceId: string, exact: boolean = false) {
-    let deviceHasChanged = false;
     let success = true;
+    let needsUpdateWithoutTracks = false;
     const deviceConstraint = exact ? { exact: deviceId } : deviceId;
     if (kind === 'audioinput') {
+      needsUpdateWithoutTracks = this.localParticipant.audioTrackPublications.size === 0;
       const prevDeviceId =
         this.getActiveDevice(kind) ?? this.options.audioCaptureDefaults!.deviceId;
       this.options.audioCaptureDefaults!.deviceId = deviceConstraint;
-      deviceHasChanged = prevDeviceId !== deviceConstraint;
       const tracks = Array.from(this.localParticipant.audioTrackPublications.values()).filter(
         (track) => track.source === Track.Source.Microphone,
       );
@@ -1117,10 +1138,10 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
         throw e;
       }
     } else if (kind === 'videoinput') {
+      needsUpdateWithoutTracks = this.localParticipant.videoTrackPublications.size === 0;
       const prevDeviceId =
         this.getActiveDevice(kind) ?? this.options.videoCaptureDefaults!.deviceId;
       this.options.videoCaptureDefaults!.deviceId = deviceConstraint;
-      deviceHasChanged = prevDeviceId !== deviceConstraint;
       const tracks = Array.from(this.localParticipant.videoTrackPublications.values()).filter(
         (track) => track.source === Track.Source.Camera,
       );
@@ -1147,7 +1168,6 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
       this.options.audioOutput ??= {};
       const prevDeviceId = this.getActiveDevice(kind) ?? this.options.audioOutput.deviceId;
       this.options.audioOutput.deviceId = deviceId;
-      deviceHasChanged = prevDeviceId !== deviceConstraint;
 
       try {
         if (this.options.webAudioMix) {
@@ -1164,7 +1184,7 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
         throw e;
       }
     }
-    if (deviceHasChanged && success) {
+    if (needsUpdateWithoutTracks) {
       this.localParticipant.activeDeviceMap.set(kind, deviceId);
       this.emit(RoomEvent.ActiveDeviceChanged, kind, deviceId);
     }
@@ -1654,13 +1674,54 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
   };
 
   private handleDeviceChange = async () => {
+    const previousDevices = DeviceManager.getInstance().previousDevices;
     // check for available devices, but don't request permissions in order to avoid prompts for kinds that haven't been used before
     const availableDevices = await DeviceManager.getInstance().getDevices(undefined, false);
+    const browser = getBrowser();
+    if (browser?.name === 'Chrome' && browser.os !== 'iOS') {
+      for (let availableDevice of availableDevices) {
+        const previousDevice = previousDevices.find(
+          (info) => info.deviceId === availableDevice.deviceId,
+        );
+        if (
+          previousDevice &&
+          previousDevice.label !== '' &&
+          previousDevice.kind === availableDevice.kind &&
+          previousDevice.label !== availableDevice.label
+        ) {
+          // label has changed on device the same deviceId, indicating that the default device has changed on the OS level
+          if (this.getActiveDevice(availableDevice.kind) === 'default') {
+            // emit an active device change event only if the selected output device is actually on `default`
+            this.emit(
+              RoomEvent.ActiveDeviceChanged,
+              availableDevice.kind,
+              availableDevice.deviceId,
+            );
+          }
+        }
+      }
+    }
+
     // inputs are automatically handled via TrackEvent.Ended causing a TrackEvent.Restarted. Here we only need to worry about audiooutputs changing
-    const kinds: MediaDeviceKind[] = ['audiooutput'];
+    const kinds: MediaDeviceKind[] = ['audiooutput', 'audioinput', 'videoinput'];
     for (let kind of kinds) {
-      // switch to first available device if previously active device is not available any more
       const devicesOfKind = availableDevices.filter((d) => d.kind === kind);
+      const activeDevice = this.getActiveDevice(kind);
+
+      if (activeDevice === previousDevices.filter((info) => info.kind === kind)[0]?.deviceId) {
+        // in  Safari the first device is always the default, so we assume a user on the default device would like to switch to the default once it changes
+        // FF doesn't emit an event when the default device changes, so we perform the same best effort and switch to the new device once connected and if it's the first in the array
+        if (devicesOfKind.length > 0 && devicesOfKind[0]?.deviceId !== activeDevice) {
+          await this.switchActiveDevice(kind, devicesOfKind[0].deviceId);
+          continue;
+        }
+      }
+
+      if ((kind === 'audioinput' && !isSafari()) || kind === 'videoinput') {
+        // airpods on Safari need special handling for audioinput as the track doesn't end as soon as you take them out
+        continue;
+      }
+      // switch to first available device if previously active device is not available any more
       if (
         devicesOfKind.length > 0 &&
         !devicesOfKind.find((deviceInfo) => deviceInfo.deviceId === this.getActiveDevice(kind))
@@ -2013,7 +2074,7 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
         this.emit(RoomEvent.LocalAudioSilenceDetected, pub);
       }
     }
-    const deviceId = await pub.track?.getDeviceId();
+    const deviceId = await pub.track?.getDeviceId(false);
     const deviceKind = sourceToKind(pub.source);
     if (
       deviceKind &&

package/src/room/defaults.ts

@@ -22,6 +22,7 @@ export const publishDefaults: TrackPublishDefaults = {
 } as const;
 
 export const audioDefaults: AudioCaptureOptions = {
+  deviceId: 'default',
   autoGainControl: true,
   echoCancellation: true,
   noiseSuppression: true,
@@ -29,6 +30,7 @@ export const audioDefaults: AudioCaptureOptions = {
 };
 
 export const videoDefaults: VideoCaptureOptions = {
+  deviceId: 'default',
   resolution: VideoPresets.h720.resolution,
 };
 

package/src/room/participant/LocalParticipant.ts

@@ -154,7 +154,11 @@ export default class LocalParticipant extends Participant {
     this.engine = engine;
     this.roomOptions = options;
     this.setupEngine(engine);
-    this.activeDeviceMap = new Map();
+    this.activeDeviceMap = new Map([
+      ['audioinput', 'default'],
+      ['videoinput', 'default'],
+      ['audiooutput', 'default'],
+    ]);
     this.pendingSignalRequests = new Map();
   }
 
@@ -486,6 +490,16 @@ export default class LocalParticipant extends Participant {
             default:
               throw new TrackInvalidError(source);
           }
+        } catch (e: unknown) {
+          localTracks?.forEach((tr) => {
+            tr.stop();
+          });
+          if (e instanceof Error) {
+            this.emit(ParticipantEvent.MediaDevicesError, e);
+          }
+          throw e;
+        }
+        try {
           const publishPromises: Array<Promise<LocalTrackPublication>> = [];
           for (const localTrack of localTracks) {
             this.log.info('publishing track', {
@@ -502,9 +516,6 @@ export default class LocalParticipant extends Participant {
           localTracks?.forEach((tr) => {
             tr.stop();
           });
-          if (e instanceof Error && !(e instanceof TrackInvalidError)) {
-            this.emit(ParticipantEvent.MediaDevicesError, e);
-          }
           throw e;
         } finally {
           this.pendingPublishing.delete(source);

package/src/room/participant/publishUtils.ts

@@ -125,6 +125,8 @@ export function computeVideoEncodings(
     log.debug('using video encoding', videoEncoding);
   }
 
+  const sourceFramerate = videoEncoding.maxFramerate;
+
   const original = new VideoPreset(
     width,
     height,
@@ -216,10 +218,10 @@ export function computeVideoEncodings(
     //      based on other conditions.
     const size = Math.max(width, height);
     if (size >= 960 && midPreset) {
-      return encodingsFromPresets(width, height, [lowPreset, midPreset, original]);
+      return encodingsFromPresets(width, height, [lowPreset, midPreset, original], sourceFramerate);
     }
     if (size >= 480) {
-      return encodingsFromPresets(width, height, [lowPreset, original]);
+      return encodingsFromPresets(width, height, [lowPreset, original], sourceFramerate);
     }
   }
   return encodingsFromPresets(width, height, [original]);
@@ -344,6 +346,7 @@ function encodingsFromPresets(
   width: number,
   height: number,
   presets: VideoPreset[],
+  sourceFramerate?: number | undefined,
 ): RTCRtpEncodingParameters[] {
   const encodings: RTCRtpEncodingParameters[] = [];
   presets.forEach((preset, idx) => {
@@ -352,13 +355,20 @@ function encodingsFromPresets(
     }
     const size = Math.min(width, height);
     const rid = videoRids[idx];
+
     const encoding: RTCRtpEncodingParameters = {
       rid,
       scaleResolutionDownBy: Math.max(1, size / Math.min(preset.width, preset.height)),
       maxBitrate: preset.encoding.maxBitrate,
     };
-    if (preset.encoding.maxFramerate) {
-      encoding.maxFramerate = preset.encoding.maxFramerate;
+    // ensure that the sourceFramerate is the highest framerate applied across all layers so that the
+    // original encoding doesn't get bumped unintentionally by any of the other layers
+    const maxFramerate =
+      sourceFramerate && preset.encoding.maxFramerate
+        ? Math.min(sourceFramerate, preset.encoding.maxFramerate)
+        : preset.encoding.maxFramerate;
+    if (maxFramerate) {
+      encoding.maxFramerate = maxFramerate;
     }
     const canSetPriority = isFireFox() || idx === 0;
     if (preset.encoding.priority && canSetPriority) {

package/src/room/track/LocalAudioTrack.ts

@@ -45,22 +45,6 @@ export default class LocalAudioTrack extends LocalTrack<Track.Kind.Audio> {
     this.checkForSilence();
   }
 
-  async setDeviceId(deviceId: ConstrainDOMString): Promise<boolean> {
-    if (
-      this._constraints.deviceId === deviceId &&
-      this._mediaStreamTrack.getSettings().deviceId === unwrapConstraint(deviceId)
-    ) {
-      return true;
-    }
-    this._constraints.deviceId = deviceId;
-    if (!this.isMuted) {
-      await this.restartTrack();
-    }
-    return (
-      this.isMuted || unwrapConstraint(deviceId) === this._mediaStreamTrack.getSettings().deviceId
-    );
-  }
-
   async mute(): Promise<typeof this> {
     const unlock = await this.muteLock.lock();
     try {

package/src/room/track/LocalTrack.ts

@@ -5,7 +5,7 @@ import DeviceManager from '../DeviceManager';
 import { DeviceUnsupportedError, TrackInvalidError } from '../errors';
 import { TrackEvent } from '../events';
 import type { LoggerOptions } from '../types';
-import { compareVersions, isMobile, sleep } from '../utils';
+import { compareVersions, isMobile, sleep, unwrapConstraint } from '../utils';
 import { Track, attachToElement, detachTrack } from './Track';
 import type { VideoCodec } from './options';
 import type { TrackProcessor } from './processor/types';
@@ -221,6 +221,28 @@ export default abstract class LocalTrack<
     throw new TrackInvalidError('unable to get track dimensions after timeout');
   }
 
+  async setDeviceId(deviceId: ConstrainDOMString): Promise<boolean> {
+    if (
+      this._constraints.deviceId === deviceId &&
+      this._mediaStreamTrack.getSettings().deviceId === unwrapConstraint(deviceId)
+    ) {
+      return true;
+    }
+    this._constraints.deviceId = deviceId;
+
+    // when track is muted, underlying media stream track is stopped and
+    // will be restarted later
+    if (this.isMuted) {
+      return true;
+    }
+
+    await this.restartTrack();
+
+    return unwrapConstraint(deviceId) === this._mediaStreamTrack.getSettings().deviceId;
+  }
+
+  abstract restartTrack(constraints?: unknown): Promise<void>;
+
   /**
    * @returns DeviceID of the device that is currently being used for this track
    */

package/src/room/track/LocalVideoTrack.ts

@@ -11,7 +11,7 @@ import { ScalabilityMode } from '../participant/publishUtils';
 import type { VideoSenderStats } from '../stats';
 import { computeBitrate, monitorFrequency } from '../stats';
 import type { LoggerOptions } from '../types';
-import { isFireFox, isMobile, isWeb, unwrapConstraint } from '../utils';
+import { isFireFox, isMobile, isWeb } from '../utils';
 import LocalTrack from './LocalTrack';
 import { Track, VideoQuality } from './Track';
 import type { VideoCaptureOptions, VideoCodec } from './options';
@@ -241,24 +241,6 @@ export default class LocalVideoTrack extends LocalTrack<Track.Kind.Video> {
     this.setPublishingLayers(qualities);
   }
 
-  async setDeviceId(deviceId: ConstrainDOMString): Promise<boolean> {
-    if (
-      this._constraints.deviceId === deviceId &&
-      this._mediaStreamTrack.getSettings().deviceId === unwrapConstraint(deviceId)
-    ) {
-      return true;
-    }
-    this._constraints.deviceId = deviceId;
-    // when video is muted, underlying media stream track is stopped and
-    // will be restarted later
-    if (!this.isMuted) {
-      await this.restartTrack();
-    }
-    return (
-      this.isMuted || unwrapConstraint(deviceId) === this._mediaStreamTrack.getSettings().deviceId
-    );
-  }
-
   async restartTrack(options?: VideoCaptureOptions) {
     let constraints: MediaTrackConstraints | undefined;
     if (options) {

package/src/room/track/create.ts

@@ -32,8 +32,8 @@ export async function createLocalTracks(
 ): Promise<Array<LocalTrack>> {
   // set default options to true
   options ??= {};
-  options.audio ??= true;
-  options.video ??= true;
+  options.audio ??= { deviceId: 'default' };
+  options.video ??= { deviceId: 'default' };
 
   const { audioProcessor, videoProcessor } = extractProcessorsFromOptions(options);
   const opts = mergeDefaultOptions(options, audioDefaults, videoDefaults);

package/src/room/track/utils.test.ts

@@ -1,17 +1,9 @@
 import { describe, expect, it } from 'vitest';
-import { AudioCaptureOptions, VideoCaptureOptions, VideoPresets } from './options';
+import { audioDefaults, videoDefaults } from '../defaults';
+import { type AudioCaptureOptions, VideoPresets } from './options';
 import { constraintsForOptions, diffAttributes, mergeDefaultOptions } from './utils';
 
 describe('mergeDefaultOptions', () => {
-  const audioDefaults: AudioCaptureOptions = {
-    autoGainControl: true,
-    channelCount: 2,
-  };
-  const videoDefaults: VideoCaptureOptions = {
-    deviceId: 'video123',
-    resolution: VideoPresets.h1080.resolution,
-  };
-
   it('does not enable undefined options', () => {
     const opts = mergeDefaultOptions(undefined, audioDefaults, videoDefaults);
     expect(opts.audio).toEqual(undefined);
@@ -69,7 +61,7 @@ describe('constraintsForOptions', () => {
     const constraints = constraintsForOptions({
       audio: true,
     });
-    expect(constraints.audio).toEqual(true);
+    expect(constraints.audio).toEqual({ deviceId: audioDefaults.deviceId });
     expect(constraints.video).toEqual(false);
   });
 
@@ -81,7 +73,7 @@ describe('constraintsForOptions', () => {
       },
     });
     const audioOpts = constraints.audio as MediaTrackConstraints;
-    expect(Object.keys(audioOpts)).toEqual(['noiseSuppression', 'echoCancellation']);
+    expect(Object.keys(audioOpts)).toEqual(['noiseSuppression', 'echoCancellation', 'deviceId']);
     expect(audioOpts.noiseSuppression).toEqual(true);
     expect(audioOpts.echoCancellation).toEqual(false);
   });

package/src/room/track/utils.ts

@@ -31,6 +31,7 @@ export function mergeDefaultOptions(
       clonedOptions.audio as Record<string, unknown>,
       audioDefaults as Record<string, unknown>,
     );
+    clonedOptions.audio.deviceId ??= 'default';
     if (audioProcessor) {
       clonedOptions.audio.processor = audioProcessor;
     }
@@ -40,6 +41,7 @@ export function mergeDefaultOptions(
       clonedOptions.video as Record<string, unknown>,
       videoDefaults as Record<string, unknown>,
     );
+    clonedOptions.video.deviceId ??= 'default';
     if (videoProcessor) {
       clonedOptions.video.processor = videoProcessor;
     }
@@ -77,8 +79,9 @@ export function constraintsForOptions(options: CreateLocalTracksOptions): MediaS
         }
       });
       constraints.video = videoOptions;
+      constraints.video.deviceId ??= 'default';
     } else {
-      constraints.video = options.video;
+      constraints.video = options.video ? { deviceId: 'default' } : false;
     }
   } else {
     constraints.video = false;
@@ -87,8 +90,9 @@ export function constraintsForOptions(options: CreateLocalTracksOptions): MediaS
   if (options.audio) {
     if (typeof options.audio === 'object') {
       constraints.audio = options.audio;
+      constraints.audio.deviceId ??= 'default';
     } else {
-      constraints.audio = true;
+      constraints.audio = { deviceId: 'default' };
     }
   } else {
     constraints.audio = false;