@stanko/kaplay-inspector 0.2.2 → 0.3.0

package/dist/components/inspector.js

@@ -4,6 +4,7 @@ import { GameObject } from "./game-object";
 import { useObjectBoolean } from "./boolean-comp";
 import { SearchResults } from "./search-results";
 import { k } from "../k";
+import { Recorder } from "./recorder";
 const INTERVAL_OPTIONS = [
     { value: 100, label: "100ms" },
     { value: 250, label: "250ms" },
@@ -45,5 +46,5 @@ export const Inspector = ({ initUpdateTimeout = 250, isVisibleOnLoad = true, ini
     if (!isVisible) {
         return (_jsx("button", { class: "ki-btn k-inspector__show", onClick: toggleVisibility, children: "Show Inspector" }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "k-inspector__header", children: [_jsx("button", { class: "ki-btn", onClick: () => paused.onChange(!paused.checked), children: paused.checked ? "Resume Game" : "Pause Game" }), "\u2022", _jsx("input", { placeholder: "Search tags or comps", type: "text", class: "ki-input", onInput: handleSearchInput }), "\u2022", _jsxs("div", { children: [k.get("*", { recursive: true }).length, " objects"] }), "\u2022", _jsxs("div", { children: [Math.round(k.debug.fps()), " fps"] }), "\u2022", _jsxs("div", { class: "k-inspector__interval", children: ["Update:", INTERVAL_OPTIONS.map((option) => (_jsxs("label", { children: [_jsx("input", { type: "radio", name: "interval", value: option.value, checked: updateTimeout === option.value, onChange: () => setUpdateTimeout(option.value) }), option.label] }, option.value)))] }), "\u2022", _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: shouldDrawInspect, onChange: () => setShouldDrawInspect(!shouldDrawInspect) }), "Draw bbox on hover"] }), _jsx("button", { class: "ki-btn k-inspector__hide", onClick: toggleVisibility, children: "Hide" })] }), _jsx("div", { class: "k-inspector__objects", children: searchTerm.length > 0 ? (_jsx(SearchResults, { results: searchResults, setRenderRoot: setRoot, shouldDrawInspect: shouldDrawInspect })) : (_jsx(GameObject, { className: "game-object--root", obj: root, setRenderRoot: setRoot, shouldDrawInspect: shouldDrawInspect, isExpanded: true, isRenderRoot: true })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "k-inspector__header", children: [_jsx("button", { class: "ki-btn", onClick: () => paused.onChange(!paused.checked), children: paused.checked ? "Resume Game" : "Pause Game" }), "\u2022", _jsx("input", { placeholder: "Search tags or comps", type: "text", class: "ki-input", onInput: handleSearchInput }), "\u2022", _jsxs("div", { children: [k.get("*", { recursive: true }).length, " objects"] }), "\u2022", _jsxs("div", { children: [Math.round(k.debug.fps()), " fps"] }), "\u2022", _jsxs("div", { class: "k-inspector__interval", children: ["Update:", INTERVAL_OPTIONS.map((option) => (_jsxs("label", { children: [_jsx("input", { type: "radio", name: "interval", value: option.value, checked: updateTimeout === option.value, onChange: () => setUpdateTimeout(option.value) }), option.label] }, option.value)))] }), "\u2022", _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: shouldDrawInspect, onChange: () => setShouldDrawInspect(!shouldDrawInspect) }), "Draw bbox on hover"] }), "\u2022", _jsx(Recorder, {}), _jsx("button", { class: "ki-btn k-inspector__hide", onClick: toggleVisibility, children: "Hide" })] }), _jsx("div", { class: "k-inspector__objects", children: searchTerm.length > 0 ? (_jsx(SearchResults, { results: searchResults, setRenderRoot: setRoot, shouldDrawInspect: shouldDrawInspect })) : (_jsx(GameObject, { className: "game-object--root", obj: root, setRenderRoot: setRoot, shouldDrawInspect: shouldDrawInspect, isExpanded: true, isRenderRoot: true })) })] }));
 };

package/dist/components/recorder.d.ts

@@ -0,0 +1 @@
+export declare const Recorder: () => import("preact").JSX.Element;

package/dist/components/recorder.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { useRef } from "preact/hooks";
+import { recorder } from "../lib/video-recorder";
+export const Recorder = () => {
+    const rec = useRef(null);
+    const start = () => {
+        rec.current = recorder();
+        rec.current.start();
+    };
+    const stop = () => {
+        if (rec.current) {
+            rec.current.stop();
+            rec.current = null;
+        }
+    };
+    return (_jsx("button", { class: "ki-btn", onClick: () => {
+            if (rec.current) {
+                stop();
+            }
+            else {
+                start();
+            }
+        }, children: rec.current ? "Stop" : "Record" }));
+};

package/dist/lib/video-recorder.d.ts

@@ -0,0 +1 @@
+export declare const recorder: () => MediaRecorder;

package/dist/lib/video-recorder.js

@@ -0,0 +1,45 @@
+import { k } from "../k";
+const mimeTypes = [
+    "video/webm; codecs=vp9,opus",
+    "video/webm; codecs=vp8,opus",
+    "video/webm",
+];
+const mimeType = mimeTypes.find(MediaRecorder.isTypeSupported);
+// Constants I found on the web
+// low 0.06,
+// medium 0.10,
+// high 0.16,
+// veryHigh 0.24,
+const BITS_PER_PIXEL_PER_FRAME = 0.16;
+const FPS = 60;
+const MAX_VIDEO_BITS_PER_SECOND = 40_000_000; // ~40 mbps
+export const recorder = () => {
+    const canvasStream = k.canvas.captureStream(60);
+    const videoBitsPerSecond = Math.round(k.canvas.width * k.canvas.height * FPS * BITS_PER_PIXEL_PER_FRAME);
+    const audioDest = k.audioCtx.createMediaStreamDestination();
+    k._k.audio.masterNode.connect(audioDest);
+    const stream = new MediaStream([
+        ...canvasStream.getVideoTracks(),
+        ...audioDest.stream.getAudioTracks(),
+    ]);
+    const recorder = new MediaRecorder(stream, {
+        mimeType,
+        videoBitsPerSecond: Math.min(MAX_VIDEO_BITS_PER_SECOND, videoBitsPerSecond),
+    });
+    const chunks = [];
+    recorder.ondataavailable = (e) => {
+        if (e.data.size) {
+            chunks.push(e.data);
+        }
+    };
+    recorder.onstop = () => {
+        const blob = new Blob(chunks, { type: "video/webm" });
+        const a = document.createElement("a");
+        a.href = URL.createObjectURL(blob);
+        a.download = `${k.getSceneName()} (${new Date().toLocaleDateString("en-US")}).webm`;
+        a.click();
+        k._k.audio.masterNode.disconnect(audioDest);
+        canvasStream.getTracks().forEach((t) => t.stop());
+    };
+    return recorder;
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stanko/kaplay-inspector",
   "description": "A dev tool for Kaplay which allows you to explore and inspect the game object tree real time.",
   "private": false,
-  "version": "0.2.2",
+  "version": "0.3.0",
   "type": "module",
   "main": "./dist/init.js",
   "types": "./dist/init.d.ts",