@vapi-ai/web 1.0.105 → 1.0.107

package/AtomicMediaSource.ts

@@ -0,0 +1,58 @@
+import async, { QueueObject } from "async";
+
+class AtomicMediaSource {
+  mediaSource: MediaSource;
+  private sourceBuffer: SourceBuffer | null = null;
+  private operationsQueue: QueueObject<() => Promise<void>>;
+
+  constructor() {
+    this.mediaSource = new MediaSource();
+    this.operationsQueue = this.createOperationQueue();
+
+    this.mediaSource.addEventListener("sourceopen", () => {
+      this.mediaSource.duration = Number.POSITIVE_INFINITY;
+      this.sourceBuffer = this.mediaSource.addSourceBuffer(
+        'audio/webm; codecs="opus"'
+      );
+      this.sourceBuffer.mode = "sequence";
+    });
+  }
+
+  public appendBuffer(buffer: ArrayBuffer) {
+    this.operationsQueue.push(() => {
+      return new Promise((resolve, reject) => {
+        if (this.sourceBuffer) {
+          this.sourceBuffer.addEventListener("updateend", () => {
+            resolve();
+          });
+          this.sourceBuffer.appendBuffer(buffer);
+        } else {
+          reject();
+        }
+      });
+    });
+  }
+
+  public clearBuffer() {
+    this.operationsQueue.push(() => {
+      return new Promise((resolve, reject) => {
+        if (this.sourceBuffer) {
+          this.sourceBuffer.addEventListener("updateend", () => {
+            resolve();
+          });
+          this.sourceBuffer.remove(0, this.mediaSource.duration);
+        } else {
+          reject();
+        }
+      });
+    });
+  }
+
+  private createOperationQueue() {
+    return async.queue<() => Promise<void>>((task, callback) => {
+      task().then(() => callback());
+    }, 1);
+  }
+}
+
+export default AtomicMediaSource;

package/dist/AtomicMediaSource.d.ts

@@ -0,0 +1,10 @@
+declare class AtomicMediaSource {
+    mediaSource: MediaSource;
+    private sourceBuffer;
+    private operationsQueue;
+    constructor();
+    appendBuffer(buffer: ArrayBuffer): void;
+    clearBuffer(): void;
+    private createOperationQueue;
+}
+export default AtomicMediaSource;

package/dist/AtomicMediaSource.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const async_1 = __importDefault(require("async"));
+class AtomicMediaSource {
+    constructor() {
+        this.sourceBuffer = null;
+        this.mediaSource = new MediaSource();
+        this.operationsQueue = this.createOperationQueue();
+        this.mediaSource.addEventListener("sourceopen", () => {
+            this.mediaSource.duration = Number.POSITIVE_INFINITY;
+            this.sourceBuffer = this.mediaSource.addSourceBuffer('audio/webm; codecs="opus"');
+            this.sourceBuffer.mode = "sequence";
+        });
+    }
+    appendBuffer(buffer) {
+        this.operationsQueue.push(() => {
+            return new Promise((resolve, reject) => {
+                if (this.sourceBuffer) {
+                    this.sourceBuffer.addEventListener("updateend", () => {
+                        resolve();
+                    });
+                    this.sourceBuffer.appendBuffer(buffer);
+                }
+                else {
+                    reject();
+                }
+            });
+        });
+    }
+    clearBuffer() {
+        this.operationsQueue.push(() => {
+            return new Promise((resolve, reject) => {
+                if (this.sourceBuffer) {
+                    this.sourceBuffer.addEventListener("updateend", () => {
+                        resolve();
+                    });
+                    this.sourceBuffer.remove(0, this.mediaSource.duration);
+                }
+                else {
+                    reject();
+                }
+            });
+        });
+    }
+    createOperationQueue() {
+        return async_1.default.queue((task, callback) => {
+            task().then(() => callback());
+        }, 1);
+    }
+}
+exports.default = AtomicMediaSource;

package/dist/player.d.ts

@@ -1,18 +1,10 @@
 /// <reference types="node" />
-import async from "async";
 import EventEmitter from "events";
 export declare class ContinuousPlayer extends EventEmitter {
-    private mediaSource;
-    private sourceBuffer;
+    private atomic;
     private audio;
-    private operationsQueue;
     constructor();
-    createOperationQueue(): async.QueueObject<() => Promise<void>>;
     start(): void;
     playChunk(audioData: ArrayBuffer): void;
-    private performBufferOperation;
-    private appendNextChunk;
-    private removeBuffer;
-    private resetTimestampOffset;
     clear(): void;
 }

