Support Video Capture

doc/CHANGES.txt

@@ -35,6 +35,9 @@ Changelog
 - cleaned up bestiary window layout
 - performance optimization: sound events too far away to be heard are not loaded
 
+*alpha features*
+- built-in support added for capturing video of web client viewport
+
 
 1.47
 

src/js/stendhal/SlashActionRepo.ts

@@ -19,6 +19,7 @@ import { DebugAction } from "./action/DebugAction";
 import { OpenWebsiteAction } from "./action/OpenWebsiteAction";
 import { ProgressStatusAction } from "./action/ProgressStatusAction";
 import { ReTellAction } from "./action/ReTellAction";
+import { ScreenCaptureAction } from "./action/ScreenCaptureAction";
 import { SettingsAction } from "./action/SettingsAction";
 import { SlashActionImpl } from "./action/SlashAction";
 import { TellAction } from "./action/TellAction";
@@ -29,6 +30,7 @@ import { UIComponentEnum } from "./ui/UIComponentEnum";
 import { ChatLogComponent } from "./ui/component/ChatLogComponent";
 
 import { Chat } from "./util/Chat";
+import { Debug } from "./util/Debug";
 
 
 /**
@@ -132,6 +134,7 @@ export class SlashActionRepo {
 			"TOOLS": [
 				"progressstatus",
 				"screenshot",
+				//"screencap",
 				"atlas",
 				"beginnersguide"
 			],
@@ -220,6 +223,11 @@ export class SlashActionRepo {
 				{type: "group", sparams: "status"}
 			]
 		};
+
+		if (Debug.isActive("screencap")) {
+			grouping["TOOLS"].push("screencap");
+		}
+
 		return {
 			info: [
 				"For a detailed reference, visit #https://stendhalgame.org/wiki/Stendhal_Manual",
@@ -1122,6 +1130,8 @@ export class SlashActionRepo {
 		}
 	};
 
+	"screencap" = new ScreenCaptureAction();
+
 	"sentence": SlashActionImpl = {
 		execute: (type: string, params: string[], remainder: string): boolean => {
 			if (params == null) {

src/js/stendhal/action/DebugAction.ts

@@ -51,6 +51,10 @@ export class DebugAction extends SlashAction {
 					: "disabled"));
 		} else if (params[0] === "touch") {
 			Chat.log("client", "Touch debugging " + (Debug.toggle("touch") ? "enabled" : "disabled"));
+		} else if (params[0] === "screencap") {
+			Debug.setActive("screencap", !Debug.isActive("screencap"));
+			Chat.log("client", "Screen capture debugging " + (Debug.isActive("screencap") ? "enabled"
+					: "disabled"));
 		}
 		return true;
 	}

src/js/stendhal/action/ScreenCaptureAction.ts

@@ -0,0 +1,41 @@
+/***************************************************************************
+ *                    Copyright © 2024 - Faiumoni e. V.                    *
+ ***************************************************************************
+ ***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU Affero General Public License as        *
+ *   published by the Free Software Foundation; either version 3 of the    *
+ *   License, or (at your option) any later version.                       *
+ *                                                                         *
+ ***************************************************************************/
+
+import { SlashAction } from "./SlashAction";
+
+import { ScreenCapture } from "../util/ScreenCapture";
+
+declare var stendhal: any;
+
+
+export class ScreenCaptureAction extends SlashAction {
+
+	readonly minParams = 0;
+	readonly maxParams = 0;
+
+	override desc = "Start or stop capturing video of the client viewport";
+
+	private recorder?: ScreenCapture;
+
+
+	execute(type: string, params: string[], remainder: string): boolean {
+		if (this.recorder && ScreenCapture.isActive()) {
+			// currently recording
+			this.recorder.stop();
+			this.recorder = undefined;
+			return true;
+		}
+		this.recorder = new ScreenCapture();
+		this.recorder.start(stendhal.ui.viewport.getElement() as HTMLCanvasElement);
+		return true;
+	}
+}

src/js/stendhal/ui/dialog/ApplicationMenuDialog.ts

@@ -14,6 +14,16 @@ declare var stendhal: any;
 import { DialogContentComponent } from "../toolkit/DialogContentComponent";
 import { singletons } from "../../SingletonRepo";
 
+import { Debug } from "../../util/Debug";
+import { ScreenCapture } from "../../util/ScreenCapture";
+
+
+interface MenuAction {
+	title: string,
+	action: string,
+	alt?: string,
+	condition?: Function
+}
 
 export class ApplicationMenuDialog extends DialogContentComponent {
 
@@ -37,7 +47,7 @@ export class ApplicationMenuDialog extends DialogContentComponent {
 						title: "Logout",
 						action: "logout"
 					}
-				]
+				] as MenuAction[]
 			},
 			{
 				title: "Tools",
@@ -46,11 +56,19 @@ export class ApplicationMenuDialog extends DialogContentComponent {
 						title: "Take Screenshot",
 						action: "screenshot",
 					},
+					/*
+					{
+						title: "Capture Video",
+						alt: "Stop Capture",
+						condition: ScreenCapture.isActive,
+						action: "screencap"
+					},
+					*/
 					{
 						title: "Settings",
 						action: "settings",
 					}
-				]
+				] as MenuAction[]
 			},
 			{
 				title: "Commands",
@@ -71,7 +89,7 @@ export class ApplicationMenuDialog extends DialogContentComponent {
 						title: "Travel Log",
 						action: "progressstatus",
 					}
-				]
+				] as MenuAction[]
 			},
 			{
 				title: "Help",
@@ -100,18 +118,32 @@ export class ApplicationMenuDialog extends DialogContentComponent {
 						title: "About",
 						action: "about",
 					}
-				]
+				] as MenuAction[]
 			},
 		]
 
 	constructor() {
 		super("applicationmenudialog-template");
 
+		if (Debug.isActive("screencap")) {
+			this.actions[1].children.push({
+				title: "Capture Video",
+				alt: "Stop Capture",
+				condition: ScreenCapture.isActive,
+				action: "screencap"
+			});
+		}
+
 		var content = "";
 		for (var i = 0; i < this.actions.length; i++) {
 			content += "<div class=\"inlineblock buttonColumn\"><h4 class=\"menugroup\">" + stendhal.ui.html.esc(this.actions[i].title) + "</h4>"
 			for (var j = 0; j < this.actions[i].children.length; j++) {
-				content += "<button id=\"menubutton." + this.actions[i].children[j].action + "\" class=\"menubutton\">" + stendhal.ui.html.esc(this.actions[i].children[j].title) + "</button><br>";
+				const action = this.actions[i].children[j];
+				let title = action.title;
+				if (action.alt && action.condition && action.condition()) {
+					title = action.alt;
+				}
+				content += "<button id=\"menubutton." + action.action + "\" class=\"menubutton\">" + stendhal.ui.html.esc(title) + "</button><br>";
 			}
 			content += "</div>";
 		}

src/js/stendhal/util/DownloadUtil.ts

@@ -26,7 +26,7 @@ export class DownloadUtil {
 	 * @return {string}
 	 *   Timestamp formatted string (yyyy-mm-dd_HH.MM.SS).
 	 */
-	private static timestamp(): string {
+	static timestamp(): string {
 		const d = new Date();
 		const ts = {
 			yyyy: "" + d.getFullYear(),