@reactor-team/js-sdk 2.4.0 → 2.5.0

package/dist/index.mjs

@@ -51,6 +51,12 @@ var __async = (__this, __arguments, generator) => {
 };
 
 // src/types.ts
+function video(name, _options) {
+  return { name, kind: "video" };
+}
+function audio(name, _options) {
+  return { name, kind: "audio" };
+}
 var ConflictError = class extends Error {
   constructor(message) {
     super(message);
@@ -124,10 +130,53 @@ function createPeerConnection(config) {
 function createDataChannel(pc, label) {
   return pc.createDataChannel(label != null ? label : DEFAULT_DATA_CHANNEL_LABEL);
 }
-function createOffer(pc) {
+function rewriteMids(sdp, trackNames) {
+  const lines = sdp.split("\r\n");
+  let mediaIdx = 0;
+  const replacements = /* @__PURE__ */ new Map();
+  let inApplication = false;
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].startsWith("m=")) {
+      inApplication = lines[i].startsWith("m=application");
+    }
+    if (!inApplication && lines[i].startsWith("a=mid:")) {
+      const oldMid = lines[i].substring("a=mid:".length);
+      if (mediaIdx < trackNames.length) {
+        const newMid = trackNames[mediaIdx];
+        replacements.set(oldMid, newMid);
+        lines[i] = `a=mid:${newMid}`;
+        mediaIdx++;
+      }
+    }
+  }
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].startsWith("a=group:BUNDLE ")) {
+      const parts = lines[i].split(" ");
+      for (let j = 1; j < parts.length; j++) {
+        const replacement = replacements.get(parts[j]);
+        if (replacement !== void 0) {
+          parts[j] = replacement;
+        }
+      }
+      lines[i] = parts.join(" ");
+      break;
+    }
+  }
+  return lines.join("\r\n");
+}
+function createOffer(pc, trackNames) {
   return __async(this, null, function* () {
     const offer = yield pc.createOffer();
-    yield pc.setLocalDescription(offer);
+    if (trackNames && trackNames.length > 0 && offer.sdp) {
+      const munged = rewriteMids(offer.sdp, trackNames);
+      const mungedOffer = new RTCSessionDescription({
+        type: "offer",
+        sdp: munged
+      });
+      yield pc.setLocalDescription(mungedOffer);
+    } else {
+      yield pc.setLocalDescription(offer);
+    }
     yield waitForIceGathering(pc);
     const localDescription = pc.localDescription;
     if (!localDescription) {
@@ -632,6 +681,10 @@ var GPUMachineClient = class {
   constructor(config) {
     this.eventListeners = /* @__PURE__ */ new Map();
     this.status = "disconnected";
+    this.transceiverMap = /* @__PURE__ */ new Map();
+    this.publishedTracks = /* @__PURE__ */ new Map();
+    this.peerConnected = false;
+    this.dataChannelOpen = false;
     this.config = config;
   }
   // ─────────────────────────────────────────────────────────────────────────────
@@ -655,10 +708,18 @@ var GPUMachineClient = class {
   // SDP & Connection
   // ─────────────────────────────────────────────────────────────────────────────
   /**
-   * Creates an SDP offer for initiating a connection.
+   * Creates an SDP offer based on the declared tracks.
+   *
+   * **RECEIVE** = client receives from the model (model → client) → `recvonly`
+   * **SEND**    = client sends to the model (client → model)     → `sendonly`
+   *
+   * Track names must be unique across both arrays. A name that appears in
+   * both `receive` and `send` will throw — use distinct names instead.
+   *
+   * The data channel is always created first (before transceivers).
    * Must be called before connect().
    */
-  createOffer() {
+  createOffer(tracks) {
     return __async(this, null, function* () {
       if (!this.peerConnection) {
         this.peerConnection = createPeerConnection(this.config);
@@ -669,14 +730,54 @@ var GPUMachineClient = class {
         this.config.dataChannelLabel
       );
       this.setupDataChannelHandlers();
-      this.videoTransceiver = this.peerConnection.addTransceiver("video", {
-        direction: "sendrecv"
-      });
-      const offer = yield createOffer(this.peerConnection);
-      console.debug("[GPUMachineClient] Created SDP offer");
+      this.transceiverMap.clear();
+      const entries = this.buildTransceiverEntries(tracks);
+      for (const entry of entries) {
+        const transceiver = this.peerConnection.addTransceiver(entry.kind, {
+          direction: entry.direction
+        });
+        entry.transceiver = transceiver;
+        this.transceiverMap.set(entry.name, entry);
+        console.debug(
+          `[GPUMachineClient] Transceiver added: "${entry.name}" (${entry.kind}, ${entry.direction})`
+        );
+      }
+      const trackNames = entries.map((e) => e.name);
+      const offer = yield createOffer(this.peerConnection, trackNames);
+      console.debug(
+        "[GPUMachineClient] Created SDP offer with MIDs:",
+        trackNames
+      );
       return offer;
     });
   }
+  /**
+   * Builds an ordered list of transceiver entries from the receive/send arrays.
+   *
+   * Each track produces exactly one transceiver — `recvonly` for receive,
+   * `sendonly` for send.  Bidirectional (`sendrecv`) transceivers are not
+   * supported; the same track name in both arrays is an error.
+   */
+  buildTransceiverEntries(tracks) {
+    const map = /* @__PURE__ */ new Map();
+    for (const t of tracks.receive) {
+      if (map.has(t.name)) {
+        throw new Error(
+          `Duplicate receive track name "${t.name}". Track names must be unique.`
+        );
+      }
+      map.set(t.name, { name: t.name, kind: t.kind, direction: "recvonly" });
+    }
+    for (const t of tracks.send) {
+      if (map.has(t.name)) {
+        throw new Error(
+          `Track name "${t.name}" appears in both receive and send. Bidirectional tracks are not supported \u2014 use distinct names for the inbound and outbound directions (e.g. "${t.name}_in" and "${t.name}_out").`
+        );
+      }
+      map.set(t.name, { name: t.name, kind: t.kind, direction: "sendonly" });
+    }
+    return Array.from(map.values());
+  }
   /**
    * Connects to the GPU machine using the provided SDP answer.
    * createOffer() must be called first.
@@ -712,8 +813,8 @@ var GPUMachineClient = class {
     return __async(this, null, function* () {
       this.stopPing();
       this.stopStatsPolling();
-      if (this.publishedTrack) {
-        yield this.unpublishTrack();
+      for (const name of Array.from(this.publishedTracks.keys())) {
+        yield this.unpublishTrack(name);
       }
       if (this.dataChannel) {
         this.dataChannel.close();
@@ -723,7 +824,9 @@ var GPUMachineClient = class {
         closePeerConnection(this.peerConnection);
         this.peerConnection = void 0;
       }
-      this.videoTransceiver = void 0;
+      this.transceiverMap.clear();
+      this.peerConnected = false;
+      this.dataChannelOpen = false;
       this.setStatus("disconnected");
       console.debug("[GPUMachineClient] Disconnected");
     });
@@ -751,7 +854,7 @@ var GPUMachineClient = class {
   /**
    * Sends a command to the GPU machine via the data channel.
    * @param command The command to send
-   * @param data The data to send with the command. These are the parameters for the command, matching the scheme in the capabilities dictionary.
+   * @param data The data to send with the command. These are the parameters for the command, matching the schema in the capabilities dictionary.
    * @param scope The message scope – "application" (default) for model commands, "runtime" for platform-level messages.
    */
   sendCommand(command, data, scope = "application") {
@@ -768,63 +871,77 @@ var GPUMachineClient = class {
   // Track Publishing
   // ─────────────────────────────────────────────────────────────────────────────
   /**
-   * Publishes a track to the GPU machine.
-   * Only one track can be published at a time.
-   * Uses the existing transceiver's sender to replace the track.
-   * @param track The MediaStreamTrack to publish
+   * Publishes a MediaStreamTrack to the named send track.
+   *
+   * @param name The declared track name (must exist in transceiverMap with a sendable direction).
+   * @param track The MediaStreamTrack to publish.
    */
-  publishTrack(track) {
+  publishTrack(name, track) {
     return __async(this, null, function* () {
       if (!this.peerConnection) {
         throw new Error(
-          "[GPUMachineClient] Cannot publish track - not initialized"
+          `[GPUMachineClient] Cannot publish track "${name}" - not initialized`
         );
       }
       if (this.status !== "connected") {
         throw new Error(
-          "[GPUMachineClient] Cannot publish track - not connected"
+          `[GPUMachineClient] Cannot publish track "${name}" - not connected`
+        );
+      }
+      const entry = this.transceiverMap.get(name);
+      if (!entry || !entry.transceiver) {
+        throw new Error(
+          `[GPUMachineClient] Cannot publish track "${name}" - no transceiver (was it declared in tracks.send?)`
         );
       }
-      if (!this.videoTransceiver) {
+      if (entry.direction === "recvonly") {
         throw new Error(
-          "[GPUMachineClient] Cannot publish track - no video transceiver"
+          `[GPUMachineClient] Cannot publish track "${name}" - transceiver is recvonly`
         );
       }
       try {
-        yield this.videoTransceiver.sender.replaceTrack(track);
-        this.publishedTrack = track;
+        yield entry.transceiver.sender.replaceTrack(track);
+        this.publishedTracks.set(name, track);
         console.debug(
-          "[GPUMachineClient] Track published successfully:",
-          track.kind
+          `[GPUMachineClient] Track "${name}" published successfully`
         );
       } catch (error) {
-        console.error("[GPUMachineClient] Failed to publish track:", error);
+        console.error(
+          `[GPUMachineClient] Failed to publish track "${name}":`,
+          error
+        );
         throw error;
       }
     });
   }
   /**
-   * Unpublishes the currently published track.
+   * Unpublishes the track with the given name.
    */
-  unpublishTrack() {
+  unpublishTrack(name) {
     return __async(this, null, function* () {
-      if (!this.videoTransceiver || !this.publishedTrack) return;
+      const entry = this.transceiverMap.get(name);
+      if (!(entry == null ? void 0 : entry.transceiver) || !this.publishedTracks.has(name)) return;
       try {
-        yield this.videoTransceiver.sender.replaceTrack(null);
-        console.debug("[GPUMachineClient] Track unpublished successfully");
+        yield entry.transceiver.sender.replaceTrack(null);
+        console.debug(
+          `[GPUMachineClient] Track "${name}" unpublished successfully`
+        );
       } catch (error) {
-        console.error("[GPUMachineClient] Failed to unpublish track:", error);
+        console.error(
+          `[GPUMachineClient] Failed to unpublish track "${name}":`,
+          error
+        );
         throw error;
       } finally {
-        this.publishedTrack = void 0;
+        this.publishedTracks.delete(name);
       }
     });
   }
   /**
-   * Returns the currently published track.
+   * Returns the currently published track for the given name.
    */
-  getPublishedTrack() {
-    return this.publishedTrack;
+  getPublishedTrack(name) {
+    return this.publishedTracks.get(name);
   }
   // ─────────────────────────────────────────────────────────────────────────────
   // Getters
@@ -895,6 +1012,12 @@ var GPUMachineClient = class {
   // ─────────────────────────────────────────────────────────────────────────────
   // Private Helpers
   // ─────────────────────────────────────────────────────────────────────────────
+  checkFullyConnected() {
+    if (this.peerConnected && this.dataChannelOpen) {
+      this.setStatus("connected");
+      this.startStatsPolling();
+    }
+  }
   setStatus(newStatus) {
     if (this.status !== newStatus) {
       this.status = newStatus;
@@ -910,14 +1033,16 @@ var GPUMachineClient = class {
       if (state) {
         switch (state) {
           case "connected":
-            this.setStatus("connected");
-            this.startStatsPolling();
+            this.peerConnected = true;
+            this.checkFullyConnected();
             break;
           case "disconnected":
           case "closed":
+            this.peerConnected = false;
             this.setStatus("disconnected");
             break;
           case "failed":
+            this.peerConnected = false;
             this.setStatus("error");
             break;
         }
@@ -925,9 +1050,13 @@ var GPUMachineClient = class {
     };
     this.peerConnection.ontrack = (event) => {
       var _a;
-      console.debug("[GPUMachineClient] Track received:", event.track.kind);
+      const mid = event.transceiver.mid;
+      const trackName = mid != null ? mid : `unknown-${event.track.id}`;
+      console.debug(
+        `[GPUMachineClient] Track received: "${trackName}" (${event.track.kind}, mid=${mid})`
+      );
       const stream = (_a = event.streams[0]) != null ? _a : new MediaStream([event.track]);
-      this.emit("trackReceived", event.track, stream);
+      this.emit("trackReceived", trackName, event.track, stream);
     };
     this.peerConnection.onicecandidate = (event) => {
       if (event.candidate) {
@@ -947,10 +1076,13 @@ var GPUMachineClient = class {
     if (!this.dataChannel) return;
     this.dataChannel.onopen = () => {
       console.debug("[GPUMachineClient] Data channel open");
+      this.dataChannelOpen = true;
       this.startPing();
+      this.checkFullyConnected();
     };
     this.dataChannel.onclose = () => {
       console.debug("[GPUMachineClient] Data channel closed");
+      this.dataChannelOpen = false;
       this.stopPing();
     };
     this.dataChannel.onerror = (error) => {
@@ -984,10 +1116,29 @@ var GPUMachineClient = class {
 import { z as z2 } from "zod";
 var LOCAL_COORDINATOR_URL = "http://localhost:8080";
 var PROD_COORDINATOR_URL = "https://api.reactor.inc";
+var TrackConfigSchema = z2.object({
+  name: z2.string(),
+  kind: z2.enum(["audio", "video"])
+});
 var OptionsSchema = z2.object({
   coordinatorUrl: z2.string().default(PROD_COORDINATOR_URL),
   modelName: z2.string(),
-  local: z2.boolean().default(false)
+  local: z2.boolean().default(false),
+  /**
+   * Tracks the client **RECEIVES** from the model (model → client).
+   * Each entry produces a `recvonly` transceiver.
+   * Names must be unique across both `receive` and `send`.
+   *
+   * When omitted, defaults to a single video track named `"main_video"`.
+   * Pass an explicit empty array to opt out of the default.
+   */
+  receive: z2.array(TrackConfigSchema).default([{ name: "main_video", kind: "video" }]),
+  /**
+   * Tracks the client **SENDS** to the model (client → model).
+   * Each entry produces a `sendonly` transceiver.
+   * Names must be unique across both `receive` and `send`.
+   */
+  send: z2.array(TrackConfigSchema).default([])
 });
 var Reactor = class {
   constructor(options) {
@@ -998,7 +1149,9 @@ var Reactor = class {
     this.coordinatorUrl = validatedOptions.coordinatorUrl;
     this.model = validatedOptions.modelName;
     this.local = validatedOptions.local;
-    if (this.local) {
+    this.receive = validatedOptions.receive;
+    this.send = validatedOptions.send;
+    if (this.local && options.coordinatorUrl === void 0) {
       this.coordinatorUrl = LOCAL_COORDINATOR_URL;
     }
   }
@@ -1018,13 +1171,11 @@ var Reactor = class {
     (_a = this.eventListeners.get(event)) == null ? void 0 : _a.forEach((handler) => handler(...args));
   }
   /**
-   * Public method to send a message to the machine.
-   * Wraps the message in the specified channel envelope (defaults to "application").
-   * @param command The command name to send.
+   * Sends a command to the model via the data channel.
+   *
+   * @param command The command name.
    * @param data The command payload.
-   * @param scope The envelope scope – "application" (default) for model commands,
-   *              "runtime" for platform-level messages (e.g. requestCapabilities).
-   * @throws Error if not in ready state
+   * @param scope "application" (default) for model commands, "runtime" for platform messages.
    */
   sendCommand(command, data, scope = "application") {
     return __async(this, null, function* () {
@@ -1048,24 +1199,27 @@ var Reactor = class {
     });
   }
   /**
-   * Public method to publish a track to the machine.
-   * @param track The track to send to the machine.
+   * Publishes a MediaStreamTrack to a named send track.
+   *
+   * @param name The declared send track name (e.g. "webcam").
+   * @param track The MediaStreamTrack to publish.
    */
-  publishTrack(track) {
+  publishTrack(name, track) {
     return __async(this, null, function* () {
       var _a;
       if (process.env.NODE_ENV !== "development" && this.status !== "ready") {
-        const errorMessage = `Cannot publish track, status is ${this.status}`;
-        console.warn("[Reactor]", errorMessage);
+        console.warn(
+          `[Reactor] Cannot publish track "${name}", status is ${this.status}`
+        );
         return;
       }
       try {
-        yield (_a = this.machineClient) == null ? void 0 : _a.publishTrack(track);
+        yield (_a = this.machineClient) == null ? void 0 : _a.publishTrack(name, track);
       } catch (error) {
-        console.error("[Reactor] Failed to publish track:", error);
+        console.error(`[Reactor] Failed to publish track "${name}":`, error);
         this.createError(
           "TRACK_PUBLISH_FAILED",
-          `Failed to publish track: ${error}`,
+          `Failed to publish track "${name}": ${error}`,
           "gpu",
           true
         );
@@ -1073,18 +1227,20 @@ var Reactor = class {
     });
   }
   /**
-   * Public method to unpublish the currently published track.
+   * Unpublishes the track with the given name.
+   *
+   * @param name The declared send track name to unpublish.
    */
-  unpublishTrack() {
+  unpublishTrack(name) {
     return __async(this, null, function* () {
       var _a;
       try {
-        yield (_a = this.machineClient) == null ? void 0 : _a.unpublishTrack();
+        yield (_a = this.machineClient) == null ? void 0 : _a.unpublishTrack(name);
       } catch (error) {
-        console.error("[Reactor] Failed to unpublish track:", error);
+        console.error(`[Reactor] Failed to unpublish track "${name}":`, error);
         this.createError(
           "TRACK_UNPUBLISH_FAILED",
-          `Failed to unpublish track: ${error}`,
+          `Failed to unpublish track "${name}": ${error}`,
           "gpu",
           true
         );
@@ -1111,7 +1267,10 @@ var Reactor = class {
         this.machineClient = new GPUMachineClient({ iceServers });
         this.setupMachineClientHandlers();
       }
-      const sdpOffer = yield this.machineClient.createOffer();
+      const sdpOffer = yield this.machineClient.createOffer({
+        send: this.send,
+        receive: this.receive
+      });
       try {
         const sdpAnswer = yield this.coordinatorClient.connect(
           this.sessionId,
@@ -1166,7 +1325,10 @@ var Reactor = class {
         const iceServers = yield this.coordinatorClient.getIceServers();
         this.machineClient = new GPUMachineClient({ iceServers });
         this.setupMachineClientHandlers();
-        const sdpOffer = yield this.machineClient.createOffer();
+        const sdpOffer = yield this.machineClient.createOffer({
+          send: this.send,
+          receive: this.receive
+        });
         const sessionId = yield this.coordinatorClient.createSession(sdpOffer);
         this.setSessionId(sessionId);
         const sdpAnswer = yield this.coordinatorClient.connect(
@@ -1228,8 +1390,8 @@ var Reactor = class {
     });
     this.machineClient.on(
       "trackReceived",
-      (track, stream) => {
-        this.emit("streamChanged", track, stream);
+      (name, track, stream) => {
+        this.emit("trackReceived", name, track, stream);
       }
     );
     this.machineClient.on("statsUpdate", (stats) => {
@@ -1247,7 +1409,11 @@ var Reactor = class {
         return;
       }
       if (this.coordinatorClient && !recoverable) {
-        yield this.coordinatorClient.terminateSession();
+        try {
+          yield this.coordinatorClient.terminateSession();
+        } catch (error) {
+          console.error("[Reactor] Error terminating session:", error);
+        }
         this.coordinatorClient = void 0;
       }
       if (this.machineClient) {
@@ -1352,10 +1518,9 @@ var ReactorContext = createContext(
 );
 var defaultInitState = {
   status: "disconnected",
-  videoTrack: null,
+  tracks: {},
   lastError: void 0,
   sessionExpiration: void 0,
-  insecureApiKey: void 0,
   jwtToken: void 0,
   sessionId: void 0
 };
@@ -1376,7 +1541,11 @@ var createReactorStore = (initProps, publicState = defaultInitState) => {
         oldStatus: get().status,
         newStatus
       });
-      set({ status: newStatus });
+      if (newStatus === "disconnected") {
+        set({ status: newStatus, tracks: {} });
+      } else {
+        set({ status: newStatus });
+      }
     });
     reactor.on(
       "sessionExpirationChanged",
@@ -1388,13 +1557,13 @@ var createReactorStore = (initProps, publicState = defaultInitState) => {
         set({ sessionExpiration: newSessionExpiration });
       }
     );
-    reactor.on("streamChanged", (videoTrack) => {
-      console.debug("[ReactorStore] Stream changed", {
-        hasVideoTrack: !!videoTrack,
-        videoTrackKind: videoTrack == null ? void 0 : videoTrack.kind,
-        videoTrackId: videoTrack == null ? void 0 : videoTrack.id
+    reactor.on("trackReceived", (name, track) => {
+      console.debug("[ReactorStore] Track received", {
+        name,
+        kind: track.kind,
+        id: track.id
       });
-      set({ videoTrack });
+      set({ tracks: __spreadProps(__spreadValues({}, get().tracks), { [name]: track }) });
     });
     reactor.on("error", (error) => {
       console.debug("[ReactorStore] Error occurred", error);
@@ -1458,27 +1627,31 @@ var createReactorStore = (initProps, publicState = defaultInitState) => {
           throw error;
         }
       }),
-      publishVideoStream: (stream) => __async(null, null, function* () {
-        console.debug("[ReactorStore] Publishing video stream");
+      publish: (name, track) => __async(null, null, function* () {
+        console.debug(`[ReactorStore] Publishing track "${name}"`);
         try {
-          yield get().internal.reactor.publishTrack(stream.getVideoTracks()[0]);
-          console.debug("[ReactorStore] Video stream published successfully");
+          yield get().internal.reactor.publishTrack(name, track);
+          console.debug(
+            `[ReactorStore] Track "${name}" published successfully`
+          );
         } catch (error) {
           console.error(
-            "[ReactorStore] Failed to publish video stream:",
+            `[ReactorStore] Failed to publish track "${name}":`,
             error
           );
           throw error;
         }
       }),
-      unpublishVideoStream: () => __async(null, null, function* () {
-        console.debug("[ReactorStore] Unpublishing video stream");
+      unpublish: (name) => __async(null, null, function* () {
+        console.debug(`[ReactorStore] Unpublishing track "${name}"`);
         try {
-          yield get().internal.reactor.unpublishTrack();
-          console.debug("[ReactorStore] Video stream unpublished successfully");
+          yield get().internal.reactor.unpublishTrack(name);
+          console.debug(
+            `[ReactorStore] Track "${name}" unpublished successfully`
+          );
         } catch (error) {
           console.error(
-            "[ReactorStore] Failed to unpublish video stream:",
+            `[ReactorStore] Failed to unpublish track "${name}":`,
             error
           );
           throw error;
@@ -1524,7 +1697,7 @@ function ReactorProvider(_a) {
     console.debug("[ReactorProvider] Reactor store created successfully");
   }
   const _a2 = connectOptions != null ? connectOptions : {}, { autoConnect = false } = _a2, pollingOptions = __objRest(_a2, ["autoConnect"]);
-  const { coordinatorUrl, modelName, local } = props;
+  const { coordinatorUrl, modelName, local, receive, send } = props;
   const maxAttempts = pollingOptions.maxAttempts;
   useEffect(() => {
     const handleBeforeUnload = () => {
@@ -1580,6 +1753,8 @@ function ReactorProvider(_a) {
         coordinatorUrl,
         modelName,
         local,
+        receive,
+        send,
         jwtToken
       })
     );
@@ -1606,7 +1781,16 @@ function ReactorProvider(_a) {
         console.error("[ReactorProvider] Failed to disconnect:", error);
       });
     };
-  }, [coordinatorUrl, modelName, autoConnect, local, jwtToken, maxAttempts]);
+  }, [
+    coordinatorUrl,
+    modelName,
+    autoConnect,
+    local,
+    receive,
+    send,
+    jwtToken,
+    maxAttempts
+  ]);
   return /* @__PURE__ */ jsx(ReactorContext.Provider, { value: storeRef.current, children });
 }
 function useReactorStore(selector) {
@@ -1672,50 +1856,63 @@ function useStats() {
 }
 
 // src/react/ReactorView.tsx
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useMemo, useRef as useRef3 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function ReactorView({
+  track = "main_video",
+  audioTrack,
   width,
   height,
   className,
   style,
-  videoObjectFit = "contain"
+  videoObjectFit = "contain",
+  muted = true
 }) {
-  const { videoTrack, status } = useReactor((state) => ({
-    videoTrack: state.videoTrack,
-    status: state.status
-  }));
+  const { videoMediaTrack, audioMediaTrack, status } = useReactor((state) => {
+    var _a, _b;
+    return {
+      videoMediaTrack: (_a = state.tracks[track]) != null ? _a : null,
+      audioMediaTrack: audioTrack ? (_b = state.tracks[audioTrack]) != null ? _b : null : null,
+      status: state.status
+    };
+  });
   const videoRef = useRef3(null);
+  const mediaStream = useMemo(() => {
+    const tracks = [];
+    if (videoMediaTrack) tracks.push(videoMediaTrack);
+    if (audioMediaTrack) tracks.push(audioMediaTrack);
+    if (tracks.length === 0) return null;
+    return new MediaStream(tracks);
+  }, [videoMediaTrack, audioMediaTrack]);
   useEffect3(() => {
-    console.debug("[ReactorView] Video track effect triggered", {
+    console.debug("[ReactorView] Media track effect triggered", {
+      track,
       hasVideoElement: !!videoRef.current,
-      hasVideoTrack: !!videoTrack,
-      videoTrackKind: videoTrack == null ? void 0 : videoTrack.kind
+      hasVideoTrack: !!videoMediaTrack,
+      hasAudioTrack: !!audioMediaTrack
     });
-    if (videoRef.current && videoTrack) {
-      console.debug("[ReactorView] Attaching video track to element");
+    if (videoRef.current && mediaStream) {
+      console.debug("[ReactorView] Attaching media stream to element");
       try {
-        const stream = new MediaStream([videoTrack]);
-        videoRef.current.srcObject = stream;
+        videoRef.current.srcObject = mediaStream;
         videoRef.current.play().catch((e) => {
           console.warn("[ReactorView] Auto-play failed:", e);
         });
-        console.debug("[ReactorView] Video track attached successfully");
+        console.debug("[ReactorView] Media stream attached successfully");
       } catch (error) {
-        console.error("[ReactorView] Failed to attach video track:", error);
+        console.error("[ReactorView] Failed to attach media stream:", error);
       }
       return () => {
-        console.debug("[ReactorView] Detaching video track from element");
+        console.debug("[ReactorView] Detaching media stream from element");
         if (videoRef.current) {
           videoRef.current.srcObject = null;
-          console.debug("[ReactorView] Video track detached successfully");
         }
       };
     } else {
-      console.debug("[ReactorView] No video track or element to attach");
+      console.debug("[ReactorView] No tracks or element to attach");
     }
-  }, [videoTrack]);
-  const showPlaceholder = !videoTrack;
+  }, [mediaStream]);
+  const showPlaceholder = !videoMediaTrack;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1735,7 +1932,7 @@ function ReactorView({
               objectFit: videoObjectFit,
               display: showPlaceholder ? "none" : "block"
             },
-            muted: true,
+            muted,
             playsInline: true
           }
         ),
@@ -2223,6 +2420,7 @@ function ReactorController({
 import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function WebcamStream({
+  track,
   className,
   style,
   videoConstraints = {
@@ -2235,10 +2433,10 @@ function WebcamStream({
   const [stream, setStream] = useState4(null);
   const [isPublishing, setIsPublishing] = useState4(false);
   const [permissionDenied, setPermissionDenied] = useState4(false);
-  const { status, publishVideoStream, unpublishVideoStream, reactor } = useReactor((state) => ({
+  const { status, publish, unpublish, reactor } = useReactor((state) => ({
     status: state.status,
-    publishVideoStream: state.publishVideoStream,
-    unpublishVideoStream: state.unpublishVideoStream,
+    publish: state.publish,
+    unpublish: state.unpublish,
     reactor: state.internal.reactor
   }));
   const videoRef = useRef4(null);
@@ -2263,15 +2461,15 @@ function WebcamStream({
   const stopWebcam = () => __async(null, null, function* () {
     console.debug("[WebcamPublisher] Stopping webcam");
     try {
-      yield unpublishVideoStream();
+      yield unpublish(track);
       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);
+    stream == null ? void 0 : stream.getTracks().forEach((t) => {
+      t.stop();
+      console.debug("[WebcamPublisher] Stopped track:", t.kind);
     });
     setStream(null);
     console.debug("[WebcamPublisher] Webcam stopped");
@@ -2301,28 +2499,31 @@ function WebcamStream({
       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);
-      });
+      const videoTrack = stream.getVideoTracks()[0];
+      if (videoTrack) {
+        publish(track, videoTrack).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(() => {
+      unpublish(track).then(() => {
         console.debug("[WebcamPublisher] Auto-unpublish successful");
         setIsPublishing(false);
       }).catch((err) => {
         console.error("[WebcamPublisher] Auto-unpublish failed:", err);
       });
     }
-  }, [status, stream, isPublishing, publishVideoStream, unpublishVideoStream]);
+  }, [status, stream, isPublishing, publish, unpublish, track]);
   useEffect4(() => {
     const handleError = (error) => {
       console.debug("[WebcamPublisher] Received error event:", error);
-      if (error.code === "VIDEO_PUBLISH_FAILED") {
+      if (error.code === "TRACK_PUBLISH_FAILED") {
         console.debug(
-          "[WebcamPublisher] Video publish failed, resetting isPublishing state"
+          "[WebcamPublisher] Track publish failed, resetting isPublishing state"
         );
         setIsPublishing(false);
       }
@@ -2437,11 +2638,13 @@ export {
   ReactorProvider,
   ReactorView,
   WebcamStream,
+  audio,
   fetchInsecureJwtToken,
   useReactor,
   useReactorInternalMessage,
   useReactorMessage,
   useReactorStore,
-  useStats
+  useStats,
+  video
 };
 //# sourceMappingURL=index.mjs.map