@vapi-ai/web 1.0.141 → 1.0.142

package/dist/vapi.d.ts

@@ -3,13 +3,8 @@ import { CreateAssistantDTO } from "./api";
 import EventEmitter from "events";
 export default class Vapi extends EventEmitter {
     private started;
-    private ws;
-    private mediaRecorder;
-    private player;
+    private call;
     constructor(apiToken: string, apiBaseUrl?: string);
     start(assistant: CreateAssistantDTO | string): void;
-    private startRecording;
-    private onMessage;
-    clear(): void;
     stop(): void;
 }

package/dist/vapi.js

@@ -3,95 +3,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const player_1 = require("./player");
+const daily_js_1 = __importDefault(require("@daily-co/daily-js"));
 const events_1 = __importDefault(require("events"));
 const client_1 = require("./client");
-const base64_arraybuffer_1 = require("base64-arraybuffer");
 class Vapi extends events_1.default {
     constructor(apiToken, apiBaseUrl) {
         super();
         this.started = false;
-        this.ws = null;
-        this.mediaRecorder = null;
+        this.call = null;
         client_1.client.baseUrl = apiBaseUrl !== null && apiBaseUrl !== void 0 ? apiBaseUrl : "https://api.vapi.ai";
         client_1.client.setSecurityData(apiToken);
-        this.player = new player_1.ContinuousPlayer();
-        this.player.on("speech-start", () => this.emit("speech-start"));
-        this.player.on("speech-end", () => this.emit("speech-end"));
     }
     start(assistant) {
         if (this.started) {
             return;
         }
         this.started = true;
-        this.player.start();
         client_1.client.call
             .callControllerCreateWebCall({
             assistant: typeof assistant === "string" ? undefined : assistant,
             assistantId: typeof assistant === "string" ? assistant : undefined,
         })
             .then(({ data }) => {
-            const { callId, url } = data;
-            const socket = new WebSocket(url);
-            this.ws = socket;
-            socket.onopen = () => {
-                socket.send(JSON.stringify({ event: "start", callId }));
-            };
-            socket.onmessage = (event) => {
-                if (!socket)
-                    return;
-                this.onMessage(socket, event);
-            };
-            socket.onclose = () => {
-                this.stop();
-            };
+            const { url } = data;
+            this.call = daily_js_1.default.createCallObject({
+                url,
+                audioSource: true,
+                videoSource: false,
+            });
         })
             .catch((error) => {
             console.error(error);
         });
     }
-    startRecording() {
-        navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
-            this.mediaRecorder = new MediaRecorder(stream, {
-                mimeType: "audio/webm;codecs=opus",
-            });
-            this.mediaRecorder.ondataavailable = (event) => {
-                if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-                    this.ws.send(event.data);
-                }
-            };
-            this.mediaRecorder.start(100);
-        });
-    }
-    onMessage(ws, event) {
-        const data = JSON.parse(event.data);
-        switch (data.event) {
-            case "connected":
-                this.startRecording();
-                this.emit("started");
-                break;
-            case "clear":
-                this.clear();
-                break;
-            case "media":
-                const audioData = (0, base64_arraybuffer_1.decode)(data.media.payload);
-                this.player.playChunk(audioData);
-        }
-    }
-    clear() {
-        this.player.clear();
-    }
     stop() {
+        var _a;
         this.started = false;
-        if (this.ws) {
-            this.ws.close();
-        }
-        this.ws = null;
-        if (this.mediaRecorder) {
-            this.mediaRecorder.stop();
-        }
-        this.mediaRecorder = null;
-        this.emit("stopped");
+        (_a = this.call) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.call = null;
     }
 }
 exports.default = Vapi;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vapi-ai/web",
-  "version": "1.0.141",
+  "version": "1.0.142",
   "description": "",
   "main": "dist/vapi.js",
   "types": "dist/vapi.d.ts",
