feat:stream live video of test execution (#41)

Author: sudharsan-selvaraj

.github/labeler.yml

@@ -1,14 +1,14 @@
 version: 1
 labels:
   - label: "enhancement"
-    titles:
+    title:
       - "^feat:.*"
   - label: "bug"
-    titles:
+    title:
       - "^fix:.*"
   - label: "test"
-    titles:
+    title:
       - "^test:.*"
   - label: "skip-changelog"
-    titles:
+    title:
       - "^test:.*"

.github/release-drafter-template.yml

@@ -2,10 +2,10 @@ name-template: "Release v$RESOLVED_VERSION 🔥"
 tag-template: "v$RESOLVED_VERSION"
 categories:
   - title: "🚀 Features"
-    label:
+    labels:
       - "enhancement"
   - title: "🐛 Bug Fixes"
-    label:
+    labels:
       - "bug"
 
 # Only include the following labels in the release notes. All other labels are ignored.

migrations/001_create_table.js

@@ -47,6 +47,7 @@ var createSessionTable = function (queryInterface, Sequelize) {
     automation_name: { type: Sequelize.TEXT, allowNull: false },
     device_name: { type: Sequelize.TEXT, allowNull: false },
     platform_version: { type: Sequelize.TEXT, allowNull: false },
+    live_stream_port: { type: Sequelize.INTEGER, allowNull: true },
     app: { type: Sequelize.TEXT, allowNull: true },
     browser_name: { type: Sequelize.TEXT, allowNull: true },
     udid: { type: Sequelize.TEXT, allowNull: false },

package-lock.json

@@ -45,9 +45,11 @@
     "cors": "^2.8.5",
     "debug": "^4.3.2",
     "express": "^4.17.1",
+    "get-port": "^5.1.1",
     "http-status": "^1.5.0",
     "lodash": "^4.17.21",
     "lokijs": "^1.5.12",
+    "mjpeg-proxy": "^0.3.0",
     "reflect-metadata": "^0.1.13",
     "sequelize": "^6.6.5",
     "sequelize-cli": "^6.2.0",

package.json

@@ -6,8 +6,11 @@ import fs from "fs";
 import { CommandLogs, HttpLogs, Logs, Profiling } from "../../models";
 import * as path from "path";
 import { parseSessionFilterParams } from "../utils/common-utils";
+import { MjpegProxy } from "mjpeg-proxy";
 
 export class SessionController extends BaseController {
+  private static mjpegProxyCache: Map<number, any> = new Map();
+
   public initializeRoutes(router: Router, config: any) {
     router.get("/", this.getSessions.bind(this));
     router.get("/:sessionId", this.getSessionBySessionId.bind(this));
@@ -19,6 +22,7 @@ export class SessionController extends BaseController {
     router.get("/:sessionId/logs/debug", this.getDebugLogs.bind(this));
     router.get("/:sessionId/profiling_data", this.getProfilingData.bind(this));
     router.get("/:sessionId/http_logs", this.getHttpLogs.bind(this));
+    router.get("/:sessionId/live_video", this.getVideo.bind(this));
   }
 
   public async getSessions(request: Request, response: Response, next: NextFunction) {
@@ -161,4 +165,23 @@ export class SessionController extends BaseController {
     });
     this.sendSuccessResponse(response, logs);
   }
+
+  public async getVideo(request: Request, response: Response, next: NextFunction) {
+    let sessionId: string = request.params.sessionId;
+    let session = await Session.findOne({
+      where: {
+        session_id: sessionId,
+      },
+    });
+    const proxyPort = session?.live_stream_port;
+    if (!proxyPort) {
+      return this.sendFailureResponse(response, { message: "Live stream not available" });
+    }
+
+    if (!SessionController.mjpegProxyCache.has(proxyPort)) {
+      const url = `${request.protocol}://${request.hostname}:${proxyPort}`;
+      SessionController.mjpegProxyCache.set(proxyPort, new MjpegProxy(url));
+    }
+    SessionController.mjpegProxyCache.get(proxyPort)?.proxyRequest(request, response);
+  }
 }

src/app/controllers/session-controller.ts

@@ -88,6 +88,12 @@ class Session extends Model<Session> {
   })
   browser_name!: string;
 
+  @AllowNull(true)
+  @Column({
+    type: DataTypes.INTEGER,
+  })
+  live_stream_port!: number;
+
   @AllowNull(false)
   @Column({
     type: DataTypes.STRING,

src/models/session.ts

@@ -5,6 +5,7 @@ import { retryInterval } from "asyncbox";
 import _ from "lodash";
 import { pluginLogger } from "../../loggers/plugin-logger";
 import { logger } from "../../loggers/logger";
+
 export type IosNetworkProfilerOptions = {
   udid: string;
   platformVersion: string;
@@ -72,26 +73,26 @@ class IosNetworkProfiler implements IHttpLogger {
   }
 
   getLogs(): Array<any> {
-    return Object.keys(this.logs);
+    return [];
   }
 
   private async initializeListeners() {
-    this.remoteDebugger.addClientEventListener("Network.requestWillBeSent", (err: any, event: any) => {
+    this.remoteDebugger.addClientEventListener("NetworkEvent", (err: any, event: any) => {
       pluginLogger.info(event);
       this.logs[event.requestId] = event;
     });
     this.remoteDebugger.addClientEventListener("Network.responseReceived", async (err: any, event: any) => {
+      pluginLogger.info(event);
       this.logs[event.requestId] = Object.assign({}, this.logs[event.requestId], {
         response: event,
       });
     });
     const page = _.find(await this.remoteDebugger.selectApp("http://0.0.0.0:4723/welcome"), (page) => {
-      logger.info(page);
       return page.url == "http://0.0.0.0:4723/welcome";
     });
     const [appIdKey, pageIdKey] = page.id.split(".").map((id: string) => parseInt(id, 10));
     pluginLogger.info(`AppId: ${appIdKey}  and pageIdKey: ${pageIdKey}`);
-    await this.remoteDebugger.selectPage(appIdKey, pageIdKey);
+    //await this.remoteDebugger.selectPage(appIdKey, pageIdKey);
   }
 
   private static async waitForRemoteDebugger(remoteDebugger: RemoteDebugger) {

src/plugin/http-logger/ios-http-logger.ts

@@ -9,6 +9,7 @@ import { PluginCliArgs } from "../interfaces/PluginCliArgs";
 import * as express from "express";
 import { registerDebugMiddlware } from "./debugger";
 import _ from "lodash";
+import getPort from "get-port";
 
 const sessionMap: Map<string, SessionManager> = new Map();
 const IGNORED_COMMANDS = ["getScreenshot", "stopRecordingScreen", "startRecordingScreen"];
@@ -100,6 +101,10 @@ class AppiumDashboardPlugin extends BasePlugin {
       "appium:nativeWebScreenshot": true, //to make screenshot endpoint work in android webview tests,
     };
 
+    if (rawCapabilities?.["platformName"].toLowerCase() == "android" && !rawCapabilities?.["appium:mjpegServerPort"]) {
+      newCapabilities["appium:mjpegServerPort"] = await getPort();
+    }
+
     Object.keys(newCapabilities).forEach((k) => {
       args[2][k] = newCapabilities[k];
       args[2].firstMatch[0][k] = newCapabilities[k];

src/plugin/index.ts

@@ -10,6 +10,7 @@ import {
   isAppProfilingSupported,
   isHttpLogsSuppoted,
   isAndroidSession,
+  getMjpegServerPort,
 } from "./utils/plugin-utils";
 import {
   getLogs,
@@ -204,6 +205,7 @@ class SessionManager {
         driver: command.driver,
       });
     }
+
     let { desired } = this.sessionInfo.capabilities;
     let buildName = desired["dashboard:build"];
     let projectName = desired["dashboard:project"];
@@ -220,6 +222,8 @@ class SessionManager {
       build = await getOrCreateNewBuild({ buildName, projectId: project?.id });
     }
 
+    await this.initializeScreenShotFolder();
+    await this.startScreenRecording(command.driver);
     await Session.create({
       ...this.sessionInfo,
       start_time: new Date(),
@@ -228,11 +232,10 @@ class SessionManager {
       device_info,
       is_profiling_available,
       name: name || null,
+      live_stream_port: await getMjpegServerPort(command.driver, this.sessionInfo.session_id),
     } as any);
 
     await this.saveCommandLog(command, null);
-    await this.initializeScreenShotFolder();
-    return await this.startScreenRecording(command.driver);
   }
 
   public async sessionTerminated(options: { sessionTimedOut: boolean } = { sessionTimedOut: false }) {