@midscene/android-playground 0.14.4-beta-20250416024415.0 → 0.14.4-beta-20250416041002.0

package/dist/lib/index.js

@@ -0,0 +1,460 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/index.ts
+var import_node_path = __toESM(require("path"));
+var import_android = require("@midscene/android");
+var import_constants2 = require("@midscene/shared/constants");
+var import_midscene_server = __toESM(require("@midscene/web/midscene-server"));
+
+// src/scrcpy-server.ts
+var import_node_child_process = require("child_process");
+var import_node_fs = require("fs");
+var import_node_http = require("http");
+var import_node_util = require("util");
+var import_constants = require("@midscene/shared/constants");
+var import_logger = require("@midscene/shared/logger");
+var import_cors = __toESM(require("cors"));
+var import_express = __toESM(require("express"));
+var import_socket = require("socket.io");
+var debugPage = (0, import_logger.getDebug)("android:playground");
+var promiseExec = (0, import_node_util.promisify)(import_node_child_process.exec);
+var ScrcpyServer = class {
+  // use for comparing changes
+  constructor() {
+    this.defaultPort = import_constants.SCRCPY_SERVER_PORT;
+    this.adbClient = null;
+    this.currentDeviceId = null;
+    this.devicePollInterval = null;
+    this.lastDeviceList = "";
+    this.app = (0, import_express.default)();
+    this.httpServer = (0, import_node_http.createServer)(this.app);
+    this.io = new import_socket.Server(this.httpServer, {
+      cors: {
+        origin: [
+          /^http:\/\/localhost(:\d+)?$/,
+          /^http:\/\/127\.0\.0\.1(:\d+)?$/
+        ],
+        methods: ["GET", "POST"],
+        credentials: true
+      }
+    });
+    this.app.use(
+      (0, import_cors.default)({
+        origin: "*",
+        credentials: true
+      })
+    );
+    this.setupSocketHandlers();
+    this.setupApiRoutes();
+  }
+  // setup API routes
+  setupApiRoutes() {
+    this.app.get("/api/devices", async (req, res) => {
+      try {
+        const devices = await this.getDevicesList();
+        res.json({ devices, currentDeviceId: this.currentDeviceId });
+      } catch (error) {
+        res.status(500).json({ error: error.message || "Failed to get devices list" });
+      }
+    });
+  }
+  // get devices list
+  async getDevicesList() {
+    try {
+      debugPage("start to get devices list");
+      const client = await this.getAdbClient();
+      if (!client) {
+        console.warn("failed to get adb client");
+        return [];
+      }
+      debugPage("success to get adb client, start to request devices list");
+      let devices;
+      try {
+        devices = await client.getDevices();
+        debugPage("original devices list:", devices);
+      } catch (error) {
+        console.error("failed to get devices list:", error);
+        return [];
+      }
+      if (!devices || devices.length === 0) {
+        return [];
+      }
+      const formattedDevices = devices.map((device) => {
+        const result = {
+          id: device.serial,
+          name: device.product || device.model || device.serial,
+          status: device.state || "device"
+        };
+        return result;
+      });
+      return formattedDevices;
+    } catch (error) {
+      console.error("failed to get devices list:", error);
+      return [];
+    }
+  }
+  // get adb client
+  async getAdbClient() {
+    const { AdbServerClient } = await import("@yume-chan/adb");
+    const { AdbServerNodeTcpConnector } = await import("@yume-chan/adb-server-node-tcp");
+    try {
+      if (!this.adbClient) {
+        await promiseExec("adb start-server");
+        debugPage("adb server started");
+        debugPage("initialize adb client");
+        this.adbClient = new AdbServerClient(
+          new AdbServerNodeTcpConnector({
+            host: "localhost",
+            port: 5037
+          })
+        );
+        await debugPage("success to initialize adb client");
+      } else {
+        debugPage("use existing adb client");
+      }
+      return this.adbClient;
+    } catch (error) {
+      console.error("failed to get adb client:", error);
+      return null;
+    }
+  }
+  // get adb object
+  async getAdb(deviceId) {
+    const { Adb } = await import("@yume-chan/adb");
+    try {
+      const client = await this.getAdbClient();
+      if (!client) {
+        return null;
+      }
+      if (deviceId) {
+        this.currentDeviceId = deviceId;
+        return new Adb(await client.createTransport({ serial: deviceId }));
+      }
+      const devices = await client.getDevices();
+      if (devices.length === 0) {
+        return null;
+      }
+      this.currentDeviceId = devices[0].serial;
+      return new Adb(await client.createTransport(devices[0]));
+    } catch (error) {
+      console.error("failed to get adb client:", error);
+      return null;
+    }
+  }
+  // start scrcpy
+  async startScrcpy(adb, options = {}) {
+    const { AdbScrcpyClient, AdbScrcpyOptions2_1 } = await import("@yume-chan/adb-scrcpy");
+    const { ReadableStream } = await import("@yume-chan/stream-extra");
+    const { ScrcpyOptions3_1, DefaultServerPath } = await import("@yume-chan/scrcpy");
+    const { BIN } = await import("@yume-chan/fetch-scrcpy-server");
+    try {
+      await AdbScrcpyClient.pushServer(
+        adb,
+        ReadableStream.from((0, import_node_fs.createReadStream)(BIN))
+      );
+      const scrcpyOptions = new ScrcpyOptions3_1({
+        // default options
+        audio: false,
+        control: true,
+        maxSize: 1024,
+        // use videoBitRate as property name
+        videoBitRate: 2e6,
+        // override default values with user provided options
+        ...options
+      });
+      return await AdbScrcpyClient.start(
+        adb,
+        DefaultServerPath,
+        new AdbScrcpyOptions2_1(scrcpyOptions)
+      );
+    } catch (error) {
+      console.error("failed to start scrcpy:", error);
+      throw error;
+    }
+  }
+  // setup Socket.IO connection handlers
+  setupSocketHandlers() {
+    this.io.on("connection", async (socket) => {
+      debugPage(
+        "client connected, id: %s, client address: %s",
+        socket.id,
+        socket.handshake.address
+      );
+      let scrcpyClient = null;
+      let adb = null;
+      const sendDevicesList = async () => {
+        try {
+          debugPage("Socket request to get devices list");
+          const devices = await this.getDevicesList();
+          debugPage("send devices list to client:", devices);
+          socket.emit("devices-list", {
+            devices,
+            currentDeviceId: this.currentDeviceId
+          });
+        } catch (error) {
+          console.error("failed to send devices list:", error);
+          socket.emit("error", { message: "failed to get devices list" });
+        }
+      };
+      await sendDevicesList();
+      socket.on("get-devices", async () => {
+        debugPage("received client request to get devices list");
+        await sendDevicesList();
+      });
+      socket.on("switch-device", async (deviceId) => {
+        debugPage("received client request to switch device:", deviceId);
+        try {
+          if (scrcpyClient) {
+            await scrcpyClient.close();
+            scrcpyClient = null;
+          }
+          this.currentDeviceId = deviceId;
+          debugPage("device switched to:", deviceId);
+          socket.emit("device-switched", { deviceId });
+          this.io.emit("global-device-switched", {
+            deviceId,
+            timestamp: Date.now()
+          });
+        } catch (error) {
+          console.error("failed to switch device:", error);
+          socket.emit("error", {
+            message: `Failed to switch device: ${error?.message || "Unknown error"}`
+          });
+        }
+      });
+      socket.on("connect-device", async (options) => {
+        const { ScrcpyVideoCodecId } = await import("@yume-chan/scrcpy");
+        try {
+          debugPage(
+            "received device connection request, options: %s, client id: %s",
+            options,
+            socket.id
+          );
+          adb = await this.getAdb(this.currentDeviceId || void 0);
+          if (!adb) {
+            console.error("no available device found");
+            socket.emit("error", { message: "No device found" });
+            return;
+          }
+          debugPage(
+            "starting scrcpy service, device id: %s",
+            this.currentDeviceId
+          );
+          scrcpyClient = await this.startScrcpy(adb, options);
+          debugPage("scrcpy service started successfully");
+          debugPage(
+            "check scrcpyClient object structure: %s",
+            Object.getOwnPropertyNames(scrcpyClient).map((name) => {
+              const type = typeof scrcpyClient[name];
+              const isPromise = type === "object" && scrcpyClient[name] && typeof scrcpyClient[name].then === "function";
+              return `${name}: ${type}${isPromise ? " (Promise)" : ""}`;
+            })
+          );
+          try {
+            if (scrcpyClient.videoStream) {
+              debugPage(
+                "videoStream exists, type: %s",
+                typeof scrcpyClient.videoStream
+              );
+              let videoStream;
+              if (typeof scrcpyClient.videoStream === "object" && typeof scrcpyClient.videoStream.then === "function") {
+                debugPage(
+                  "videoStream is a Promise, waiting for resolution..."
+                );
+                videoStream = await scrcpyClient.videoStream;
+              } else {
+                debugPage("videoStream is not a Promise, directly use");
+                videoStream = scrcpyClient.videoStream;
+              }
+              debugPage(
+                "video stream fetched successfully, metadata: %s",
+                videoStream.metadata
+              );
+              const metadata = videoStream.metadata || {};
+              debugPage("original metadata: %s", metadata);
+              if (!metadata.codec) {
+                debugPage(
+                  "metadata does not have codec field, use H264 by default"
+                );
+                metadata.codec = ScrcpyVideoCodecId.H264;
+              }
+              if (!metadata.width || !metadata.height) {
+                debugPage(
+                  "metadata does not have width or height field, use default values"
+                );
+                metadata.width = metadata.width || 1080;
+                metadata.height = metadata.height || 1920;
+              }
+              debugPage(
+                "prepare to send video-metadata event to client, data: %s",
+                JSON.stringify(metadata)
+              );
+              socket.emit("video-metadata", metadata);
+              debugPage(
+                "video-metadata event sent to client, id: %s",
+                socket.id
+              );
+              const { stream } = videoStream;
+              const reader = stream.getReader();
+              const processStream = async () => {
+                try {
+                  while (true) {
+                    const { done, value } = await reader.read();
+                    if (done)
+                      break;
+                    const frameType = value.type || "data";
+                    socket.emit("video-data", {
+                      data: Array.from(value.data),
+                      type: frameType,
+                      timestamp: Date.now(),
+                      // fix keyframe access
+                      keyFrame: value.keyFrame
+                    });
+                  }
+                } catch (error) {
+                  console.error("error processing video stream:", error);
+                  socket.emit("error", {
+                    message: "video stream processing error"
+                  });
+                }
+              };
+              processStream();
+            } else {
+              console.error(
+                "scrcpyClient object does not have videoStream property"
+              );
+              socket.emit("error", {
+                message: "Video stream not available in scrcpy client"
+              });
+            }
+          } catch (error) {
+            console.error("error processing video stream:", error);
+            socket.emit("error", {
+              message: `Video stream processing error: ${error.message}`
+            });
+          }
+          if (scrcpyClient?.controller) {
+            socket.emit("control-ready");
+          }
+        } catch (error) {
+          console.error("failed to connect device:", error);
+          socket.emit("error", {
+            message: `Failed to connect device: ${error?.message || "Unknown error"}`
+          });
+        }
+      });
+      socket.on("disconnect", async (reason) => {
+        debugPage("client disconnected, id: %s, reason: %s", socket.id, reason);
+        if (scrcpyClient) {
+          try {
+            debugPage("closing scrcpy client");
+            await scrcpyClient.close();
+          } catch (error) {
+            console.error("failed to close scrcpy client:", error);
+          }
+          scrcpyClient = null;
+        }
+      });
+    });
+  }
+  // launch server
+  async launch(port) {
+    this.port = port || this.defaultPort;
+    return new Promise((resolve) => {
+      this.httpServer.listen(this.port, () => {
+        console.log(`Scrcpy server running at: http://localhost:${this.port}`);
+        this.startDeviceMonitoring();
+        resolve(this);
+      });
+    });
+  }
+  // start device monitoring
+  startDeviceMonitoring() {
+    this.devicePollInterval = setInterval(async () => {
+      try {
+        const devices = await this.getDevicesList();
+        const currentDevicesJson = JSON.stringify(devices);
+        if (this.lastDeviceList !== currentDevicesJson) {
+          debugPage("devices list changed, push to all connected clients");
+          this.lastDeviceList = currentDevicesJson;
+          if (!this.currentDeviceId && devices.length > 0) {
+            const onlineDevices = devices.filter(
+              (device) => device.status.toLowerCase() === "device"
+            );
+            if (onlineDevices.length > 0) {
+              this.currentDeviceId = onlineDevices[0].id;
+              debugPage(
+                "auto select the first online device:",
+                this.currentDeviceId
+              );
+            }
+          }
+          this.io.emit("devices-list", {
+            devices,
+            currentDeviceId: this.currentDeviceId
+          });
+        }
+      } catch (error) {
+        console.error("device monitoring error:", error);
+      }
+    }, 3e3);
+  }
+  // close server
+  close() {
+    if (this.devicePollInterval) {
+      clearInterval(this.devicePollInterval);
+      this.devicePollInterval = null;
+    }
+    if (this.httpServer) {
+      return this.httpServer.close();
+    }
+  }
+};
+
+// src/index.ts
+var staticDir = import_node_path.default.join(__dirname, "../../static");
+var playgroundServer = new import_midscene_server.default(
+  import_android.AndroidDevice,
+  import_android.AndroidAgent,
+  staticDir
+);
+var scrcpyServer = new ScrcpyServer();
+var main = async () => {
+  const { default: open } = await import("open");
+  try {
+    await Promise.all([
+      playgroundServer.launch(import_constants2.PLAYGROUND_SERVER_PORT),
+      scrcpyServer.launch(import_constants2.SCRCPY_SERVER_PORT)
+    ]);
+    console.log(
+      `Midscene playground server is running on http://localhost:${playgroundServer.port}`
+    );
+    open(`http://localhost:${playgroundServer.port}`);
+  } catch (error) {
+    console.error("Failed to start servers:", error);
+    process.exit(1);
+  }
+};
+main();

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/android-playground",
-  "version": "0.14.4-beta-20250416024415.0",
+  "version": "0.14.4-beta-20250416041002.0",
   "description": "Android playground for Midscene",
   "main": "./dist/lib/index.js",
   "types": "./dist/types/index.d.ts",