package/dist/player.js

@@ -4,88 +4,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContinuousPlayer = void 0;
-const async_1 = __importDefault(require("async"));
+const AtomicMediaSource_1 = __importDefault(require("./AtomicMediaSource"));
 const events_1 = __importDefault(require("events"));
 class ContinuousPlayer extends events_1.default {
     constructor() {
         super();
-        this.sourceBuffer = null;
-        this.mediaSource = new MediaSource();
+        this.atomic = new AtomicMediaSource_1.default();
         this.audio = document.createElement("audio");
         this.audio.addEventListener("playing", () => this.emit("speech-start"));
         this.audio.addEventListener("play", () => this.emit("speech-start"));
         this.audio.addEventListener("waiting", () => this.emit("speech-end"));
-        this.audio.src = URL.createObjectURL(this.mediaSource);
+        this.audio.src = URL.createObjectURL(this.atomic.mediaSource);
         document.body.appendChild(this.audio);
-        this.operationsQueue = this.createOperationQueue();
-        this.mediaSource.addEventListener("sourceopen", () => {
-            this.mediaSource.duration = Number.POSITIVE_INFINITY;
-            this.sourceBuffer = this.mediaSource.addSourceBuffer('audio/webm; codecs="opus"');
-            this.sourceBuffer.mode = "sequence";
-        });
-    }
-    createOperationQueue() {
-        return async_1.default.queue((task, callback) => {
-            task().then(() => callback());
-        }, 1);
     }
     start() {
         this.audio.play();
     }
     playChunk(audioData) {
-        console.log("playChunk");
-        this.operationsQueue.push(() => this.appendNextChunk(audioData));
-    }
-    performBufferOperation(operation) {
-        return new Promise((resolve) => {
-            if (!this.sourceBuffer) {
-                resolve();
-                return;
-            }
-            if (this.sourceBuffer.updating) {
-                this.sourceBuffer.addEventListener("updateend", () => {
-                    operation();
-                    resolve();
-                }, {
-                    once: true,
-                });
-                return;
-            }
-            operation();
-            resolve();
-        });
-    }
-    appendNextChunk(chunk) {
-        return this.performBufferOperation(() => {
-            if (!this.sourceBuffer)
-                return;
-            console.log("appending");
-            this.sourceBuffer.appendBuffer(chunk);
-        });
-    }
-    removeBuffer() {
-        return this.performBufferOperation(() => {
-            if (!this.sourceBuffer)
-                return;
-            if (this.sourceBuffer.buffered.length > 0) {
-                this.sourceBuffer.remove(0, this.sourceBuffer.buffered.end(this.sourceBuffer.buffered.length - 1));
-            }
-        });
-    }
-    resetTimestampOffset() {
-        return this.performBufferOperation(() => {
-            if (!this.sourceBuffer)
-                return;
-            this.sourceBuffer.timestampOffset = 0;
-        });
+        this.atomic.appendBuffer(audioData);
     }
     clear() {
-        // if (!this.sourceBuffer) return;
-        // this.sourceBuffer.abort();
-        // this.operationsQueue.kill();
-        // this.operationsQueue = this.createOperationQueue();
-        // this.operationsQueue.push(() => this.removeBuffer());
-        // this.operationsQueue.push(() => this.resetTimestampOffset());
+        this.atomic.clearBuffer();
     }
 }
 exports.ContinuousPlayer = ContinuousPlayer;

package/dist/vapi.js

