@reactor-team/js-sdk 1.0.11 → 1.0.15

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";
@@ -34,6 +34,7 @@ declare const OptionsSchema: z.ZodObject<{
     coordinatorUrl: z.ZodDefault<z.ZodString>;
     modelName: z.ZodString;
     queueing: z.ZodDefault<z.ZodBoolean>;
+    local: z.ZodDefault<z.ZodBoolean>;
 }, z.core.$strip>;
 type Options = z.input<typeof OptionsSchema>;
 type EventHandler = (...args: any[]) => void;
@@ -121,6 +122,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 +145,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 +173,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";
@@ -34,6 +34,7 @@ declare const OptionsSchema: z.ZodObject<{
     coordinatorUrl: z.ZodDefault<z.ZodString>;
     modelName: z.ZodString;
     queueing: z.ZodDefault<z.ZodBoolean>;
+    local: z.ZodDefault<z.ZodBoolean>;
 }, z.core.$strip>;
 type Options = z.input<typeof OptionsSchema>;
 type EventHandler = (...args: any[]) => void;
@@ -121,6 +122,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 +145,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 +173,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(
@@ -539,6 +548,9 @@ var GPUMachineClient = class {
 
 // src/core/Reactor.ts
 var import_zod3 = require("zod");
+var LOCAL_COORDINATOR_URL = "ws://localhost:8080/ws";
+var LOCAL_INSECURE_API_KEY = "1234";
+var PROD_COORDINATOR_URL = "wss://api.reactor.inc/ws";
 var OptionsSchema2 = import_zod3.z.object({
   directConnection: import_zod3.z.object({
     livekitJwtToken: import_zod3.z.string(),
@@ -546,13 +558,14 @@ var OptionsSchema2 = import_zod3.z.object({
   }).optional(),
   insecureApiKey: import_zod3.z.string().optional(),
   jwtToken: import_zod3.z.string().optional(),
-  coordinatorUrl: import_zod3.z.string().default("wss://api.reactor.inc/ws"),
+  coordinatorUrl: import_zod3.z.string().default(PROD_COORDINATOR_URL),
   modelName: import_zod3.z.string(),
-  queueing: import_zod3.z.boolean().default(false)
+  queueing: import_zod3.z.boolean().default(false),
+  local: import_zod3.z.boolean().default(false)
 }).refine(
-  (data) => data.directConnection || data.insecureApiKey || data.jwtToken,
+  (data) => data.directConnection || data.insecureApiKey || data.jwtToken || data.local,
   {
-    message: "At least one of directConnection, insecureApiKey, or jwtToken must be provided."
+    message: "At least one of directConnection, insecureApiKey, or jwtToken or local must be provided."
   }
 );
 var Reactor = class {
@@ -569,6 +582,10 @@ var Reactor = class {
     this.modelName = validatedOptions.modelName;
     this.queueing = validatedOptions.queueing;
     this.modelVersion = "1.0.0";
+    if (validatedOptions.local) {
+      this.coordinatorUrl = LOCAL_COORDINATOR_URL;
+      this.insecureApiKey = LOCAL_INSECURE_API_KEY;
+    }
   }
   // Event Emitter API
   on(event, handler) {
@@ -996,6 +1013,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;
+        }
       })
     });
   });
@@ -1026,7 +1069,8 @@ function ReactorProvider(_a) {
     jwtToken,
     insecureApiKey,
     directConnection,
-    queueing
+    queueing,
+    local
   } = props;
   (0, import_react3.useEffect)(() => {
     if (firstRender.current) {
@@ -1071,7 +1115,8 @@ function ReactorProvider(_a) {
         jwtToken,
         insecureApiKey,
         directConnection,
-        queueing
+        queueing,
+        local
       })
     );
     const current = storeRef.current;
@@ -1104,7 +1149,8 @@ function ReactorProvider(_a) {
     insecureApiKey,
     directConnection,
     queueing,
-    autoConnect
+    autoConnect,
+    local
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReactorContext.Provider, { value: storeRef.current, children });
 }
@@ -1150,18 +1196,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,
@@ -1192,7 +1234,6 @@ function ReactorView({
     }
   }, [videoTrack]);
   const showPlaceholder = !videoTrack;
-  console.debug("[ReactorView] Placeholder state", { showPlaceholder, status });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
@@ -1209,7 +1250,7 @@ function ReactorView({
             style: {
               width: "100%",
               height: "100%",
-              objectFit: "contain",
+              objectFit: videoObjectFit,
               display: showPlaceholder ? "none" : "block"
             },
             muted: true,
@@ -1242,11 +1283,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