From e4de0d367dfc22fd9b9f0fd80bd86ecfea4e8b57 Mon Sep 17 00:00:00 2001
From: Kyle Phillips <kylephillips@google.com>
Date: Tue, 27 May 2025 12:12:33 -0400
Subject: [PATCH] fixes issue #106, loses model instance when enabling webcam

---
 src/App.tsx                  | 7 ++++++-
 src/hooks/use-live-api.ts    | 9 ++++++++-
 src/lib/genai-live-client.ts | 3 +++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 50dff6c68..31f00b16b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,12 +21,17 @@ import SidePanel from "./components/side-panel/SidePanel";
 import { Altair } from "./components/altair/Altair";
 import ControlTray from "./components/control-tray/ControlTray";
 import cn from "classnames";
+import { LiveClientOptions } from "./types";
 
 const API_KEY = process.env.REACT_APP_GEMINI_API_KEY as string;
 if (typeof API_KEY !== "string") {
   throw new Error("set REACT_APP_GEMINI_API_KEY in .env");
 }
 
+const apiOptions: LiveClientOptions = {
+  apiKey: API_KEY,
+};
+
 function App() {
   // this video reference is used for displaying the active stream, whether that is the webcam or screen capture
   // feel free to style as you see fit
@@ -36,7 +41,7 @@ function App() {
 
   return (
     <div className="App">
-      <LiveAPIProvider options={{ apiKey: API_KEY }}>
+      <LiveAPIProvider options={apiOptions}>
         <div className="streaming-console">
           <SidePanel />
           <main>
diff --git a/src/hooks/use-live-api.ts b/src/hooks/use-live-api.ts
index 69a940cc7..30659c57a 100644
--- a/src/hooks/use-live-api.ts
+++ b/src/hooks/use-live-api.ts
@@ -68,12 +68,17 @@ export function useLiveAPI(options: LiveClientOptions): UseLiveAPIResults {
       setConnected(false);
     };
 
+    const onError = (error: ErrorEvent) => {
+      console.error("error", error);
+    };
+
     const stopAudioStreamer = () => audioStreamerRef.current?.stop();
 
     const onAudio = (data: ArrayBuffer) =>
       audioStreamerRef.current?.addPCM16(new Uint8Array(data));
 
     client
+      .on("error", onError)
       .on("open", onOpen)
       .on("close", onClose)
       .on("interrupted", stopAudioStreamer)
@@ -81,10 +86,12 @@ export function useLiveAPI(options: LiveClientOptions): UseLiveAPIResults {
 
     return () => {
       client
+        .off("error", onError)
         .off("open", onOpen)
         .off("close", onClose)
         .off("interrupted", stopAudioStreamer)
-        .off("audio", onAudio);
+        .off("audio", onAudio)
+        .disconnect();
     };
   }, [client]);
 
diff --git a/src/lib/genai-live-client.ts b/src/lib/genai-live-client.ts
index 60c266d98..54936c04d 100644
--- a/src/lib/genai-live-client.ts
+++ b/src/lib/genai-live-client.ts
@@ -44,6 +44,8 @@ export interface LiveClientEventTypes {
   close: (event: CloseEvent) => void;
   // Emitted when content is received from the server
   content: (data: LiveServerContent) => void;
+  // Emitted when an error occurs
+  error: (error: ErrorEvent) => void;
   // Emitted when the server interrupts the current generation
   interrupted: () => void;
   // Emitted for logging events
@@ -161,6 +163,7 @@ export class GenAILiveClient extends EventEmitter<LiveClientEventTypes> {
 
   protected onerror(e: ErrorEvent) {
     this.log("server.error", e.message);
+    this.emit("error", e);
   }
 
   protected onclose(e: CloseEvent) {