@vapi-ai/web 2.6.3 → 2.7.0

package/dist/vapi.d.ts

@@ -109,6 +109,16 @@ type WebCall = {
             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;
+    };
 };
 declare class VapiEventEmitter extends EventEmitter {
     on<E extends VapiEventNames>(event: E, listener: VapiEventListeners[E]): this;
@@ -256,6 +266,21 @@ export default class Vapi extends VapiEventEmitter {
     isLocalAudioLevelObserverRunning(): boolean;
     startScreenSharing(displayMediaOptions?: DisplayMediaStreamOptions, screenVideoSendSettings?: DailyVideoSendSettings): void;
     stopScreenSharing(): void;
+    /**
+     * 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.
+     */
+    startRecording(): void;
+    /**
+     * Stops the in-progress recording. Completion is signaled by the
+     * 'recording-stopped' event.
+     */
+    stopRecording(): void;
     /**
      * Reconnects to an active call.
      *

package/dist/vapi.js

@@ -256,6 +256,11 @@ class Vapi extends VapiEventEmitter {
             }
             const isVideoRecordingEnabled = webCall?.artifactPlan?.videoRecordingEnabled ?? false;
             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?.callToken;
             // Stage 2: Create Daily call object
             this.emit('call-start-progress', {
                 stage: 'daily-call-object-creation',
@@ -313,6 +318,8 @@ 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);
@@ -378,6 +385,26 @@ 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', {
@@ -413,10 +440,14 @@ class Vapi extends VapiEventEmitter {
                 timestamp: new Date().toISOString()
             });
             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,
                 });
                 const joinDuration = Date.now() - joinStartTime;
@@ -447,23 +478,26 @@ class Vapi extends VapiEventEmitter {
                 throw error;
             }
             // 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', {
                         stage: 'video-recording-setup',
@@ -471,20 +505,6 @@ 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;
@@ -1001,6 +1021,35 @@ class Vapi extends VapiEventEmitter {
     stopScreenSharing() {
         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.
+     */
+    startRecording() {
+        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.
+     */
+    stopRecording() {
+        this.call?.stopRecording();
+    }
     /**
      * Reconnects to an active call.
      *
@@ -1043,6 +1092,10 @@ 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',
@@ -1081,6 +1134,8 @@ 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);
@@ -1177,6 +1232,26 @@ 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', {
@@ -1212,8 +1287,12 @@ class Vapi extends VapiEventEmitter {
                 timestamp: new Date().toISOString()
             });
             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,
             });
             const joinDuration = Date.now() - joinStartTime;
@@ -1224,23 +1303,26 @@ class Vapi extends VapiEventEmitter {
                 timestamp: new Date().toISOString()
             });
             // 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', {
                         stage: 'video-recording-setup',
@@ -1248,20 +1330,6 @@ 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vapi-ai/web",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "description": "",
   "main": "dist/vapi.js",
   "types": "dist/vapi.d.ts",

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(
@@ -512,6 +520,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 +589,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 +669,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 +728,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 +768,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 +797,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);
@@ -1350,6 +1380,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 +1460,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 +1507,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 +1620,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 +1679,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 +1697,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 +1726,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);