@@ -22,15 +22,11 @@
   },
   "homepage": "https://github.com/VapiAI/snippet#readme",
   "dependencies": {
-    "async": "^3.2.4",
-    "base64-arraybuffer": "^1.0.2",
-    "events": "^3.3.0",
-    "standardized-audio-context": "^25.3.57"
+    "@daily-co/daily-js": "^0.52.0",
+    "events": "^3.3.0"
   },
   "devDependencies": {
-    "@types/async": "^3.2.21",
     "@types/node": "^20.6.0",
-    "@types/ws": "^8.5.5",
     "swagger-typescript-api": "^13.0.3"
   }
 }

package/vapi.ts

@@ -1,23 +1,17 @@
-import { ContinuousPlayer } from "./player";
+import DailyIframe, { DailyCall } from "@daily-co/daily-js";
+
 import { CreateAssistantDTO } from "./api";
 import EventEmitter from "events";
 import { client } from "./client";
-import { decode } from "base64-arraybuffer";
 
 export default class Vapi extends EventEmitter {
   private started: boolean = false;
-  private ws: WebSocket | null = null;
-  private mediaRecorder: MediaRecorder | null = null;
-  private player: ContinuousPlayer;
+  private call: DailyCall | null = null;
 
   constructor(apiToken: string, apiBaseUrl?: string) {
     super();
     client.baseUrl = apiBaseUrl ?? "https://api.vapi.ai";
     client.setSecurityData(apiToken);
-    this.player = new ContinuousPlayer();
-
-    this.player.on("speech-start", () => this.emit("speech-start"));
-    this.player.on("speech-end", () => this.emit("speech-end"));
   }
 
   start(assistant: CreateAssistantDTO | string): void {
@@ -26,7 +20,6 @@ export default class Vapi extends EventEmitter {
     }
 
     this.started = true;
-    this.player.start();
 
     client.call
       .callControllerCreateWebCall({
@@ -34,73 +27,22 @@ export default class Vapi extends EventEmitter {
         assistantId: typeof assistant === "string" ? assistant : undefined,
       })
       .then(({ data }) => {
-        const { callId, url } = data;
-        const socket = new WebSocket(url);
+        const { url } = data;
 
-        this.ws = socket;
-
-        socket.onopen = () => {
-          socket.send(JSON.stringify({ event: "start", callId }));
-        };
-        socket.onmessage = (event) => {
-          if (!socket) return;
-          this.onMessage(socket, event);
-        };
-        socket.onclose = () => {
-          this.stop();
-        };
+        this.call = DailyIframe.createCallObject({
+          url,
+          audioSource: true,
+          videoSource: false,
+        });
       })
       .catch((error) => {
         console.error(error);
       });
   }
 
-  private startRecording(): void {
-    navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
-      this.mediaRecorder = new MediaRecorder(stream, {
-        mimeType: "audio/webm;codecs=opus",
-      });
-
-      this.mediaRecorder.ondataavailable = (event: BlobEvent) => {
-        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-          this.ws.send(event.data);
-        }
-      };
-      this.mediaRecorder.start(100);
-    });
-  }
-
-  private onMessage(ws: WebSocket, event: MessageEvent): void {
-    const data = JSON.parse(event.data);
-
-    switch (data.event) {
-      case "connected":
-        this.startRecording();
-        this.emit("started");
-        break;
-      case "clear":
-        this.clear();
-        break;
-      case "media":
-        const audioData = decode(data.media.payload);
-        this.player.playChunk(audioData);
-    }
-  }
-
-  clear(): void {
-    this.player.clear();
-  }
-
   stop(): void {
     this.started = false;
-    if (this.ws) {
-      this.ws.close();
-    }
-    this.ws = null;
-    if (this.mediaRecorder) {
-      this.mediaRecorder.stop();
-    }
-    this.mediaRecorder = null;
-    this.emit("stopped");
+    this.call?.destroy();
+    this.call = null;
   }
 }

package/AtomicMediaSource.ts

