@vapi-ai/web 1.0.140 → 1.0.142

package/dist/player.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="node" />
 import EventEmitter from "events";
 export declare class ContinuousPlayer extends EventEmitter {
-    private audioCtx;
-    private source;
+    private atomic;
+    private audio;
     constructor();
     start(): void;
-    playChunk(audioData: ArrayBuffer): Promise<void>;
+    playChunk(audioData: ArrayBuffer): void;
     clear(): void;
 }

package/dist/player.js

@@ -1,37 +1,38 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContinuousPlayer = void 0;
+const AtomicMediaSource_1 = __importDefault(require("./AtomicMediaSource"));
 const events_1 = __importDefault(require("events"));
 class ContinuousPlayer extends events_1.default {
     constructor() {
         super();
-        this.source = null;
-        this.audioCtx = new AudioContext();
+        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_1.default();
+        this.audio.src = URL.createObjectURL(this.atomic.mediaSource);
+        document.body.appendChild(this.audio);
+    }
+    start() {
+        this.audio.play();
     }
-    start() { }
     playChunk(audioData) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const audioBuffer = yield this.audioCtx.decodeAudioData(audioData);
-            this.source = this.audioCtx.createBufferSource();
-            this.source.buffer = audioBuffer;
-            this.source.connect(this.audioCtx.destination);
-            this.source.start();
-            this.emit("speech-start");
-            this.source.onended = () => this.emit("speech-end");
-        });
+        var _a;
+        (_a = this.atomic.sourceBuffer) === null || _a === void 0 ? void 0 : _a.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();
     }
-    clear() { }
 }
 exports.ContinuousPlayer = ContinuousPlayer;

package/dist/vapi.d.ts

@@ -1,18 +1,10 @@
+/// <reference types="node" />
 import { CreateAssistantDTO } from "./api";
