Merge pull request #79 from VapiAI/bryant/add-join-delay-for-mobile-d…

…evices

2.1.8: add join delay for mobile devices

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vapi-ai/web",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "",
   "main": "dist/vapi.js",
   "types": "dist/vapi.d.ts",
@@ -23,7 +23,6 @@
   "homepage": "https://github.com/VapiAI/web#readme",
   "dependencies": {
     "@daily-co/daily-js": "^0.72.1",
-    "@vapi-ai/web": "^2.1.5",
     "events": "^3.3.0"
   },
   "devDependencies": {

vapi.ts

@@ -18,6 +18,49 @@ import {
 } from './api';
 import { client } from './client';
 
+export interface AddMessageMessage {
+  type: 'add-message';
+  message: ChatCompletionMessageParam;
+}
+
+export interface ControlMessages {
+  type: 'control';
+  control: 'mute-assistant' | 'unmute-assistant' | 'say-first-message';
+  videoRecordingStartDelaySeconds?: number;
+}
+
+export interface SayMessage {
+  type: 'say';
+  message: string;
+  endCallAfterSpoken?: boolean;
+}
+
+type VapiClientToServerMessage =
+  | AddMessageMessage
+  | ControlMessages
+  | SayMessage;
+
+type VapiEventNames =
+  | 'call-end'
+  | 'call-start'
+  | 'volume-level'
+  | 'speech-start'
+  | 'speech-end'
+  | 'message'
+  | 'video'
+  | 'error';
+
+type VapiEventListeners = {
+  'call-end': () => void;
+  'call-start': () => void;
+  'volume-level': (volume: number) => void;
+  'speech-start': () => void;
+  'speech-end': () => void;
+  video: (track: MediaStreamTrack) => void;
+  message: (message: any) => void;
+  error: (error: any) => void;
+};
+
 async function startAudioPlayer(
   player: HTMLAudioElement,
   track: MediaStreamTrack,
@@ -64,49 +107,6 @@ function subscribeToTracks(
   });
 }
 
-export interface AddMessageMessage {
-  type: 'add-message';
-  message: ChatCompletionMessageParam;
-}
-
-export interface ControlMessages {
-  type: 'control';
-  control: 'mute-assistant' | 'unmute-assistant' | 'say-first-message';
-  videoRecordingStartDelaySeconds?: number;
-}
-
-export interface SayMessage {
-  type: 'say';
-  message: string;
-  endCallAfterSpoken?: boolean;
-}
-
-type VapiClientToServerMessage =
-  | AddMessageMessage
-  | ControlMessages
-  | SayMessage;
-
-type VapiEventNames =
-  | 'call-end'
-  | 'call-start'
-  | 'volume-level'
-  | 'speech-start'
-  | 'speech-end'
-  | 'message'
-  | 'video'
-  | 'error';
-
-type VapiEventListeners = {
-  'call-end': () => void;
-  'call-start': () => void;
-  'volume-level': (volume: number) => void;
-  'speech-start': () => void;
-  'speech-end': () => void;
-  video: (track: MediaStreamTrack) => void;
-  message: (message: any) => void;
-  error: (error: any) => void;
-};
-
 class VapiEventEmitter extends EventEmitter {
   on<E extends VapiEventNames>(
     event: E,
@@ -171,6 +171,20 @@ export default class Vapi extends VapiEventEmitter {
     this.speakingTimeout = null;
   }
 
+  private isMobileDevice() {
+    if (typeof navigator === 'undefined') {
+      return false;
+    }
+    const userAgent = navigator.userAgent;
+    return /android|iphone|ipad|ipod|iemobile|blackberry|bada/i.test(
+      userAgent.toLowerCase(),
+    );
+  }
+
+  private async sleep(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
   async start(
     assistant?: CreateAssistantDTO | string,
     assistantOverrides?: AssistantOverrides,
@@ -263,6 +277,12 @@ export default class Vapi extends VapiEventEmitter {
         );
       });
 
+      // Allow mobile devices to finish processing the microphone permissions
+      // request before joining the call and playing the assistant's audio
+      if (this.isMobileDevice()) {
+        await this.sleep(1000);
+      }
+
       await this.call.join({
         url: webCall.webCallUrl,
         subscribeToTracksAutomatically: false,