@reactor-team/js-sdk 2.3.2 → 2.4.0

package/dist/index.mjs

@@ -206,6 +206,52 @@ function parseMessage(data) {
 function closePeerConnection(pc) {
   pc.close();
 }
+function extractConnectionStats(report) {
+  let rtt;
+  let availableOutgoingBitrate;
+  let localCandidateId;
+  let framesPerSecond;
+  let jitter;
+  let packetLossRatio;
+  report.forEach((stat) => {
+    if (stat.type === "candidate-pair" && stat.state === "succeeded") {
+      if (stat.currentRoundTripTime !== void 0) {
+        rtt = stat.currentRoundTripTime * 1e3;
+      }
+      if (stat.availableOutgoingBitrate !== void 0) {
+        availableOutgoingBitrate = stat.availableOutgoingBitrate;
+      }
+      localCandidateId = stat.localCandidateId;
+    }
+    if (stat.type === "inbound-rtp" && stat.kind === "video") {
+      if (stat.framesPerSecond !== void 0) {
+        framesPerSecond = stat.framesPerSecond;
+      }
+      if (stat.jitter !== void 0) {
+        jitter = stat.jitter;
+      }
+      if (stat.packetsReceived !== void 0 && stat.packetsLost !== void 0 && stat.packetsReceived + stat.packetsLost > 0) {
+        packetLossRatio = stat.packetsLost / (stat.packetsReceived + stat.packetsLost);
+      }
+    }
+  });
+  let candidateType;
+  if (localCandidateId) {
+    const localCandidate = report.get(localCandidateId);
+    if (localCandidate == null ? void 0 : localCandidate.candidateType) {
+      candidateType = localCandidate.candidateType;
+    }
+  }
+  return {
+    rtt,
+    candidateType,
+    availableOutgoingBitrate,
+    framesPerSecond,
+    packetLossRatio,
+    jitter,
+    timestamp: Date.now()
+  };
+}
 
 // src/core/CoordinatorClient.ts
 var INITIAL_BACKOFF_MS = 500;
@@ -581,6 +627,7 @@ var LocalCoordinatorClient = class extends CoordinatorClient {
 
 // src/core/GPUMachineClient.ts
 var PING_INTERVAL_MS = 5e3;
+var STATS_INTERVAL_MS = 2e3;
 var GPUMachineClient = class {
   constructor(config) {
     this.eventListeners = /* @__PURE__ */ new Map();
@@ -664,6 +711,7 @@ var GPUMachineClient = class {
   disconnect() {
     return __async(this, null, function* () {
       this.stopPing();
+      this.stopStatsPolling();
       if (this.publishedTrack) {
         yield this.unpublishTrack();
       }
@@ -820,6 +868,31 @@ var GPUMachineClient = class {
     }
   }
   // ─────────────────────────────────────────────────────────────────────────────
+  // Stats Polling (RTT)
+  // ─────────────────────────────────────────────────────────────────────────────
+  getStats() {
+    return this.stats;
+  }
+  startStatsPolling() {
+    this.stopStatsPolling();
+    this.statsInterval = setInterval(() => __async(this, null, function* () {
+      if (!this.peerConnection) return;
+      try {
+        const report = yield this.peerConnection.getStats();
+        this.stats = extractConnectionStats(report);
+        this.emit("statsUpdate", this.stats);
+      } catch (e) {
+      }
+    }), STATS_INTERVAL_MS);
+  }
+  stopStatsPolling() {
+    if (this.statsInterval !== void 0) {
+      clearInterval(this.statsInterval);
+      this.statsInterval = void 0;
+    }
+    this.stats = void 0;
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
   // Private Helpers
   // ─────────────────────────────────────────────────────────────────────────────
   setStatus(newStatus) {
@@ -838,6 +911,7 @@ var GPUMachineClient = class {
         switch (state) {
           case "connected":
             this.setStatus("connected");
+            this.startStatsPolling();
             break;
           case "disconnected":
           case "closed":
@@ -1127,7 +1201,11 @@ var Reactor = class {
   setupMachineClientHandlers() {
     if (!this.machineClient) return;
     this.machineClient.on("message", (message, scope) => {
-      this.emit("newMessage", message, scope);
+      if (scope === "application") {
+        this.emit("message", message);
+      } else if (scope === "runtime") {
+        this.emit("runtimeMessage", message);
+      }
     });
     this.machineClient.on("statusChanged", (status) => {
       switch (status) {
@@ -1154,6 +1232,9 @@ var Reactor = class {
         this.emit("streamChanged", track, stream);
       }
     );
+    this.machineClient.on("statsUpdate", (stats) => {
+      this.emit("statsUpdate", stats);
+    });
   }
   /**
    * Disconnects from the coordinator and the gpu machine.
@@ -1240,6 +1321,10 @@ var Reactor = class {
   getLastError() {
     return this.lastError;
   }
+  getStats() {
+    var _a;
+    return (_a = this.machineClient) == null ? void 0 : _a.getStats();
+  }
   /**
    * Create and store an error
    */
@@ -1328,10 +1413,10 @@ var createReactorStore = (initProps, publicState = defaultInitState) => {
       // actions
       onMessage: (handler) => {
         console.debug("[ReactorStore] Registering message handler");
-        get().internal.reactor.on("newMessage", handler);
+        get().internal.reactor.on("message", handler);
         return () => {
           console.debug("[ReactorStore] Cleaning up message handler");
-          get().internal.reactor.off("newMessage", handler);
+          get().internal.reactor.off("message", handler);
         };
       },
       sendCommand: (command, data, scope) => __async(null, null, function* () {
@@ -1534,7 +1619,7 @@ function useReactorStore(selector) {
 
 // src/react/hooks.ts
 import { useShallow } from "zustand/shallow";
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 function useReactor(selector) {
   return useReactorStore(useShallow(selector));
 }
@@ -1545,21 +1630,45 @@ function useReactorMessage(handler) {
     handlerRef.current = handler;
   }, [handler]);
   useEffect2(() => {
-    console.debug("[useReactorMessage] Setting up message subscription");
-    const stableHandler = (message, scope) => {
-      console.debug("[useReactorMessage] Message received", {
-        message,
-        scope
-      });
-      handlerRef.current(message, scope);
+    const stableHandler = (message) => {
+      handlerRef.current(message);
+    };
+    reactor.on("message", stableHandler);
+    return () => {
+      reactor.off("message", stableHandler);
+    };
+  }, [reactor]);
+}
+function useReactorInternalMessage(handler) {
+  const reactor = useReactor((state) => state.internal.reactor);
+  const handlerRef = useRef2(handler);
+  useEffect2(() => {
+    handlerRef.current = handler;
+  }, [handler]);
+  useEffect2(() => {
+    const stableHandler = (message) => {
+      handlerRef.current(message);
+    };
+    reactor.on("runtimeMessage", stableHandler);
+    return () => {
+      reactor.off("runtimeMessage", stableHandler);
+    };
+  }, [reactor]);
+}
+function useStats() {
+  const reactor = useReactor((state) => state.internal.reactor);
+  const [stats, setStats] = useState2(void 0);
+  useEffect2(() => {
+    const handler = (newStats) => {
+      setStats(newStats);
     };
-    reactor.on("newMessage", stableHandler);
-    console.debug("[useReactorMessage] Message handler registered");
+    reactor.on("statsUpdate", handler);
     return () => {
-      console.debug("[useReactorMessage] Cleaning up message subscription");
-      reactor.off("newMessage", stableHandler);
+      reactor.off("statsUpdate", handler);
+      setStats(void 0);
     };
   }, [reactor]);
+  return stats;
 }
 
 // src/react/ReactorView.tsx
@@ -1658,7 +1767,7 @@ function ReactorView({
 }
 
 // src/react/ReactorController.tsx
-import React, { useState as useState2, useCallback } from "react";
+import React, { useState as useState3, useCallback } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ReactorController({
   className,
@@ -1668,9 +1777,9 @@ function ReactorController({
     sendCommand: state.sendCommand,
     status: state.status
   }));
-  const [commands, setCommands] = useState2({});
-  const [formValues, setFormValues] = useState2({});
-  const [expandedCommands, setExpandedCommands] = useState2({});
+  const [commands, setCommands] = useState3({});
+  const [formValues, setFormValues] = useState3({});
+  const [expandedCommands, setExpandedCommands] = useState3({});
   React.useEffect(() => {
     if (status === "disconnected") {
       setCommands({});
@@ -1697,8 +1806,8 @@ function ReactorController({
     }, 5e3);
     return () => clearInterval(interval);
   }, [status, commands, requestCapabilities]);
-  useReactorMessage((message, scope) => {
-    if (scope === "runtime" && message && typeof message === "object" && message.type === "modelCapabilities" && message.data && "commands" in message.data) {
+  useReactorInternalMessage((message) => {
+    if (message && typeof message === "object" && message.type === "modelCapabilities" && message.data && "commands" in message.data) {
       const commandsMessage = message.data;
       setCommands(commandsMessage.commands);
       const initialValues = {};
@@ -2111,7 +2220,7 @@ function ReactorController({
 }
 
 // src/react/WebcamStream.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
+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({
   className,
@@ -2123,9 +2232,9 @@ function WebcamStream({
   showWebcam = true,
   videoObjectFit = "contain"
 }) {
-  const [stream, setStream] = useState3(null);
-  const [isPublishing, setIsPublishing] = useState3(false);
-  const [permissionDenied, setPermissionDenied] = useState3(false);
+  const [stream, setStream] = useState4(null);
+  const [isPublishing, setIsPublishing] = useState4(false);
+  const [permissionDenied, setPermissionDenied] = useState4(false);
   const { status, publishVideoStream, unpublishVideoStream, reactor } = useReactor((state) => ({
     status: state.status,
     publishVideoStream: state.publishVideoStream,
@@ -2330,7 +2439,9 @@ export {
   WebcamStream,
   fetchInsecureJwtToken,
   useReactor,
+  useReactorInternalMessage,
   useReactorMessage,
-  useReactorStore
+  useReactorStore,
+  useStats
 };
 //# sourceMappingURL=index.mjs.map