@reactor-team/js-sdk 1.0.10 → 1.0.14

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import react, { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { RemoteVideoTrack } from 'livekit-client';
 
 type ReactorStatus = "disconnected" | "connecting" | "waiting" | "ready";
@@ -121,6 +121,8 @@ interface ReactorActions {
     sendMessage(message: any): Promise<void>;
     connect(): Promise<void>;
     disconnect(): Promise<void>;
+    publishVideoStream(stream: MediaStream): Promise<void>;
+    unpublishVideoStream(): Promise<void>;
 }
 interface ReactorInternalState {
     reactor: Reactor;
@@ -142,9 +144,19 @@ interface ReactorViewProps {
     width?: number;
     height?: number;
     className?: string;
-    style?: react.CSSProperties;
+    style?: React.CSSProperties;
+    videoObjectFit?: NonNullable<React.VideoHTMLAttributes<HTMLVideoElement>["style"]>["objectFit"];
+}
+declare function ReactorView({ width, height, className, style, videoObjectFit, }: ReactorViewProps): react_jsx_runtime.JSX.Element;
+
+interface Props {
+    className?: string;
+    style?: React.CSSProperties;
+    videoConstraints?: MediaTrackConstraints;
+    showWebcam?: boolean;
+    videoObjectFit?: NonNullable<React.VideoHTMLAttributes<HTMLVideoElement>["style"]>["objectFit"];
 }
-declare function ReactorView({ width, height, className, style, }: ReactorViewProps): react_jsx_runtime.JSX.Element;
+declare function WebcamStream({ className, style, videoConstraints, showWebcam, videoObjectFit, }: Props): react_jsx_runtime.JSX.Element;
 
 /**
  * Generic hook for accessing selected parts of the Reactor store.
@@ -160,4 +172,4 @@ declare function useReactor<T>(selector: (state: ReactorStore) => T): T;
  */
 declare function useReactorMessage(handler: (message: any) => void): void;
 
-export { type Options, Reactor, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, type ReactorWaitingInfo, useReactor, useReactorMessage, useReactorStore };
+export { type Options, Reactor, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, type ReactorWaitingInfo, WebcamStream, useReactor, useReactorMessage, useReactorStore };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import react, { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { RemoteVideoTrack } from 'livekit-client';
 
 type ReactorStatus = "disconnected" | "connecting" | "waiting" | "ready";
@@ -121,6 +121,8 @@ interface ReactorActions {
     sendMessage(message: any): Promise<void>;
     connect(): Promise<void>;
     disconnect(): Promise<void>;
+    publishVideoStream(stream: MediaStream): Promise<void>;
+    unpublishVideoStream(): Promise<void>;
 }
 interface ReactorInternalState {
     reactor: Reactor;
@@ -142,9 +144,19 @@ interface ReactorViewProps {
     width?: number;
     height?: number;
     className?: string;
-    style?: react.CSSProperties;
+    style?: React.CSSProperties;
+    videoObjectFit?: NonNullable<React.VideoHTMLAttributes<HTMLVideoElement>["style"]>["objectFit"];
+}
+declare function ReactorView({ width, height, className, style, videoObjectFit, }: ReactorViewProps): react_jsx_runtime.JSX.Element;
+
+interface Props {
+    className?: string;
+    style?: React.CSSProperties;
+    videoConstraints?: MediaTrackConstraints;
+    showWebcam?: boolean;
+    videoObjectFit?: NonNullable<React.VideoHTMLAttributes<HTMLVideoElement>["style"]>["objectFit"];
 }
-declare function ReactorView({ width, height, className, style, }: ReactorViewProps): react_jsx_runtime.JSX.Element;
+declare function WebcamStream({ className, style, videoConstraints, showWebcam, videoObjectFit, }: Props): react_jsx_runtime.JSX.Element;
 
 /**
  * Generic hook for accessing selected parts of the Reactor store.
@@ -160,4 +172,4 @@ declare function useReactor<T>(selector: (state: ReactorStore) => T): T;
  */
 declare function useReactorMessage(handler: (message: any) => void): void;
 
-export { type Options, Reactor, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, type ReactorWaitingInfo, useReactor, useReactorMessage, useReactorStore };
+export { type Options, Reactor, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, type ReactorWaitingInfo, WebcamStream, useReactor, useReactorMessage, useReactorStore };

package/dist/index.js

@@ -72,6 +72,7 @@ __export(index_exports, {
   Reactor: () => Reactor,
   ReactorProvider: () => ReactorProvider,
   ReactorView: () => ReactorView,
+  WebcamStream: () => WebcamStream,
   useReactor: () => useReactor,
   useReactorMessage: () => useReactorMessage,
   useReactorStore: () => useReactorStore
@@ -453,18 +454,22 @@ var GPUMachineClient = class {
   }
   /**
    * Unpublishes the currently published video track.
+   * Note: We pass false to unpublishTrack to prevent LiveKit from stopping
+   * the source MediaStreamTrack, as it's owned by the component that created it.
    */
   unpublishVideoTrack() {
     return __async(this, null, function* () {
       if (!this.roomInstance || !this.publishedVideoTrack) {
         return;
       }
+      const publishedVideoTrack = this.publishedVideoTrack;
+      this.publishedVideoTrack = void 0;
       try {
         yield this.roomInstance.localParticipant.unpublishTrack(
-          this.publishedVideoTrack
+          publishedVideoTrack,
+          false
+          // Don't stop the source track - it's managed externally
         );
-        this.publishedVideoTrack.stop();
-        this.publishedVideoTrack = void 0;
         console.debug("[GPUMachineClient] Video track unpublished successfully");
       } catch (error) {
         console.error(
@@ -512,6 +517,8 @@ var GPUMachineClient = class {
   }
   /**
    * Unpublishes the currently published audio track.
+   * Note: We pass false to unpublishTrack to prevent LiveKit from stopping
+   * the source MediaStreamTrack, as it's owned by the component that created it.
    * @private
    */
   unpublishAudioTrack() {
@@ -519,12 +526,14 @@ var GPUMachineClient = class {
       if (!this.roomInstance || !this.publishedAudioTrack) {
         return;
       }
+      const publishedAudioTrack = this.publishedAudioTrack;
+      this.publishedAudioTrack = void 0;
       try {
         yield this.roomInstance.localParticipant.unpublishTrack(
-          this.publishedAudioTrack
+          publishedAudioTrack,
+          false
+          // Don't stop the source track - it's managed externally
         );
-        this.publishedAudioTrack.stop();
-        this.publishedAudioTrack = void 0;
         console.debug("[GPUMachineClient] Audio track unpublished successfully");
       } catch (error) {
         console.error(
@@ -996,6 +1005,32 @@ var createReactorStore = (initProps, publicState = defaultInitState) => {
           console.error("[ReactorStore] Disconnect failed:", error);
           throw error;
         }
+      }),
+      publishVideoStream: (stream) => __async(null, null, function* () {
+        console.debug("[ReactorStore] Publishing video stream");
+        try {
+          yield get().internal.reactor.publishVideoStream(stream);
+          console.debug("[ReactorStore] Video stream published successfully");
+        } catch (error) {
+          console.error(
+            "[ReactorStore] Failed to publish video stream:",
+            error
+          );
+          throw error;
+        }
+      }),
+      unpublishVideoStream: () => __async(null, null, function* () {
+        console.debug("[ReactorStore] Unpublishing video stream");
+        try {
+          yield get().internal.reactor.unpublishVideoStream();
+          console.debug("[ReactorStore] Video stream unpublished successfully");
+        } catch (error) {
+          console.error(
+            "[ReactorStore] Failed to unpublish video stream:",
+            error
+          );
+          throw error;
+        }
       })
     });
   });
@@ -1014,34 +1049,98 @@ function ReactorProvider(_a) {
   ]);
   const storeRef = (0, import_react3.useRef)(void 0);
   const firstRender = (0, import_react3.useRef)(true);
-  function attemptAutoConnect() {
-    var _a2, _b2;
-    const status = (_a2 = storeRef.current) == null ? void 0 : _a2.getState().status;
-    if (autoConnect && status === "disconnected") {
-      console.debug("[ReactorProvider] Starting autoconnect...");
-      (_b2 = storeRef.current) == null ? void 0 : _b2.getState().connect().then(() => {
-        console.debug("[ReactorProvider] Autoconnect successful");
-      }).catch((error) => {
-        console.error("[ReactorProvider] Failed to autoconnect:", error);
-      });
-    }
-  }
+  const [_storeVersion, setStoreVersion] = (0, import_react3.useState)(0);
   if (storeRef.current === void 0) {
     console.debug("[ReactorProvider] Creating new reactor store");
     storeRef.current = createReactorStore(initReactorStore(props));
     console.debug("[ReactorProvider] Reactor store created successfully");
-    attemptAutoConnect();
   }
+  const {
+    coordinatorUrl,
+    modelName,
+    jwtToken,
+    insecureApiKey,
+    directConnection,
+    queueing
+  } = props;
   (0, import_react3.useEffect)(() => {
     if (firstRender.current) {
       firstRender.current = false;
-      return;
+      const current2 = storeRef.current;
+      if (autoConnect && current2.getState().status === "disconnected") {
+        console.debug(
+          "[ReactorProvider] Starting autoconnect in first render..."
+        );
+        current2.getState().connect().then(() => {
+          console.debug(
+            "[ReactorProvider] Autoconnect successful in first render"
+          );
+        }).catch((error) => {
+          console.error(
+            "[ReactorProvider] Failed to autoconnect in first render:",
+            error
+          );
+        });
+      }
+      return () => {
+        console.debug(
+          "[ReactorProvider] Disconnecting in cleanup for first render"
+        );
+        current2.getState().disconnect().then(() => {
+          console.debug(
+            "[ReactorProvider] Disconnect completed successfully in cleanup for first render"
+          );
+        }).catch((error) => {
+          console.error(
+            "[ReactorProvider] Failed to disconnect in cleanup for first render:",
+            error
+          );
+        });
+      };
     }
     console.debug("[ReactorProvider] Updating reactor store");
-    storeRef.current = createReactorStore(initReactorStore(props));
-    console.debug("[ReactorProvider] Reactor store updated successfully");
-    attemptAutoConnect();
-  }, [props, autoConnect]);
+    storeRef.current = createReactorStore(
+      initReactorStore({
+        coordinatorUrl,
+        modelName,
+        jwtToken,
+        insecureApiKey,
+        directConnection,
+        queueing
+      })
+    );
+    const current = storeRef.current;
+    setStoreVersion((v) => v + 1);
+    console.debug(
+      "[ReactorProvider] Reactor store updated successfully, and increased version"
+    );
+    if (autoConnect && current.getState().status === "disconnected") {
+      console.debug("[ReactorProvider] Starting autoconnect...");
+      current.getState().connect().then(() => {
+        console.debug("[ReactorProvider] Autoconnect successful");
+      }).catch((error) => {
+        console.error("[ReactorProvider] Failed to autoconnect:", error);
+      });
+    }
+    return () => {
+      console.debug("[ReactorProvider] Disconnecting in cleanup");
+      current.getState().disconnect().then(() => {
+        console.debug(
+          "[ReactorProvider] Disconnect completed successfully in cleanup"
+        );
+      }).catch((error) => {
+        console.error("[ReactorProvider] Failed to disconnect:", error);
+      });
+    };
+  }, [
+    coordinatorUrl,
+    modelName,
+    jwtToken,
+    insecureApiKey,
+    directConnection,
+    queueing,
+    autoConnect
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReactorContext.Provider, { value: storeRef.current, children });
 }
 function useReactorStore(selector) {
@@ -1086,18 +1185,14 @@ function ReactorView({
   width,
   height,
   className,
-  style
+  style,
+  videoObjectFit = "contain"
 }) {
   const { videoTrack, status } = useReactor((state) => ({
     videoTrack: state.videoTrack,
     status: state.status
   }));
   const videoRef = (0, import_react5.useRef)(null);
-  console.debug("[ReactorView] Render", {
-    hasVideoTrack: !!videoTrack,
-    status,
-    hasVideoElement: !!videoRef.current
-  });
   (0, import_react5.useEffect)(() => {
     console.debug("[ReactorView] Video track effect triggered", {
       hasVideoElement: !!videoRef.current,
@@ -1128,7 +1223,6 @@ function ReactorView({
     }
   }, [videoTrack]);
   const showPlaceholder = !videoTrack;
-  console.debug("[ReactorView] Placeholder state", { showPlaceholder, status });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
@@ -1145,7 +1239,7 @@ function ReactorView({
             style: {
               width: "100%",
               height: "100%",
-              objectFit: "contain",
+              objectFit: videoObjectFit,
               display: showPlaceholder ? "none" : "block"
             },
             muted: true,
@@ -1178,11 +1272,202 @@ function ReactorView({
     }
   );
 }
+
+// src/react/WebcamStream.tsx
+var import_react6 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function WebcamStream({
+  className,
+  style,
+  videoConstraints = {
+    width: { ideal: 1280 },
+    height: { ideal: 720 }
+  },
+  showWebcam = true,
+  videoObjectFit = "contain"
+}) {
+  const [stream, setStream] = (0, import_react6.useState)(null);
+  const [isPublishing, setIsPublishing] = (0, import_react6.useState)(false);
+  const [permissionDenied, setPermissionDenied] = (0, import_react6.useState)(false);
+  const { status, publishVideoStream, unpublishVideoStream, reactor } = useReactor((state) => ({
+    status: state.status,
+    publishVideoStream: state.publishVideoStream,
+    unpublishVideoStream: state.unpublishVideoStream,
+    reactor: state.internal.reactor
+  }));
+  const videoRef = (0, import_react6.useRef)(null);
+  const startWebcam = () => __async(null, null, function* () {
+    console.debug("[WebcamPublisher] Starting webcam");
+    try {
+      const mediaStream = yield navigator.mediaDevices.getUserMedia({
+        video: videoConstraints,
+        audio: false
+      });
+      console.debug("[WebcamPublisher] Webcam started successfully");
+      setStream(mediaStream);
+      setPermissionDenied(false);
+    } catch (err) {
+      console.error("[WebcamPublisher] Failed to start webcam:", err);
+      if (err instanceof DOMException && (err.name === "NotAllowedError" || err.name === "PermissionDeniedError")) {
+        console.debug("[WebcamPublisher] Camera permission denied");
+        setPermissionDenied(true);
+      }
+    }
+  });
+  const stopWebcam = () => __async(null, null, function* () {
+    console.debug("[WebcamPublisher] Stopping webcam");
+    try {
+      yield unpublishVideoStream();
+      console.debug("[WebcamPublisher] Unpublished before stopping");
+    } catch (err) {
+      console.error("[WebcamPublisher] Error unpublishing before stop:", err);
+    }
+    setIsPublishing(false);
+    stream == null ? void 0 : stream.getTracks().forEach((track) => {
+      track.stop();
+      console.debug("[WebcamPublisher] Stopped track:", track.kind);
+    });
+    setStream(null);
+    console.debug("[WebcamPublisher] Webcam stopped");
+  });
+  (0, import_react6.useEffect)(() => {
+    console.debug("[WebcamPublisher] Stream effect triggered", {
+      hasVideoElement: !!videoRef.current,
+      hasStream: !!stream
+    });
+    if (!videoRef.current) {
+      return;
+    }
+    if (stream) {
+      console.debug("[WebcamPublisher] Attaching stream to video element");
+      videoRef.current.srcObject = stream;
+      console.debug("[WebcamPublisher] Stream attached successfully");
+    } else {
+      console.debug("[WebcamPublisher] Clearing video element");
+      videoRef.current.srcObject = null;
+    }
+  }, [stream]);
+  (0, import_react6.useEffect)(() => {
+    if (!stream) {
+      return;
+    }
+    if (status === "ready" && !isPublishing) {
+      console.debug(
+        "[WebcamPublisher] Reactor ready, auto-publishing webcam stream"
+      );
+      publishVideoStream(stream).then(() => {
+        console.debug("[WebcamPublisher] Auto-publish successful");
+        setIsPublishing(true);
+      }).catch((err) => {
+        console.error("[WebcamPublisher] Auto-publish failed:", err);
+      });
+    } else if (status !== "ready" && isPublishing) {
+      console.debug("[WebcamPublisher] Reactor not ready, auto-unpublishing");
+      unpublishVideoStream().then(() => {
+        console.debug("[WebcamPublisher] Auto-unpublish successful");
+        setIsPublishing(false);
+      }).catch((err) => {
+        console.error("[WebcamPublisher] Auto-unpublish failed:", err);
+      });
+    }
+  }, [status, stream, isPublishing, publishVideoStream, unpublishVideoStream]);
+  (0, import_react6.useEffect)(() => {
+    const handleError = (error) => {
+      console.debug("[WebcamPublisher] Received error event:", error);
+      if (error.code === "VIDEO_PUBLISH_FAILED") {
+        console.debug(
+          "[WebcamPublisher] Video publish failed, resetting isPublishing state"
+        );
+        setIsPublishing(false);
+      }
+    };
+    reactor.on("error", handleError);
+    return () => {
+      reactor.off("error", handleError);
+    };
+  }, [reactor]);
+  (0, import_react6.useEffect)(() => {
+    if (status !== "ready") {
+      console.debug(
+        "[WebcamPublisher] Status changed to",
+        status,
+        "- resetting isPublishing state"
+      );
+      setIsPublishing(false);
+    }
+  }, [status, isPublishing]);
+  (0, import_react6.useEffect)(() => {
+    console.debug("[WebcamPublisher] Auto-starting webcam");
+    startWebcam();
+    return () => {
+      console.debug("[WebcamPublisher] Cleanup on unmount");
+      stopWebcam();
+    };
+  }, []);
+  const showPlaceholder = !stream;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      style: __spreadValues({
+        display: showWebcam ? "block" : "none",
+        position: "relative",
+        background: "#000"
+      }, style),
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "video",
+          {
+            ref: videoRef,
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: videoObjectFit,
+              display: showPlaceholder ? "none" : "block"
+            },
+            muted: true,
+            playsInline: true,
+            autoPlay: true
+          }
+        ),
+        showPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              color: "#fff",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "16px",
+              fontFamily: "monospace",
+              textAlign: "center",
+              padding: "20px",
+              boxSizing: "border-box",
+              flexDirection: "column",
+              gap: "12px"
+            },
+            children: permissionDenied ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "12px", fontFamily: "monospace" }, children: [
+              "Camera access denied.",
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("br", {}),
+              "Please allow access in your browser settings."
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "12px", fontFamily: "monospace" }, children: "Starting camera..." })
+          }
+        )
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Reactor,
   ReactorProvider,
   ReactorView,
+  WebcamStream,
   useReactor,
   useReactorMessage,
   useReactorStore