@@ -35,8 +35,6 @@ class Vapi extends events_1.default {
             this.ws = socket;
             socket.onopen = () => {
                 socket.send(JSON.stringify({ event: "start", callId }));
-                this.startRecording();
-                this.emit("started");
             };
             socket.onmessage = (event) => {
                 if (!socket)
@@ -68,12 +66,17 @@ class Vapi extends events_1.default {
     }
     onMessage(ws, event) {
         const data = JSON.parse(event.data);
-        if (data.event === "media") {
-            const audioData = (0, base64_arraybuffer_1.decode)(data.media.payload);
-            this.player.playChunk(audioData);
-        }
-        if (data.event === "clear") {
-            this.clear();
+        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() {

package/package.json

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

package/player.ts

@@ -1,42 +1,22 @@
-import async, { QueueObject } from "async";
-
+import AtomicMediaSource from "./AtomicMediaSource";
 import EventEmitter from "events";
 
 export class ContinuousPlayer extends EventEmitter {
-  private mediaSource: MediaSource;
-  private sourceBuffer: SourceBuffer | null = null;
+  private atomic: AtomicMediaSource;
   private audio: HTMLAudioElement;
-  private operationsQueue: QueueObject<() => Promise<void>>;
 
   constructor() {
     super();
-    this.mediaSource = new MediaSource();
+    this.atomic = new AtomicMediaSource();
 
     this.audio = document.createElement("audio");
 
     this.audio.addEventListener("playing", () => this.emit("speech-start"));
     this.audio.addEventListener("play", () => this.emit("speech-start"));
-
     this.audio.addEventListener("waiting", () => this.emit("speech-end"));
 
-    this.audio.src = URL.createObjectURL(this.mediaSource);
+    this.audio.src = URL.createObjectURL(this.atomic.mediaSource);
     document.body.appendChild(this.audio);
-
-    this.operationsQueue = this.createOperationQueue();
-
-    this.mediaSource.addEventListener("sourceopen", () => {
-      this.mediaSource.duration = Number.POSITIVE_INFINITY;
-      this.sourceBuffer = this.mediaSource.addSourceBuffer(
-        'audio/webm; codecs="opus"'
-      );
-      this.sourceBuffer.mode = "sequence";
-    });
-  }
-
-  createOperationQueue() {
-    return async.queue<() => Promise<void>>((task, callback) => {
-      task().then(() => callback());
-    }, 1);
   }
 
   start() {
@@ -44,71 +24,10 @@ export class ContinuousPlayer extends EventEmitter {
   }
 
   playChunk(audioData: ArrayBuffer) {
-    console.log("playChunk");
-    this.operationsQueue.push(() => this.appendNextChunk(audioData));
-  }
-
-  private performBufferOperation(operation: () => void) {
-    return new Promise<void>((resolve) => {
-      if (!this.sourceBuffer) {
-        resolve();
-        return;
-      }
-
-      if (this.sourceBuffer.updating) {
-        this.sourceBuffer.addEventListener(
-          "updateend",
-          () => {
-            operation();
-            resolve();
-          },
-          {
-            once: true,
-          }
-        );
-        return;
-      }
-
-      operation();
-      resolve();
-    });
-  }
-
-  private appendNextChunk(chunk: ArrayBuffer) {
-    return this.performBufferOperation(() => {
-      if (!this.sourceBuffer) return;
-      console.log("appending");
-
-      this.sourceBuffer.appendBuffer(chunk);
-    });
-  }
-
-  private removeBuffer() {
-    return this.performBufferOperation(() => {
-      if (!this.sourceBuffer) return;
-
-      if (this.sourceBuffer.buffered.length > 0) {
-        this.sourceBuffer.remove(
-          0,
-          this.sourceBuffer.buffered.end(this.sourceBuffer.buffered.length - 1)
-        );
-      }
-    });
-  }
-
-  private resetTimestampOffset() {
-    return this.performBufferOperation(() => {
-      if (!this.sourceBuffer) return;
-      this.sourceBuffer.timestampOffset = 0;
-    });
+    this.atomic.appendBuffer(audioData);
   }
 
   clear() {
-    // if (!this.sourceBuffer) return;
-    // this.sourceBuffer.abort();
-    // this.operationsQueue.kill();
-    // this.operationsQueue = this.createOperationQueue();
-    // this.operationsQueue.push(() => this.removeBuffer());
-    // this.operationsQueue.push(() => this.resetTimestampOffset());
+    this.atomic.clearBuffer();
   }
 }

package/vapi.ts

@@ -40,8 +40,6 @@ export default class Vapi extends EventEmitter {
 
         socket.onopen = () => {
           socket.send(JSON.stringify({ event: "start", callId }));
-          this.startRecording();
-          this.emit("started");
         };
         socket.onmessage = (event) => {
           if (!socket) return;
@@ -74,12 +72,18 @@ export default class Vapi extends EventEmitter {
 
   private onMessage(ws: WebSocket, event: MessageEvent): void {
     const data = JSON.parse(event.data);
-    if (data.event === "media") {
-      const audioData = decode(data.media.payload);
-      this.player.playChunk(audioData);
-    }
-    if (data.event === "clear") {
-      this.clear();
+
+    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);
     }
   }