@@ -1,97 +0,0 @@
-import async, { QueueObject } from "async";
-
-import EventEmitter from "events";
-
-declare global {
-  interface Window {
-    ManagedMediaSource: any;
-  }
-}
-
-// ManagedMediaSource needed for iOS Safari
-function getMediaSource() {
-  if (window.ManagedMediaSource) {
-    return new window.ManagedMediaSource();
-  }
-  if (window.MediaSource) {
-    return new window.MediaSource();
-  }
-
-  return null;
-}
-
-class AtomicMediaSource extends EventEmitter {
-  mediaSource: any;
-  sourceBuffer: SourceBuffer | null = null;
-  private operationsQueue: QueueObject<() => Promise<void>>;
-
-  constructor() {
-    super();
-    this.mediaSource = getMediaSource();
-    this.operationsQueue = this.createOperationQueue();
-
-    if (!this.mediaSource) {
-      console.error("MediaSource is not supported in your browser.");
-      // Display a message to the user, or handle this situation in another way
-      return;
-    }
-
-    this.mediaSource.addEventListener("sourceopen", () => {
-      this.mediaSource.duration = Number.POSITIVE_INFINITY;
-      this.sourceBuffer = this.mediaSource.addSourceBuffer(
-        'audio/webm; codecs="opus"'
-      );
-      if (this.sourceBuffer) {
-        this.sourceBuffer.mode = "sequence";
-      }
-    });
-  }
-
-  public appendBuffer(buffer: ArrayBuffer) {
-    this.operationsQueue.push(() => {
-      return new Promise((resolve, reject) => {
-        if (this.sourceBuffer) {
-          this.sourceBuffer.addEventListener(
-            "updateend",
-            () => {
-              resolve();
-            },
-            { once: true }
-          );
-          this.sourceBuffer.appendBuffer(buffer);
-        } else {
-          reject();
-        }
-      });
-    });
-  }
-
-  public clearBuffer() {
-    // this.operationsQueue.push(() => {
-    //   return new Promise((resolve, reject) => {
-    //     if (this.sourceBuffer) {
-    //       this.sourceBuffer.addEventListener(
-    //         "updateend",
-    //         () => {
-    //           resolve();
-    //         },
-    //         { once: true }
-    //       );
-    //       if (this.sourceBuffer.buffered.length > 0) {
-    //         this.sourceBuffer.remove(0, this.sourceBuffer.buffered.end(0));
-    //       }
-    //     } else {
-    //       reject();
-    //     }
-    //   });
-    // });
-  }
-
-  private createOperationQueue() {
-    return async.queue<() => Promise<void>>((task, callback) => {
-      task().then(() => callback());
-    }, 1);
-  }
-}
-
-export default AtomicMediaSource;

package/player.ts

@@ -1,46 +0,0 @@
-import AtomicMediaSource from "./AtomicMediaSource";
-import EventEmitter from "events";
-
-export class ContinuousPlayer extends EventEmitter {
-  private atomic: AtomicMediaSource;
-  private audio: HTMLAudioElement;
-
-  constructor() {
-    super();
-
-    this.audio = document.createElement("audio");
-
-    this.audio.addEventListener("playing", () => this.emit("speech-start"));
-    this.audio.addEventListener("play", () => this.emit("speech-start"));
-    this.audio.addEventListener("canplay", () => {
-      this.audio.play();
-    });
-
-    this.audio.addEventListener("waiting", () => this.emit("speech-end"));
-
-    this.atomic = new AtomicMediaSource();
-
-    this.audio.src = URL.createObjectURL(this.atomic.mediaSource);
-    document.body.appendChild(this.audio);
-  }
-
-  start() {
-    this.audio.play();
-  }
-
-  playChunk(audioData: ArrayBuffer) {
-    this.atomic.sourceBuffer?.addEventListener(
-      "updateend",
-      () => {
-        this.audio.play().catch((error) => console.error("Play error:", error));
-      },
-      { once: true }
-    );
-    this.atomic.appendBuffer(audioData);
-  }
-
-  clear() {
-    this.audio.pause();
-    this.atomic.clearBuffer();
-  }
-}