@@ -25,9 +25,9 @@
     "express": "^4.21.2",
     "open": "10.1.0",
     "socket.io": "^4.8.1",
-    "@midscene/shared": "0.14.4-beta-20250416024415.0",
-    "@midscene/web": "0.14.4-beta-20250416024415.0",
-    "@midscene/android": "0.14.4-beta-20250416024415.0"
+    "@midscene/shared": "0.14.4-beta-20250416041002.0",
+    "@midscene/android": "0.14.4-beta-20250416041002.0",
+    "@midscene/web": "0.14.4-beta-20250416041002.0"
   },
   "devDependencies": {
     "@modern-js/module-tools": "2.60.6",

package/static/index.html

@@ -1 +1 @@
-<!doctype html><html><head><title>Midscene Android Playground</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script defer src="/static/js/lib-react.9955fef2.js"></script><script defer src="/static/js/507.b955f683.js"></script><script defer src="/static/js/index.6a9903a5.js"></script><link href="/static/css/index.21e939b0.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
+<!doctype html><html><head><title>Midscene Android Playground</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script defer src="/static/js/lib-react.9955fef2.js"></script><script defer src="/static/js/507.b955f683.js"></script><script defer src="/static/js/index.809dee96.js"></script><link href="/static/css/index.21e939b0.css" rel="stylesheet"></head><body><div id="root"></div></body></html>