Updated all examples with clients to use the new PipecatClient

examples/twilio-chatbot/client/typescript/src/app.ts

@@ -12,12 +12,11 @@ import {
 import {
   WebSocketTransport,
   TwilioSerializer,
-} from "@pipecat-ai/websocket-transport";
+} from '@pipecat-ai/websocket-transport';
 
 class WebsocketClientApp {
-
-  private static STREAM_SID = "ws_mock_stream_sid"
-  private static CALL_SID = "ws_mock_call_sid"
+  private static STREAM_SID = 'ws_mock_stream_sid';
+  private static CALL_SID = 'ws_mock_call_sid';
 
   private rtviClient: RTVIClient | null = null;
   private connectBtn: HTMLButtonElement | null = null;
@@ -38,8 +37,12 @@ class WebsocketClientApp {
    * Set up references to DOM elements and create necessary media elements
    */
   private setupDOMElements(): void {
-    this.connectBtn = document.getElementById('connect-btn') as HTMLButtonElement;
-    this.disconnectBtn = document.getElementById('disconnect-btn') as HTMLButtonElement;
+    this.connectBtn = document.getElementById(
+      'connect-btn'
+    ) as HTMLButtonElement;
+    this.disconnectBtn = document.getElementById(
+      'disconnect-btn'
+    ) as HTMLButtonElement;
     this.statusSpan = document.getElementById('connection-status');
     this.debugLog = document.getElementById('debug-log');
   }
@@ -80,13 +83,23 @@ class WebsocketClientApp {
   }
 
   private async emulateTwilioMessages() {
-    const connectedMessage={"event": "connected", "protocol": "Call", "version": "1.0.0"}
+    const connectedMessage = {
+      event: 'connected',
+      protocol: 'Call',
+      version: '1.0.0',
+    };
 
-    const websocketTransport = this.rtviClient?.transport as WebSocketTransport
-    void websocketTransport?.sendRawMessage(connectedMessage)
+    const websocketTransport = this.rtviClient?.transport as WebSocketTransport;
+    void websocketTransport?.sendRawMessage(connectedMessage);
 
-    const startMessage={"event": "start", "start": {"streamSid": WebsocketClientApp.STREAM_SID, "callSid": WebsocketClientApp.CALL_SID}}
-    void websocketTransport?.sendRawMessage(startMessage)
+    const startMessage = {
+      event: 'start',
+      start: {
+        streamSid: WebsocketClientApp.STREAM_SID,
+        callSid: WebsocketClientApp.CALL_SID,
+      },
+    };
+    void websocketTransport?.sendRawMessage(startMessage);
   }
 
   /**
@@ -118,7 +131,9 @@ class WebsocketClientApp {
 
     // Listen for tracks stopping
     this.rtviClient.on(RTVIEvent.TrackStopped, (track, participant) => {
-      this.log(`Track stopped: ${track.kind} from ${participant?.name || 'unknown'}`);
+      this.log(
+        `Track stopped: ${track.kind} from ${participant?.name || 'unknown'}`
+      );
     });
   }
 
@@ -128,7 +143,10 @@ class WebsocketClientApp {
    */
   private setupAudioTrack(track: MediaStreamTrack): void {
     this.log('Setting up audio track');
-    if (this.botAudio.srcObject && "getAudioTracks" in this.botAudio.srcObject) {
+    if (
+      this.botAudio.srcObject &&
+      'getAudioTracks' in this.botAudio.srcObject
+    ) {
       const oldTrack = this.botAudio.srcObject.getAudioTracks()[0];
       if (oldTrack?.id === track.id) return;
     }
@@ -143,23 +161,19 @@ class WebsocketClientApp {
     try {
       const startTime = Date.now();
 
-      const transport = new WebSocketTransport({
+      const ws_opts = {
         serializer: new TwilioSerializer(),
         recorderSampleRate: 8000,
-        playerSampleRate: 8000
-      });
+        playerSampleRate: 8000,
+        ws_url: 'http://localhost:8765/ws',
+      };
       const RTVIConfig: RTVIClientOptions = {
-        transport,
-        params: {
-          // The baseURL and endpoint of your bot server that the client will connect to
-          baseUrl: 'http://localhost:8765',
-          endpoints: { connect: '/' },
-        },
+        transport: new WebSocketTransport(ws_opts),
         enableMic: true,
         enableCam: false,
         callbacks: {
           onConnected: () => {
-            this.emulateTwilioMessages()
+            this.emulateTwilioMessages();
             this.updateStatus('Connected');
             if (this.connectBtn) this.connectBtn.disabled = true;
             if (this.disconnectBtn) this.disconnectBtn.disabled = false;
@@ -183,13 +197,7 @@ class WebsocketClientApp {
           onMessageError: (error) => console.error('Message error:', error),
           onError: (error) => console.error('Error:', error),
         },
-      }
-      // @ts-ignore
-      RTVIConfig.customConnectHandler = () => Promise.resolve(
-          {
-              ws_url: "/ws",
-          }
-      );
+      };
       this.rtviClient = new RTVIClient(RTVIConfig);
       this.setupTrackListeners();
 
@@ -223,8 +231,13 @@ class WebsocketClientApp {
       try {
         await this.rtviClient.disconnect();
         this.rtviClient = null;
-        if (this.botAudio.srcObject && "getAudioTracks" in this.botAudio.srcObject) {
-          this.botAudio.srcObject.getAudioTracks().forEach((track) => track.stop());
+        if (
+          this.botAudio.srcObject &&
+          'getAudioTracks' in this.botAudio.srcObject
+        ) {
+          this.botAudio.srcObject
+            .getAudioTracks()
+            .forEach((track) => track.stop());
           this.botAudio.srcObject = null;
         }
       } catch (error) {
@@ -232,7 +245,6 @@ class WebsocketClientApp {
       }
     }
   }
-
 }
 
 declare global {