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

package/dist/es/index.d.ts

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

package/dist/es/index.js

@@ -0,0 +1,439 @@
+// src/index.ts
+import path from "path";
+import { AndroidAgent, AndroidDevice } from "@midscene/android";
+import {
+  PLAYGROUND_SERVER_PORT,
+  SCRCPY_SERVER_PORT as SCRCPY_SERVER_PORT2
+} from "@midscene/shared/constants";
+import PlaygroundServer from "@midscene/web/midscene-server";
+
+// src/scrcpy-server.ts
+import { exec } from "child_process";
+import { createReadStream } from "fs";
+import { createServer } from "http";
+import { promisify } from "util";
+import { SCRCPY_SERVER_PORT } from "@midscene/shared/constants";
+import { getDebug } from "@midscene/shared/logger";
+import cors from "cors";
+import express from "express";
+import { Server } from "socket.io";
+var debugPage = getDebug("android:playground");
+var promiseExec = promisify(exec);
+var ScrcpyServer = class {
+  // use for comparing changes
+  constructor() {
+    this.defaultPort = SCRCPY_SERVER_PORT;
+    this.adbClient = null;
+    this.currentDeviceId = null;
+    this.devicePollInterval = null;
+    this.lastDeviceList = "";
+    this.app = express();
+    this.httpServer = createServer(this.app);
+    this.io = new Server(this.httpServer, {
+      cors: {
+        origin: [
+          /^http:\/\/localhost(:\d+)?$/,
+          /^http:\/\/127\.0\.0\.1(:\d+)?$/
+        ],
+        methods: ["GET", "POST"],
+        credentials: true
+      }
+    });
+    this.app.use(
+      cors({
+        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(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 = path.join(__dirname, "../../static");
+var playgroundServer = new PlaygroundServer(
+  AndroidDevice,
+  AndroidAgent,
+  staticDir
+);
+var scrcpyServer = new ScrcpyServer();
+var main = async () => {
+  const { default: open } = await import("open");
+  try {
+    await Promise.all([
+      playgroundServer.launch(PLAYGROUND_SERVER_PORT),
+      scrcpyServer.launch(SCRCPY_SERVER_PORT2)
+    ]);
+    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/lib/index.d.ts

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