@vapi-ai/web 2.6.3 → 2.7.1

package/vapi.ts

@@ -236,10 +236,18 @@ type WebCall = {
   artifactPlan?: { videoRecordingEnabled?: boolean };
   /**
    * The Vapi WebCall assistant. This is the assistant of the call.
-   * 
+   *
    * call.assistant
    */
   assistant?: { voice?: { provider?: string } };
+  /**
+   * The Vapi WebCall transport. When video recording is enabled, the server
+   * sets `callToken` to a Daily meeting token that auto-starts the cloud
+   * recording on join.
+   *
+   * call.transport
+   */
+  transport?: { callToken?: string };
 }
 
 async function startAudioPlayer(
@@ -415,6 +423,36 @@ export default class Vapi extends VapiEventEmitter {
     });
   }
 
+  /**
+   * Starts Daily's local (microphone) audio level observer.
+   *
+   * Only runs when something is listening for 'local-volume-level'. The observer
+   * costs an AudioContext plus an AudioWorklet for the lifetime of the call and
+   * nothing else in the SDK reads the level, so starting it unconditionally
+   * charges every consumer for a feature almost none of them use. Listeners
+   * attached after the call is under way should call the public
+   * `startLocalAudioLevelObserver()`.
+   *
+   * Must run after the noise-cancellation processor has settled. Krisp replaces
+   * the microphone track, Daily reacts to any local track change by closing the
+   * AudioContext its in-flight `audioWorklet.addModule()` is still loading into,
+   * and Chrome and Firefox reject that load with "AbortError: Unable to load a
+   * worklet's module". Daily answers by stopping the observer for the rest of
+   * the call, so losing this race costs the feature, not just console noise.
+   * Tracked upstream at https://github.com/daily-co/daily-js/issues/317.
+   */
+  private async maybeStartLocalAudioLevelObserver(): Promise<void> {
+    if (!this.call || this.listenerCount('local-volume-level') === 0) {
+      return;
+    }
+
+    try {
+      await this.call.startLocalAudioLevelObserver(100);
+    } catch (error) {
+      this.emit('local-audio-level-observer-error', serializeError(error));
+    }
+  }
+
   async start(
     assistant?: CreateAssistantDTO | string,
     assistantOverrides?: AssistantOverrides,
@@ -512,6 +550,14 @@ export default class Vapi extends VapiEventEmitter {
 
       const isVideoEnabled = webCall?.assistant?.voice?.provider === 'tavus';
 
+      // When video recording is enabled, the server sends a Daily meeting
+      // token that auto-starts the cloud recording on join — more reliable
+      // than calling startRecording() from a weak client network. Older
+      // servers don't send one; then the client starts the recording itself.
+      const callToken = (
+        webCall?.transport as { callToken?: string } | undefined
+      )?.callToken;
+
       // Stage 2: Create Daily call object
       this.emit('call-start-progress', {
         stage: 'daily-call-object-creation',
@@ -573,6 +619,8 @@ export default class Vapi extends VapiEventEmitter {
           this.hasEmittedCallEndedStatus = true;
         }
         if (isVideoRecordingEnabled) {
+          // When using a token, the recording doesn't stop automatically on
+          // leave, so still stop it manually to preserve existing behavior.
           this.call?.stopRecording();
         }
         this.cleanup().catch(console.error);
@@ -651,6 +699,28 @@ export default class Vapi extends VapiEventEmitter {
         this.detachAudioPlayer(e.participant.session_id);
       });
 
+      // Registered before join(): a token-auto-started recording can begin
+      // while join() is still in flight, so a listener added after join
+      // could miss the event.
+      let recordingRequestedTime = 0;
+      if (isVideoRecordingEnabled) {
+        this.call.once('recording-started', () => {
+          const totalRecordingDelay = (new Date().getTime() - recordingRequestedTime) / 1000;
+          this.emit('call-start-progress', {
+            stage: 'video-recording-started',
+            status: 'completed',
+            timestamp: new Date().toISOString(),
+            metadata: { delaySeconds: totalRecordingDelay }
+          });
+
+          this.send({
+            type: 'control',
+            control: 'say-first-message',
+            videoRecordingStartDelaySeconds: totalRecordingDelay,
+          });
+        });
+      }
+
       // Stage 3: Mobile device handling and permissions
       const isMobile = this.isMobileDevice();
       this.emit('call-start-progress', {
@@ -688,11 +758,15 @@ export default class Vapi extends VapiEventEmitter {
       });
       
       const joinStartTime = Date.now();
-      
+      recordingRequestedTime = joinStartTime;
+
       try {
         await this.call.join({
           // @ts-expect-error This exists
           url: webCall.webCallUrl,
+          // daily-js rejects a `token` key that is present but undefined, so
+          // only include it when the server actually sent one.
+          ...(callToken ? { token: callToken } : {}),
           subscribeToTracksAutomatically: false,
         });
         
@@ -724,25 +798,27 @@ export default class Vapi extends VapiEventEmitter {
       }
 
       // Stage 5: Video recording setup (if enabled)
-      if (isVideoRecordingEnabled) {
+      if (isVideoRecordingEnabled && callToken) {
+        // The meeting token auto-started the recording at join, so there is
+        // nothing to request from the client.
+        this.emit('call-start-progress', {
+          stage: 'video-recording-setup',
+          status: 'completed',
+          timestamp: new Date().toISOString(),
+          metadata: { action: 'auto-started-via-meeting-token' }
+        });
+      } else if (isVideoRecordingEnabled) {
         this.emit('call-start-progress', {
           stage: 'video-recording-setup',
           status: 'started',
           timestamp: new Date().toISOString()
         });
-        
-        const recordingRequestedTime = new Date().getTime();
+
         const recordingStartTime = Date.now();
 
         try {
-          this.call.startRecording({
-            width: 1280,
-            height: 720,
-            backgroundColor: '#FF1F2D3D',
-            layout: {
-              preset: 'default',
-            },
-          });
+          recordingRequestedTime = new Date().getTime();
+          this.startRecording();
 
           const recordingSetupDuration = Date.now() - recordingStartTime;
           this.emit('call-start-progress', {
@@ -751,22 +827,6 @@ export default class Vapi extends VapiEventEmitter {
             duration: recordingSetupDuration,
             timestamp: new Date().toISOString()
           });
-
-          this.call.on('recording-started', () => {
-            const totalRecordingDelay = (new Date().getTime() - recordingRequestedTime) / 1000;
-            this.emit('call-start-progress', {
-              stage: 'video-recording-started',
-              status: 'completed',
-              timestamp: new Date().toISOString(),
-              metadata: { delaySeconds: totalRecordingDelay }
-            });
-            
-            this.send({
-              type: 'control',
-              control: 'say-first-message',
-              videoRecordingStartDelaySeconds: totalRecordingDelay,
-            });
-          });
         } catch (error) {
           const recordingSetupDuration = Date.now() - recordingStartTime;
           const serializedError = serializeError(error);
@@ -805,7 +865,6 @@ export default class Vapi extends VapiEventEmitter {
       
       try {
         this.call.startRemoteParticipantsAudioLevelObserver(100);
-        this.call.startLocalAudioLevelObserver(100);
         const audioObserverDuration = Date.now() - audioObserverStartTime;
         this.emit('call-start-progress', {
           stage: 'audio-observer-setup',
@@ -875,17 +934,28 @@ export default class Vapi extends VapiEventEmitter {
       const audioProcessingStartTime = Date.now();
       
       try {
-        this.call
-          .updateInputSettings({
-            audio: {
-              processor: {
-                type: 'noise-cancellation',
-              },
+        const audioProcessingUpdate = this.call.updateInputSettings({
+          audio: {
+            processor: {
+              type: 'noise-cancellation',
             },
-          })
-          .catch((error) => {
-            this.emitAudioProcessingError('audio-processing-setup', error);
-          });
+          },
+        });
+
+        audioProcessingUpdate.catch((error) => {
+          this.emitAudioProcessingError('audio-processing-setup', error);
+        });
+
+        // The observer waits for this update rather than starting alongside the
+        // remote one above, so that Krisp has already swapped the microphone
+        // track. See maybeStartLocalAudioLevelObserver().
+        //
+        // A separate chain, not another link on the one above: EventEmitter
+        // rethrows out of emit('error') when a consumer registered no 'error'
+        // listener, and whether the observer starts must not hinge on that.
+        audioProcessingUpdate
+          .catch(() => {})
+          .then(() => this.maybeStartLocalAudioLevelObserver());
 
         const audioProcessingDuration = Date.now() - audioProcessingStartTime;
         this.emit('call-start-progress', {
@@ -1350,6 +1420,37 @@ export default class Vapi extends VapiEventEmitter {
     this.call?.stopScreenShare();
   }
 
+  /**
+   * Starts (or retries) a cloud recording of the call.
+   *
+   * Recording start is asynchronous: success is signaled by the
+   * 'recording-started' event and failure by 'recording-error'. Daily does not
+   * retry automatically, so if you receive 'recording-error' (e.g. the
+   * recording start timed out), you can call this method again a few seconds
+   * later to retry.
+   */
+  public startRecording(): void {
+    if (!this.call) {
+      throw new Error('Call object is not available.');
+    }
+    this.call.startRecording({
+      width: 1280,
+      height: 720,
+      backgroundColor: '#FF1F2D3D',
+      layout: {
+        preset: 'default',
+      },
+    });
+  }
+
+  /**
+   * Stops the in-progress recording. Completion is signaled by the
+   * 'recording-stopped' event.
+   */
+  public stopRecording(): void {
+    this.call?.stopRecording();
+  }
+
   /**
    * Reconnects to an active call.
    * 
@@ -1399,6 +1500,11 @@ export default class Vapi extends VapiEventEmitter {
       const isVideoRecordingEnabled = webCall?.artifactPlan?.videoRecordingEnabled ?? false;
       const isVideoEnabled = webCall?.assistant?.voice?.provider === 'tavus';
 
+      // Same auto-start token as in start(). Rejoining with it while the
+      // recording is still running is safe; if the recording stopped when the
+      // user left, the token starts a new one.
+      const callToken = webCall?.transport?.callToken;
+
       // Stage 1: Create Daily call object
       this.emit('call-start-progress', {
         stage: 'daily-call-object-creation',
@@ -1441,6 +1547,8 @@ export default class Vapi extends VapiEventEmitter {
           this.hasEmittedCallEndedStatus = true;
         }
         if (isVideoRecordingEnabled) {
+          // When using a token, the recording doesn't stop automatically on
+          // leave, so still stop it manually to preserve existing behavior.
           this.call?.stopRecording();
         }
         this.cleanup().catch(console.error);
@@ -1552,6 +1660,28 @@ export default class Vapi extends VapiEventEmitter {
         }
       });
 
+      // Registered before join(): a token-auto-started recording can begin
+      // while join() is still in flight, so a listener added after join
+      // could miss the event.
+      let recordingRequestedTime = 0;
+      if (isVideoRecordingEnabled) {
+        this.call.once('recording-started', () => {
+          const totalRecordingDelay = (new Date().getTime() - recordingRequestedTime) / 1000;
+          this.emit('call-start-progress', {
+            stage: 'video-recording-started',
+            status: 'completed',
+            timestamp: new Date().toISOString(),
+            metadata: { delaySeconds: totalRecordingDelay }
+          });
+
+          this.send({
+            type: 'control',
+            control: 'say-first-message',
+            videoRecordingStartDelaySeconds: totalRecordingDelay,
+          });
+        });
+      }
+
       // Stage 2: Mobile device handling and permissions
       const isMobile = this.isMobileDevice();
       this.emit('call-start-progress', {
@@ -1589,8 +1719,12 @@ export default class Vapi extends VapiEventEmitter {
       });
       
       const joinStartTime = Date.now();
+      recordingRequestedTime = joinStartTime;
       await this.call.join({
         url: webCall.webCallUrl,
+        // daily-js rejects a `token` key that is present but undefined, so
+        // only include it when the server actually sent one.
+        ...(callToken ? { token: callToken } : {}),
         subscribeToTracksAutomatically: false,
       });
       
@@ -1603,25 +1737,27 @@ export default class Vapi extends VapiEventEmitter {
       });
 
       // Stage 4: Video recording setup (if enabled)
-      if (isVideoRecordingEnabled) {
+      if (isVideoRecordingEnabled && callToken) {
+        // The meeting token auto-started the recording at join, so there is
+        // nothing to request from the client.
+        this.emit('call-start-progress', {
+          stage: 'video-recording-setup',
+          status: 'completed',
+          timestamp: new Date().toISOString(),
+          metadata: { action: 'auto-started-via-meeting-token' }
+        });
+      } else if (isVideoRecordingEnabled) {
         this.emit('call-start-progress', {
           stage: 'video-recording-setup',
           status: 'started',
           timestamp: new Date().toISOString()
         });
-        
+
         const recordingStartTime = Date.now();
-        const recordingRequestedTime = new Date().getTime();
 
         try {
-          this.call.startRecording({
-            width: 1280,
-            height: 720,
-            backgroundColor: '#FF1F2D3D',
-            layout: {
-              preset: 'default',
-            },
-          });
+          recordingRequestedTime = new Date().getTime();
+          this.startRecording();
 
           const recordingSetupDuration = Date.now() - recordingStartTime;
           this.emit('call-start-progress', {
@@ -1630,22 +1766,6 @@ export default class Vapi extends VapiEventEmitter {
             duration: recordingSetupDuration,
             timestamp: new Date().toISOString()
           });
-
-          this.call.on('recording-started', () => {
-            const totalRecordingDelay = (new Date().getTime() - recordingRequestedTime) / 1000;
-            this.emit('call-start-progress', {
-              stage: 'video-recording-started',
-              status: 'completed',
-              timestamp: new Date().toISOString(),
-              metadata: { delaySeconds: totalRecordingDelay }
-            });
-            
-            this.send({
-              type: 'control',
-              control: 'say-first-message',
-              videoRecordingStartDelaySeconds: totalRecordingDelay,
-            });
-          });
         } catch (error) {
           const recordingSetupDuration = Date.now() - recordingStartTime;
           const serializedError = serializeError(error);
@@ -1678,7 +1798,6 @@ export default class Vapi extends VapiEventEmitter {
       
       try {
         this.call.startRemoteParticipantsAudioLevelObserver(100);
-        this.call.startLocalAudioLevelObserver(100);
         const audioObserverDuration = Date.now() - audioObserverStartTime;
         this.emit('call-start-progress', {
           stage: 'audio-observer-setup',
@@ -1709,17 +1828,28 @@ export default class Vapi extends VapiEventEmitter {
       const audioProcessingStartTime = Date.now();
       
       try {
-        this.call
-          .updateInputSettings({
-            audio: {
-              processor: {
-                type: 'noise-cancellation',
-              },
+        const audioProcessingUpdate = this.call.updateInputSettings({
+          audio: {
+            processor: {
+              type: 'noise-cancellation',
             },
-          })
-          .catch((error) => {
-            this.emitAudioProcessingError('audio-processing-setup', error);
-          });
+          },
+        });
+
+        audioProcessingUpdate.catch((error) => {
+          this.emitAudioProcessingError('audio-processing-setup', error);
+        });
+
+        // The observer waits for this update rather than starting alongside the
+        // remote one above, so that Krisp has already swapped the microphone
+        // track. See maybeStartLocalAudioLevelObserver().
+        //
+        // A separate chain, not another link on the one above: EventEmitter
+        // rethrows out of emit('error') when a consumer registered no 'error'
+        // listener, and whether the observer starts must not hinge on that.
+        audioProcessingUpdate
+          .catch(() => {})
+          .then(() => this.maybeStartLocalAudioLevelObserver());
 
         const audioProcessingDuration = Date.now() - audioProcessingStartTime;
         this.emit('call-start-progress', {