fixes issue #106, loses model instance when enabling webcam

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>

src/hooks/use-live-api.ts

@@ -68,23 +68,30 @@ 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)
       .on("audio", onAudio);
 
     return () => {
       client
+        .off("error", onError)
         .off("open", onOpen)
         .off("close", onClose)
         .off("interrupted", stopAudioStreamer)
-        .off("audio", onAudio);
+        .off("audio", onAudio)
+        .disconnect();
     };
   }, [client]);
 

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) {