-import async from "async";
-export default class Vapi {
-    private audioContext;
-    private source;
+import EventEmitter from "events";
+export default class Vapi extends EventEmitter {
     private started;
-    private ws;
-    private mediaRecorder;
-    private nextClipTime;
-    private decodeQueue;
-    constructor(apiToken: string, apiUrl?: string);
-    createQueue(): async.QueueObject<ArrayBuffer>;
+    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,39 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const standardized_audio_context_1 = require("standardized-audio-context");
-const async_1 = __importDefault(require("async"));
+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 {
-    constructor(apiToken, apiUrl) {
-        this.audioContext = new standardized_audio_context_1.AudioContext();
-        this.source = null;
+class Vapi extends events_1.default {
+    constructor(apiToken, apiBaseUrl) {
+        super();
         this.started = false;
-        this.ws = null;
-        this.mediaRecorder = null;
-        this.nextClipTime = 0;
+        this.call = null;
+        client_1.client.baseUrl = apiBaseUrl !== null && apiBaseUrl !== void 0 ? apiBaseUrl : "https://api.vapi.ai";
         client_1.client.setSecurityData(apiToken);
-        client_1.client.baseUrl = apiUrl !== null && apiUrl !== void 0 ? apiUrl : "https://api.vapi.ai";
-        this.decodeQueue = this.createQueue();
-    }
-    createQueue() {
-        return async_1.default.queue((task, callback) => {
-            this.source = this.audioContext.createBufferSource();
-            this.audioContext.decodeAudioData(task, (buffer) => {
-                if (!this.source)
-                    return;
-                this.source.buffer = buffer;
-                this.source.connect(this.audioContext.destination);
-                // If the next clip time is in the past, set it to the current time
-                this.nextClipTime = Math.max(this.nextClipTime, this.audioContext.currentTime);
-                // Start the source at the next clip time
-                this.source.start(this.nextClipTime);
-                // Schedule the next clip time
-                this.nextClipTime += buffer.duration;
-                callback();
-            });
-        }, 1);
     }
     start(assistant) {
         if (this.started) {
@@ -44,78 +21,26 @@ class Vapi {
         this.started = true;
         client_1.client.call
             .callControllerCreateWebCall({
+            assistant: typeof assistant === "string" ? undefined : assistant,
             assistantId: typeof assistant === "string" ? assistant : undefined,
-            assistant: typeof assistant === "object" ? 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 }));
-                this.startRecording();
-            };
-            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.start(100);
-            this.mediaRecorder.ondataavailable = (event) => {
-                if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-                    this.ws.send(event.data);
-                }
-            };
-        });
-    }
-    onMessage(ws, event) {
-        const data = JSON.parse(event.data);
-        if (data.event === "media") {
-            const audioData = (0, base64_arraybuffer_1.decode)(data.media.payload);
-            this.decodeQueue.push(audioData);
-        }
-        if (data.event === "clear") {
-            this.clear();
-        }
-    }
-    clear() {
-        this.decodeQueue.kill();
-        this.decodeQueue = this.createQueue();
-        // Stop the source if it exists
-        if (this.source) {
-            this.source.stop();
-            this.source.disconnect();
-            this.source = null;
-        }
-        // Reset the next clip time
-        this.nextClipTime = 0;
-    }
     stop() {
-        if (this.source) {
-            this.source.stop();
-        }
+        var _a;
         this.started = false;
-        if (this.ws) {
-            this.ws.close();
-        }
-        this.ws = null;
-        if (this.mediaRecorder) {
-            this.mediaRecorder.stop();
-        }
-        this.mediaRecorder = null;
+        (_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.140",
+  "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,57 +1,17 @@
-import { Assistant, CreateAssistantDTO } from "./api";
-import {
-  AudioContext,
-  IAudioBufferSourceNode,
-  IAudioContext,
-} from "standardized-audio-context";
-import async, { QueueObject } from "async";
+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 {
-  private audioContext: AudioContext = new AudioContext();
-  private source: IAudioBufferSourceNode<IAudioContext> | null = null;
+export default class Vapi extends EventEmitter {
   private started: boolean = false;
-  private ws: WebSocket | null = null;
-  private mediaRecorder: MediaRecorder | null = null;
+  private call: DailyCall | null = null;
 
-  private nextClipTime: number = 0;
-
-  private decodeQueue: QueueObject<ArrayBuffer>;
-
-  constructor(apiToken: string, apiUrl?: string) {
+  constructor(apiToken: string, apiBaseUrl?: string) {
+    super();
+    client.baseUrl = apiBaseUrl ?? "https://api.vapi.ai";
     client.setSecurityData(apiToken);
-    client.baseUrl = apiUrl ?? "https://api.vapi.ai";
-
-    this.decodeQueue = this.createQueue();
-  }
-
-  createQueue() {
-    return async.queue<ArrayBuffer>((task, callback) => {
-      this.source = this.audioContext.createBufferSource();
-
-      this.audioContext.decodeAudioData(task, (buffer) => {
-        if (!this.source) return;
-
-        this.source.buffer = buffer;
-        this.source.connect(this.audioContext.destination);
-
-        // If the next clip time is in the past, set it to the current time
-        this.nextClipTime = Math.max(
-          this.nextClipTime,
-          this.audioContext.currentTime
-        );
-
-        // Start the source at the next clip time
-        this.source.start(this.nextClipTime);
-
-        // Schedule the next clip time
-        this.nextClipTime += buffer.duration;
-
-        callback();
-      });
-    }, 1);
   }
 
   start(assistant: CreateAssistantDTO | string): void {
@@ -63,85 +23,26 @@ export default class Vapi {
 
     client.call
       .callControllerCreateWebCall({
+        assistant: typeof assistant === "string" ? undefined : assistant,
         assistantId: typeof assistant === "string" ? assistant : undefined,
-        assistant: typeof assistant === "object" ? 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 }));
-          this.startRecording();
-        };
-        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.start(100);
-      this.mediaRecorder.ondataavailable = (event: BlobEvent) => {
-        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-          this.ws.send(event.data);
-        }
-      };
-    });
-  }
-
-  private onMessage(ws: WebSocket, event: MessageEvent): void {
-    const data = JSON.parse(event.data);
-    if (data.event === "media") {
-      const audioData = decode(data.media.payload);
-      this.decodeQueue.push(audioData);
-    }
-    if (data.event === "clear") {
-      this.clear();
-    }
-  }
-
-  clear(): void {
-    this.decodeQueue.kill();
-    this.decodeQueue = this.createQueue();
-
-    // Stop the source if it exists
-    if (this.source) {
-      this.source.stop();
-      this.source.disconnect();
-      this.source = null;
-    }
-
-    // Reset the next clip time
-    this.nextClipTime = 0;
-  }
-
   stop(): void {
-    if (this.source) {
-      this.source.stop();
-    }
     this.started = false;
-    if (this.ws) {
-      this.ws.close();
-    }
-    this.ws = null;
-    if (this.mediaRecorder) {
-      this.mediaRecorder.stop();
-    }
-    this.mediaRecorder = null;
+    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,27 +0,0 @@
-import AtomicMediaSource from "./AtomicMediaSource";
-import EventEmitter from "events";
-
-export class ContinuousPlayer extends EventEmitter {
-  private audioCtx: AudioContext;
-  private source: AudioBufferSourceNode | null = null;
-
-  constructor() {
-    super();
-
-    this.audioCtx = new AudioContext();
-  }
-
-  start() {}
-
-  async playChunk(audioData: ArrayBuffer) {
-    const audioBuffer = await this.audioCtx.decodeAudioData(audioData);
-    this.source = this.audioCtx.createBufferSource();
-    this.source.buffer = audioBuffer;
-    this.source.connect(this.audioCtx.destination);
-    this.source.start();
-    this.emit("speech-start");
-    this.source.onended = () => this.emit("speech-end");
-  }
-
-  clear() {}
-}