chore: bump version to 2.1.5 and enhance device setup handling in LayercodeClient

- Updated version in package.json to 2.1.5.
- Added a device setup listener to ensure the recorder is initialized before proceeding, preventing race conditions.
- Implemented a timeout mechanism to avoid hanging during device setup.

Author: stukennedy

package.json

@@ -2,7 +2,7 @@
   "author": "Layercode",
   "license": "MIT",
   "name": "@layercode/js-sdk",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Layercode JavaScript SDK for browser usage",
   "type": "module",
   "main": "dist/layercode-js-sdk.esm.js",
@@ -48,4 +48,4 @@
     "@ricky0123/vad-web": "^0.0.24",
     "onnxruntime-web": "^1.21.1"
   }
-}
+}

src/index.ts

@@ -95,6 +95,7 @@ interface ILayercodeClient {
   triggerUserTurnFinished(): Promise<void>;
   getStream(): MediaStream | null;
   setInputDevice(deviceId: string): Promise<void>;
+  listDevices(): Promise<Array<MediaDeviceInfo & { default: boolean }>>;
   mute(): void;
   unmute(): void;
   readonly status: string;
@@ -126,6 +127,8 @@ interface LayercodeClientOptions {
   onError?: (error: Error) => void;
   /** Callback when a device is switched */
   onDeviceSwitched?: (deviceId: string) => void;
+  /** Callback when available devices change (devices added/removed) */
+  onDevicesChanged?: (devices: Array<MediaDeviceInfo & { default: boolean }>) => void;
   /** Callback for data messages */
   onDataMessage?: (message: any) => void;
   /** Callback for other messages (excluding audio msgs) */
@@ -192,6 +195,7 @@ class LayercodeClient implements ILayercodeClient {
       onDisconnect: options.onDisconnect ?? NOOP,
       onError: options.onError ?? NOOP,
       onDeviceSwitched: options.onDeviceSwitched ?? NOOP,
+      onDevicesChanged: options.onDevicesChanged ?? NOOP,
       onDataMessage: options.onDataMessage ?? NOOP,
       onMessage: options.onMessage ?? NOOP,
       onUserAmplitudeChange: options.onUserAmplitudeChange ?? NOOP,
@@ -562,7 +566,6 @@ class LayercodeClient implements ILayercodeClient {
       // Reset turn tracking for clean start
       this._resetTurnTracking();
       this._stopAmplitudeMonitoring();
-      this._setupDeviceChangeListener();
 
       // Get conversation key from server
       let authorizeSessionRequestBody = {
@@ -588,6 +591,9 @@ class LayercodeClient implements ILayercodeClient {
       this.conversationId = authorizeSessionResponseBody.conversation_id; // Save the conversation_id for use in future reconnects
       this.options.conversationId = this.conversationId;
 
+      await this.wavRecorder.requestPermission();
+      this._setupDeviceChangeListener();
+
       // Connect WebSocket
       this.ws = new WebSocket(
         `${this._websocketUrl}?${new URLSearchParams({
@@ -645,7 +651,6 @@ class LayercodeClient implements ILayercodeClient {
       console.error('Error connecting to Layercode agent:', error);
       this._setStatus('error');
       this.options.onError(error instanceof Error ? error : new Error(String(error)));
-      throw error;
     }
   }
 
@@ -679,6 +684,14 @@ class LayercodeClient implements ILayercodeClient {
     return this.wavRecorder.getStream();
   }
 
+  /**
+   * List all available audio input devices
+   * @returns {Promise<Array<MediaDeviceInfo & {default: boolean}>>}
+   */
+  async listDevices(): Promise<Array<MediaDeviceInfo & { default: boolean }>> {
+    return this.wavRecorder.listDevices();
+  }
+
   /**
    * Switches the input device for the microphone and restarts recording
    * @param {string} deviceId - The deviceId of the new microphone
@@ -778,6 +791,9 @@ class LayercodeClient implements ILayercodeClient {
     if (!this.deviceChangeListener) {
       this.deviceChangeListener = async (devices: any[]) => {
         try {
+          // Notify user that devices have changed
+          this.options.onDevicesChanged(devices);
+
           const defaultDevice = devices.find((device: any) => device.default);
           const usingDefaultDevice = this.useSystemDefaultDevice;
           const previousDefaultDeviceKey = this.lastKnownSystemDefaultDeviceKey;

src/wavtools/lib/wav_recorder.js

@@ -251,54 +251,14 @@ export class WavRecorder {
    * @returns {Promise<true>}
    */
   async requestPermission() {
-    const ensureUserMediaAccess = async () => {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        audio: true,
-      });
-      const tracks = stream.getTracks();
-      tracks.forEach((track) => track.stop());
-    };
-
-    const permissionsUnsupported =
-      !navigator.permissions ||
-      typeof navigator.permissions.query !== 'function';
-
-    if (permissionsUnsupported) {
-      try {
-        await ensureUserMediaAccess();
-      } catch (error) {
-        window.alert('You must grant microphone access to use this feature.');
-        throw error;
-      }
-      return true;
-    }
-
     try {
-      const permissionStatus = await navigator.permissions.query({
-        name: 'microphone',
+      console.log('ensureUserMediaAccess');
+      await navigator.mediaDevices.getUserMedia({
+        audio: true,
       });
-
-      if (permissionStatus.state === 'denied') {
-        window.alert('You must grant microphone access to use this feature.');
-        return true;
-      }
-
-      if (permissionStatus.state === 'prompt') {
-        try {
-          await ensureUserMediaAccess();
-        } catch (error) {
-          window.alert('You must grant microphone access to use this feature.');
-          throw error;
-        }
-      }
-    } catch (error) {
-      // Firefox rejects permissions.query with NotSupportedError – fall back to getUserMedia directly
-      try {
-        await ensureUserMediaAccess();
-      } catch (fallbackError) {
-        window.alert('You must grant microphone access to use this feature.');
-        throw fallbackError;
-      }
+    } catch (fallbackError) {
+      window.alert('You must grant microphone access to use this feature.');
+      throw fallbackError;
     }
     return true;
   }
@@ -315,10 +275,9 @@ export class WavRecorder {
       throw new Error('Could not request user devices');
     }
     await this.requestPermission();
+
     const devices = await navigator.mediaDevices.enumerateDevices();
-    const audioDevices = devices.filter(
-      (device) => device.kind === 'audioinput',
-    );
+    const audioDevices = devices.filter((device) => device.kind === 'audioinput');
     const defaultDeviceIndex = audioDevices.findIndex(
       (device) => device.deviceId === 'default',
     );