@midscene/visualizer 0.17.5 → 0.17.6-beta-20250607054355.0

package/dist/es/component/player.js

@@ -15,6 +15,10 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -50,6 +54,7 @@ import { mouseLoading, mousePointer } from "../utils";
 import {
   CaretRightOutlined,
   DownloadOutlined,
+  ExportOutlined,
   LoadingOutlined
 } from "@ant-design/icons";
 import { Spin, Tooltip } from "antd";
@@ -120,6 +125,49 @@ const downloadReport = (content) => {
   a.download = "midscene_report.html";
   a.click();
 };
+class RecordingSession {
+  constructor(canvas) {
+    __publicField(this, "canvas");
+    __publicField(this, "mediaRecorder", null);
+    __publicField(this, "chunks");
+    __publicField(this, "recording", false);
+    this.canvas = canvas;
+    this.chunks = [];
+  }
+  start() {
+    const stream = this.canvas.captureStream(60);
+    const mediaRecorder = new MediaRecorder(stream, {
+      mimeType: "video/webm"
+    });
+    mediaRecorder.ondataavailable = (event) => {
+      if (event.data.size > 0) {
+        this.chunks.push(event.data);
+      }
+    };
+    this.mediaRecorder = mediaRecorder;
+    this.recording = true;
+    return this.mediaRecorder.start();
+  }
+  stop() {
+    var _a;
+    if (!this.recording || !this.mediaRecorder) {
+      console.warn("not recording");
+      return;
+    }
+    this.mediaRecorder.onstop = () => {
+      const blob = new Blob(this.chunks, { type: "video/webm" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "midscene_replay.webm";
+      a.click();
+      URL.revokeObjectURL(url);
+    };
+    (_a = this.mediaRecorder) == null ? void 0 : _a.stop();
+    this.recording = false;
+    this.mediaRecorder = null;
+  }
+}
 function Player(props) {
   var _a;
   const [titleText, setTitleText] = useState("");
@@ -133,6 +181,9 @@ function Player(props) {
   const pointerSprite = useRef(null);
   const spinningPointerSprite = useRef(null);
   const [replayMark, setReplayMark] = useState(0);
+  const triggerReplay = () => {
+    setReplayMark(Date.now());
+  };
   const windowContentContainer = useMemo(() => {
     const container = new PIXI.Container();
     return container;
@@ -448,6 +499,21 @@ function Player(props) {
     insightMarkContainer.y = 0;
     windowContentContainer.addChild(insightMarkContainer);
   });
+  const [isRecording, setIsRecording] = useState(false);
+  const recorderSessionRef = useRef(null);
+  const handleExport = () => {
+    if (recorderSessionRef.current) {
+      console.warn("recorderSession exists");
+      return;
+    }
+    if (!app.canvas) {
+      console.warn("canvas is not initialized");
+      return;
+    }
+    recorderSessionRef.current = new RecordingSession(app.canvas);
+    setIsRecording(true);
+    triggerReplay();
+  };
   const play = () => {
     let cancelFn;
     Promise.resolve(
@@ -470,7 +536,7 @@ function Player(props) {
         yield repaintImage();
         yield updateCamera(__spreadValues({}, basicCameraState));
         const totalDuration = scripts.reduce((acc, item) => {
-          return acc + item.duration + (item.insightCameraDuration || 0);
+          return acc + item.duration + (item.camera && item.insightCameraDuration ? item.insightCameraDuration : 0);
         }, 0);
         const progressUpdateInterval = 200;
         const startTime = performance.now();
@@ -486,6 +552,9 @@ function Player(props) {
           }
         };
         frame(updateProgress);
+        if (recorderSessionRef.current) {
+          recorderSessionRef.current.start();
+        }
         for (const index in scripts) {
           const item = scripts[index];
           setTitleText(item.title || "");
@@ -542,6 +611,11 @@ function Player(props) {
             stop();
           }
         }
+        if (recorderSessionRef.current) {
+          recorderSessionRef.current.stop();
+          recorderSessionRef.current = null;
+          setIsRecording(false);
+        }
       }))().catch((e) => {
         console.error("player error", e);
       })
@@ -554,7 +628,7 @@ function Player(props) {
     Promise.resolve(
       (() => __async(this, null, function* () {
         yield init();
-        setReplayMark(Date.now());
+        triggerReplay();
       }))()
     );
     return () => {
@@ -578,7 +652,7 @@ function Player(props) {
     if (canReplayNow) {
       const listener = (event) => {
         if (event.key === " ") {
-          setReplayMark(Date.now());
+          triggerReplay();
         }
       };
       window.addEventListener("keydown", listener);
@@ -594,7 +668,7 @@ function Player(props) {
     statusIconElement = /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true, color: "#333" }), size: "default" });
   } else if (mouseOverStatusIcon) {
     statusIconElement = /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(CaretRightOutlined, { color: "#333" }), size: "default" });
-    statusOnClick = () => setReplayMark(Date.now());
+    statusOnClick = () => triggerReplay();
   } else {
     statusIconElement = // <Spin indicator={<CheckCircleOutlined />} size="default" />
     /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(CaretRightOutlined, { color: "#333" }), size: "default" });
@@ -616,7 +690,7 @@ function Player(props) {
         /* @__PURE__ */ jsx("div", { className: "title", children: titleText }),
         /* @__PURE__ */ jsx(Tooltip, { title: subTitleText, children: /* @__PURE__ */ jsx("div", { className: "subtitle", children: subTitleText }) })
       ] }),
-      /* @__PURE__ */ jsx(
+      isRecording ? null : /* @__PURE__ */ jsx(
         "div",
         {
           className: "status-icon",
@@ -626,7 +700,7 @@ function Player(props) {
           children: statusIconElement
         }
       ),
-      (props == null ? void 0 : props.reportFileContent) ? /* @__PURE__ */ jsx(
+      (props == null ? void 0 : props.reportFileContent) ? /* @__PURE__ */ jsx(Tooltip, { title: "Download Report", children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "status-icon",
@@ -635,7 +709,19 @@ function Player(props) {
           onClick: () => downloadReport(props.reportFileContent),
           children: /* @__PURE__ */ jsx(DownloadOutlined, { color: "#333" })
         }
-      ) : null
+      ) }) : null,
+      /* @__PURE__ */ jsx(Tooltip, { title: isRecording ? "Generating..." : "Export Video", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "status-icon",
+          onClick: isRecording ? void 0 : handleExport,
+          style: {
+            opacity: isRecording ? 0.5 : 1,
+            cursor: isRecording ? "not-allowed" : "pointer"
+          },
+          children: isRecording ? /* @__PURE__ */ jsx(Spin, { size: "default", percent: progressString }) : /* @__PURE__ */ jsx(ExportOutlined, {})
+        }
+      ) })
     ] }) }) })
   ] });
 }

package/dist/es/index.js

@@ -39,6 +39,7 @@ import {
   getPlaceholderForType,
   blankResult
 } from "./component/playground/playground-utils";
+import { timeStr, filterBase64Value } from "./utils";
 export {
   Blackboard,
   ContextPreview,
@@ -55,6 +56,7 @@ export {
   blankResult,
   checkServerStatus,
   colorForName,
+  filterBase64Value,
   formatErrorMessage,
   generateAnimationScripts,
   getPlaceholderForType,
@@ -66,6 +68,7 @@ export {
   requestPlaygroundServer,
   staticAgentFromContext,
   timeCostStrElement,
+  timeStr,
   useEnvConfig,
   useServerValid,
   useStaticPageAgent