fragment-tools 0.1.17 → 0.1.19

package/bin/index.js

@@ -28,6 +28,7 @@ prog.command('run [entry]', '', { default: true })
 	.option('--outDir', 'Build output directory')
 	.option('--emptyOutDir', 'Empty outDir before static build')
 	.option('--base', 'Base public path when served in production', undefined)
+	.option('--config', 'Path to Fragment config file')
 	.option('--prompts', 'Enable interactive prompts', true)
 	.action((entry, options) => {
 		if (options.new) {
@@ -43,6 +44,7 @@ prog.command('run [entry]', '', { default: true })
 				emptyOutDir: options.emptyOutDir,
 				base: options.base,
 				prompts: options.prompts,
+				configFilepath: options.config,
 			});
 		}
 
@@ -50,6 +52,7 @@ prog.command('run [entry]', '', { default: true })
 			development: options.development,
 			exportDir: options.exportDir,
 			port: options.port,
+			configFilepath: options.config,
 		});
 	});
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {
@@ -22,7 +22,7 @@
   "homepage": "https://github.com/raphaelameaume/fragment#readme",
   "dependencies": {
     "@clack/core": "^0.3.3",
-    "@sveltejs/vite-plugin-svelte": "^2.4.5",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "body-parser": "^1.20.0",
     "changedpi": "^1.0.4",
     "chokidar": "^3.5.2",
@@ -35,7 +35,7 @@
     "sade": "^1.7.4",
     "svelte": "^4.0.0",
     "svelte-json-tree": "^2.2.0",
-    "vite": "^4.4.9",
+    "vite": "^5.3.3",
     "webm-writer": "^1.0.0",
     "ws": "^8.2.3"
   },

package/src/cli/build.js

@@ -47,6 +47,10 @@ export async function build(entry, options) {
 			handleCancelledPrompt(outDir, prefix);
 		}
 
+		if (!outDir) {
+			outDir = '';
+		}
+
 		let outDirPath = path.join(cwd, outDir);
 
 		// create directory if it doesn't exist
@@ -91,13 +95,14 @@ export async function build(entry, options) {
 			);
 
 			const fragmentFilepath = await createFragmentFile(entries, cwd);
-			const config = createConfig(
+			const config = await createConfig(
 				entries,
 				fragmentFilepath,
 				{
 					dev: options.development,
 					build: true,
 				},
+				options.configFilepath,
 				cwd,
 			);
 

package/src/cli/createConfig.js

@@ -1,11 +1,44 @@
 import path from 'node:path';
-import { defineConfig } from 'vite';
+import fs from 'node:fs';
+import { defineConfig, loadConfigFromFile, mergeConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
 import checkDependencies from './plugins/check-dependencies.js';
 import { file } from './utils.js';
 import { log } from './log.js';
 
+export async function loadConfig({ cwd, filepath }) {
+	try {
+		let filename = `fragment.config.js`;
+		let configFile = filepath ? filepath : filename;
+		let configRoot = cwd;
+		let resolvedPath = path.resolve(cwd, configFile);
+
+		if (!fs.existsSync(resolvedPath)) {
+			if (filepath) {
+				log.error(`Config file not found: ${resolvedPath}`);
+			}
+			return {};
+		}
+
+		log.info(`Extending configuration from ${resolvedPath}`);
+
+		const { config } = await loadConfigFromFile(
+			{
+				command: 'build',
+				mode: 'dev',
+			},
+			configFile,
+			configRoot,
+		);
+
+		return config;
+	} catch (error) {
+		log.error(error);
+		return {};
+	}
+}
+
 /**
  * Create Vite config from entries
  * @param {string[]} entries
@@ -16,10 +49,11 @@ import { log } from './log.js';
  * @param {string} [cwd=process.cwd()]
  * @returns {import('vite').UserConfig}
  */
-export function createConfig(
+export async function createConfig(
 	entries,
 	fragmentFilepath,
 	{ dev = false, build = false } = {},
+	configFilepath,
 	cwd = process.cwd(),
 ) {
 	const entriesPaths = entries.map((entry) => path.join(cwd, entry));
@@ -28,56 +62,68 @@ export function createConfig(
 
 	log.info(`Creating Vite configuration...`);
 
-	return defineConfig({
-		configFile: false,
-		root,
-		logLevel: dev ? 'info' : 'silent',
-		resolve: {
-			alias: [
-				{ find: '@fragment/sketches', replacement: fragmentFilepath },
-				{ find: '@fragment', replacement: app },
-				{
-					find: 'three',
-					replacement: path.join(cwd, 'node_modules/three'),
-				},
-				{ find: 'p5', replacement: path.join(cwd, 'node_modules/p5') },
-				{
-					find: 'ogl',
-					replacement: path.join(cwd, 'node_modules/ogl'),
-				},
-			],
-		},
-		plugins: [
-			svelte({
-				configFile: false,
-				onwarn: (warning, handler) => {
-					if (dev) {
-						handler(warning);
-					} else {
-						return;
-					}
-				},
-			}),
-			checkDependencies({
-				cwd,
-				app,
-				entriesPaths,
-				build,
-			}),
-		],
-
-		define: {
-			__CWD__: `${JSON.stringify(cwd)}`,
-			__FRAGMENT_PORT__: undefined,
-			__START_TIME__: Date.now(),
-			__SEED__: Date.now(),
-			__BUILD__: build,
-			__DEV__: !build,
-			global: {},
-		},
-		optimizeDeps: {
-			include: ['convert-length', 'webm-writer', 'changedpi'],
-			exclude: ['@fragment/sketches', ...entriesPaths],
-		},
+	const config = await loadConfig({
+		filepath: configFilepath,
+		cwd,
 	});
+
+	return mergeConfig(
+		defineConfig({
+			configFile: false,
+			root,
+			logLevel: dev ? 'info' : 'silent',
+			resolve: {
+				alias: [
+					{
+						find: '@fragment/sketches',
+						replacement: fragmentFilepath,
+					},
+					{ find: '@fragment', replacement: app },
+					{
+						find: 'three',
+						replacement: path.join(cwd, 'node_modules/three'),
+					},
+					{
+						find: 'p5',
+						replacement: path.join(cwd, 'node_modules/p5'),
+					},
+					{
+						find: 'ogl',
+						replacement: path.join(cwd, 'node_modules/ogl'),
+					},
+				],
+			},
+			plugins: [
+				svelte({
+					configFile: false,
+					onwarn: (warning, handler) => {
+						if (dev) {
+							handler(warning);
+						} else {
+							return;
+						}
+					},
+				}),
+				checkDependencies({
+					cwd,
+					app,
+					entriesPaths,
+					build,
+				}),
+			],
+			define: {
+				__CWD__: `${JSON.stringify(cwd)}`,
+				__FRAGMENT_PORT__: undefined,
+				__START_TIME__: Date.now(),
+				__SEED__: Date.now(),
+				__BUILD__: build,
+				__DEV__: !build,
+			},
+			optimizeDeps: {
+				include: ['convert-length', 'webm-writer', 'changedpi'],
+				exclude: ['@fragment/sketches', ...entriesPaths],
+			},
+		}),
+		config.vite ?? {},
+	);
 }

package/src/cli/preview.js

@@ -37,17 +37,15 @@ export async function preview(dir, options = {}) {
 
 		const { resolvedUrls } = previewServer;
 
-		let urls = ``;
-
-		for (const url of resolvedUrls.local) {
-			urls += `${bold('Local')}:   ${bold(cyan(url))}\n`;
-		}
-
-		for (const url of resolvedUrls.network) {
-			urls += `${bold('Network')}: ${bold(cyan(url))}`;
-		}
-
-		p.note(urls);
+		let urls = [
+			...resolvedUrls.local.map(
+				(url) => `${bold('Local')}:   ${bold(cyan(url))}`,
+			),
+			...resolvedUrls.network.map(
+				(url) => `${bold('Network')}: ${bold(cyan(url))}`,
+			),
+		];
+		p.note(urls.join(`\n`));
 	} catch (error) {
 		log.error(`Error\n`, prefix);
 		console.error(error);

package/src/cli/run.js

@@ -62,13 +62,14 @@ export async function run(entry, options = {}) {
 			cwd,
 		});
 
-		const config = createConfig(
+		const config = await createConfig(
 			entries,
 			fragmentFilepath,
 			{
 				dev: options.development,
 				build: false,
 			},
+			options.configFilepath,
 			cwd,
 		);
 

package/src/cli/templates/blank/index.js

@@ -30,4 +30,9 @@ export let update = ({ width, height, time, deltaTime }) => {};
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let resize = ({ width, height, pixelRatio }) => {};
+export let resize = ({ canvas, width, height, pixelRatio }) => {
+	canvas.width = width * pixelRatio;
+	canvas.height = height * pixelRatio;
+	canvas.style.width = `${width}px`;
+	canvas.style.height = `${height}px`;
+};

package/src/cli/templates/default/index.js

@@ -23,8 +23,8 @@ export let init = ({ canvas, context, width, height }) => {};
  * @param {number} params.playhead
  * @param {number} params.playcount
  */
-export let update = ({ context, width, height, time, deltaTime }) => {
-	context.clearRect(0, 0, width, height);
+export let update = ({ context, width, height, pixelRatio }) => {
+	context.clearRect(0, 0, width * pixelRatio, height * pixelRatio);
 };
 
 /**

package/src/client/app/lib/gl/Renderer.js

@@ -137,6 +137,9 @@ class Renderer {
 		this.canvas.width = this.state.width * this.state.pixelRatio;
 		this.canvas.height = this.state.height * this.state.pixelRatio;
 
+		this.canvas.style.width = `${this.state.width}px`;
+		this.canvas.style.height = `${this.state.height}px`;
+
 		this.setViewport();
 	}
 

package/src/client/app/renderers/2DRenderer.js

@@ -1,5 +1,34 @@
+/**
+ * @typedef {object} MountParams2DRenderer
+ * @property {CanvasRenderingContext2D} context
+ */
+
+/**
+ * @param {object} params
+ * @param {number} params.id
+ * @param {HTMLDivElement} params.container
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @returns {MountParams2DRenderer}
+ */
 export let onMountPreview = ({ canvas }) => {
 	return {
 		context: canvas.getContext('2d'),
 	};
 };
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let onResizePreview = ({ canvas, width, height, pixelRatio }) => {
+	canvas.width = width * pixelRatio;
+	canvas.height = height * pixelRatio;
+	canvas.style.width = `${width}px`;
+	canvas.style.height = `${height}px`;
+};

package/src/client/app/renderers/P5GLRenderer.js

@@ -3,8 +3,39 @@ import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../stores/errors';
 
+/**
+ * @typedef {object} PreviewP5GLRenderer
+ * @property {number} id
+ * @property {p5} p
+ * @property {boolean} rendered
+ */
+
+/**
+ * @typedef {object} MountParamsP5GLRenderer
+ * @property {HTMLCanvasElement} canvas
+ * @property {p5} p
+ */
+
+/**
+ * @typedef {object} PreviewParamsP5GLRenderer
+ * @property {number} params.id
+ * @property {HTMLDivElement} params.container
+ * @property {HTMLCanvasElement} params.canvas
+ */
+
+/** @type {PreviewP5GLRenderer[]} */
 let previews = [];
 
+/**
+ * @param {object} params
+ * @param {number} params.id
+ * @param {HTMLDivElement} params.container
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @returns {MountParamsP5GLRenderer}
+ */
 export let onMountPreview = ({ id, width, height }) => {
 	const p = new p5((sketch) => {
 		sketch.setup = () => {
@@ -12,9 +43,11 @@ export let onMountPreview = ({ id, width, height }) => {
 		};
 	});
 
+	/** @type {PreviewP5GLRenderer} */
 	const preview = {
 		id,
 		p,
+		rendered: false,
 	};
 
 	previews.push(preview);
@@ -25,6 +58,9 @@ export let onMountPreview = ({ id, width, height }) => {
 	};
 };
 
+/**
+ * @param {PreviewParamsP5GLRenderer} params
+ */
 export let onBeforeUpdatePreview = ({ id }) => {
 	const preview = previews.find((p) => p.id === id);
 
@@ -34,6 +70,9 @@ export let onBeforeUpdatePreview = ({ id }) => {
 	}
 };
 
+/**
+ * @param {PreviewParamsP5GLRenderer} params
+ */
 export let onAfterUpdatePreview = ({ id }) => {
 	const preview = previews.find((p) => p.id === id);
 
@@ -49,15 +88,17 @@ export let onAfterUpdatePreview = ({ id }) => {
 	}
 };
 
-export let onResizePreview = ({ id, width, height, pixelRatio }) => {
-	const preview = previews.find((p) => p.id === id);
-
-	if (preview) {
-		preview.p.pixelDensity(pixelRatio);
-		preview.p.resizeCanvas(width, height, false);
-	}
+/**
+ * @param {PreviewParamsP5GLRenderer} params
+ */
+export let onResizePreview = ({ p, width, height, pixelRatio }) => {
+	p.pixelDensity(pixelRatio);
+	p.resizeCanvas(width, height, false);
 };
 
+/**
+ * @param {PreviewParamsP5GLRenderer} params
+ */
 export let onDestroyPreview = ({ id }) => {
 	const previewIndex = previews.findIndex((preview) => preview.id === id);
 	const preview = previews[previewIndex];

package/src/client/app/renderers/P5Renderer.js

@@ -30,13 +30,9 @@ export let onBeforeUpdatePreview = ({ id }) => {
 	}
 };
 
-export let onResizePreview = ({ id, width, height, pixelRatio }) => {
-	const preview = previews.find((p) => p.id === id);
-
-	if (preview) {
-		preview.p.pixelDensity(pixelRatio);
-		preview.p.resizeCanvas(width, height, false);
-	}
+export let onResizePreview = ({ p, width, height, pixelRatio }) => {
+	p.pixelDensity(pixelRatio);
+	p.resizeCanvas(width, height, false);
 };
 
 export let onDestroyPreview = ({ id }) => {

package/src/client/app/renderers/THREERenderer.js

@@ -4,8 +4,11 @@ import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../stores/errors';
 
-let renderer;
 let previews = [];
+
+/** @type {WebGLRenderer} */
+let renderer;
+
 let fragmentShader = /* glsl */ `
     precision highp float;
     uniform sampler2D uSampler;
@@ -66,7 +69,7 @@ export let onMountPreview = ({ id, canvas, width, height, pixelRatio }) => {
 	};
 };
 
-export let onDestroyPreview = ({ id, canvas }) => {
+export let onDestroyPreview = ({ id }) => {
 	const previewIndex = previews.findIndex((p) => p.id === id);
 	const preview = previews[previewIndex];
 
@@ -107,9 +110,12 @@ export let onAfterUpdatePreview = ({ id }) => {
 export let resize = ({ width, height, pixelRatio }) => {
 	renderer.setPixelRatio(pixelRatio);
 	renderer.setSize(width, height);
+};
+
+export let onResizePreview = ({ id, width, height, pixelRatio }) => {
+	const preview = previews.find((p) => p.id === id);
 
-	for (let i = 0; i < previews.length; i++) {
-		const preview = previews[i];
+	if (preview) {
 		preview.resize({ width, height, pixelRatio });
 	}
 };

package/src/client/app/ui/SketchRenderer.svelte

@@ -35,7 +35,9 @@
 	export let paused = false;
 	export let visible = true;
 
-	let node, container;
+	let node;
+	/** @type {HTMLDivElement} */
+	let container;
 	let framerate = 60;
 	let elapsed = 0;
 	let elapsedRenderingTime = 0;
@@ -60,44 +62,46 @@
 	$: beforeRecordCallbacks = $beforeRecord.get(key) || [];
 	$: afterRecordCallbacks = $afterRecord.get(key) || [];
 
-	function checkForResize() {
+	function checkForResize(resizing = $rendering.resizing) {
 		if (!node) return;
 
-		let needsUpdate =
-			$rendering.resizing === SIZES.WINDOW ||
-			$rendering.resizing === SIZES.ASPECT_RATIO;
-
-		let newWidth, newHeight;
-
-		if ($rendering.resizing === SIZES.WINDOW) {
-			newWidth = node.offsetWidth;
-			newHeight = node.offsetHeight;
-		} else if ($rendering.resizing === SIZES.ASPECT_RATIO) {
-			const { offsetWidth, offsetHeight } = node;
-			const aspectRatio = $rendering.aspectRatio;
-			const monitorRatio = offsetWidth / offsetHeight;
-
-			if (aspectRatio < monitorRatio) {
-				newHeight = offsetHeight;
-				newWidth = newHeight * aspectRatio;
-			} else {
-				newWidth = offsetWidth;
-				newHeight = newWidth / aspectRatio;
+		let isWindowResize = resizing === SIZES.WINDOW;
+		let isAspectResize = resizing === SIZES.ASPECT_RATIO;
+		let canUpdate = isWindowResize || isAspectResize;
+
+		if (canUpdate) {
+			let newWidth, newHeight;
+
+			if (isWindowResize) {
+				newWidth = node.offsetWidth;
+				newHeight = node.offsetHeight;
+			} else if (isAspectResize) {
+				const { offsetWidth, offsetHeight } = node;
+				const aspectRatio = $rendering.aspectRatio;
+				const monitorRatio = offsetWidth / offsetHeight;
+
+				if (aspectRatio < monitorRatio) {
+					newHeight = offsetHeight;
+					newWidth = newHeight * aspectRatio;
+				} else {
+					newWidth = offsetWidth;
+					newHeight = newWidth / aspectRatio;
+				}
 			}
-		}
 
-		needsUpdate =
-			needsUpdate &&
-			(newWidth !== $rendering.width || newHeight !== $rendering.height);
-
-		if (needsUpdate) {
-			rendering.update((curr) => {
-				return {
-					...curr,
-					width: newWidth,
-					height: newHeight,
-				};
-			});
+			let needsUpdate =
+				newWidth !== $rendering.width ||
+				newHeight !== $rendering.height;
+
+			if (needsUpdate) {
+				rendering.update((curr) => {
+					return {
+						...curr,
+						width: newWidth,
+						height: newHeight,
+					};
+				});
+			}
 		}
 	}
 
@@ -127,9 +131,6 @@
 	});
 
 	function createCanvas(canvas = document.createElement('canvas')) {
-		canvas.width = $rendering.width * $rendering.pixelRatio;
-		canvas.height = $rendering.height * $rendering.pixelRatio;
-
 		canvas.onmousedown = (event) => checkForTriggersDown(event, key);
 		canvas.onmousemove = (event) => checkForTriggersMove(event, key);
 		canvas.onmouseup = (event) => checkForTriggersUp(event, key);
@@ -182,7 +183,7 @@
 	async function createSketch(key) {
 		_created = false;
 
-		sketch?.dispose?.();
+		sketch?.dispose?.(params);
 
 		sketch = $sketches[key];
 
@@ -202,7 +203,7 @@
 
 		if (canvas) {
 			if (renderer && typeof renderer.onDestroyPreview === 'function') {
-				renderer.onDestroyPreview({ id, canvas });
+				renderer.onDestroyPreview({ id, container, canvas });
 			}
 
 			destroyCanvas(canvas);
@@ -487,30 +488,6 @@
 		}
 	}
 
-	rendering.subscribe((current) => {
-		if (canvas && _created) {
-			if (current.resizing === SIZES.SCALE) {
-				canvas.style.transform = `scale(${current.scale})`;
-			} else {
-				canvas.style.transform = null;
-			}
-
-			const { width, height, pixelRatio } = current;
-			const resize = sketch.resize || noop;
-
-			resize({
-				canvas,
-				width,
-				height,
-				pixelRatio,
-				...params,
-			});
-
-			_renderSketch = createRenderLoop();
-			needsRender = true;
-		}
-	});
-
 	async function save() {
 		paused = true;
 
@@ -649,21 +626,38 @@
 	$: {
 		checkForResize();
 
+		const { width, height, pixelRatio, resizing, scale } = $rendering;
+
 		if (renderer && typeof renderer.onResizePreview === 'function') {
 			renderer.onResizePreview({
 				id,
 				container,
-				width: $rendering.width,
-				height: $rendering.height,
-				pixelRatio: $rendering.pixelRatio,
+				width,
+				height,
+				pixelRatio,
+				...params,
 			});
 		}
 
 		if (canvas) {
-			const pixelRatio = $rendering.pixelRatio;
+			if (resizing === SIZES.SCALE) {
+				canvas.style.transform = `scale(${scale})`;
+			} else {
+				canvas.style.transform = null;
+			}
+
+			if (_created) {
+				sketch?.resize?.({
+					canvas,
+					width,
+					height,
+					pixelRatio,
+					...params,
+				});
 
-			canvas.width = $rendering.width * pixelRatio;
-			canvas.height = $rendering.height * pixelRatio;
+				_renderSketch = createRenderLoop();
+				_renderSketch();
+			}
 		}
 	}
 
@@ -680,6 +674,10 @@
 						)) // if none of current monitors match the key
 				? $errors.get($errors.keys().next().value)
 				: null;
+
+	$: isSquare = $rendering.width === $rendering.height;
+	$: isLandscape = $rendering.width > $rendering.height;
+	$: isPortrait = $rendering.width < $rendering.height;
 </script>
 
 <div
@@ -691,7 +689,7 @@
 >
 	<div
 		class="canvas-container"
-		style="max-width: {$rendering.width}px; max-height: {$rendering.height}px;"
+		style="--aspect-ratio: {$rendering.width} / {$rendering.height}; --aspect-ratio-inverse: {$rendering.height} / {$rendering.width}; --width: {$rendering.width}px; --height: {$rendering.height}px;"
 		bind:this={container}
 	/>
 	{#if $recording}
@@ -709,7 +707,6 @@
 
 <style>
 	.sketch-renderer {
-		position: absolute;
 		display: flex;
 		width: 100%;
 		height: 100%;
@@ -717,6 +714,8 @@
 		align-items: center;
 
 		background-color: var(--background-color, var(--color-lightblack));
+
+		container-type: size;
 	}
 
 	.sketch-renderer:not(.visible) {
@@ -724,13 +723,27 @@
 	}
 
 	.canvas-container {
+		--w: min(100cqw, calc(100cqh * var(--aspect-ratio)));
 		position: relative;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		height: 100%;
-		max-height: 100%;
+
+		max-width: var(--width);
+		max-height: var(--height);
+
+		width: var(--w);
+		height: calc(var(--w) * var(--aspect-ratio-inverse));
+
+		background-color: red;
+	}
+
+	:global(.canvas-container canvas) {
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		width: 100% !important;
+		height: 100% !important;
+
+		background-color: var(--background-color, #000000);
 	}
 
 	.sketch-renderer.recording .canvas-container {
@@ -783,16 +796,4 @@
 			opacity: 0;
 		}
 	}
-
-	:global(.canvas-container canvas) {
-		max-width: 100%;
-		max-height: 100%;
-
-		flex: none;
-
-		width: auto !important;
-		height: auto !important;
-
-		background-color: var(--background-color, #000000);
-	}
 </style>

package/src/client/app/lib/canvas-recorder/H264Recorder.js

@@ -1,45 +0,0 @@
-import * as HME from 'h264-mp4-encoder';
-import CanvasRecorder from './CanvasRecorder';
-
-class H264Recorder extends CanvasRecorder {
-	getBitmapRGBA(bitmap, width = bitmap.width, height = bitmap.height) {
-		this.tmpCanvas.width = width;
-		this.tmpCanvas.height = height;
-		this.tmpContext.clearRect(0, 0, width, height);
-		this.tmpContext.drawImage(bitmap, 0, 0, width, height);
-		return this.tmpContext.getImageData(0, 0, width, height).data;
-	}
-
-	async start() {
-		this.encoder = await HME.createH264MP4Encoder();
-
-		this.tmpCanvas = document.createElement('canvas');
-		this.tmpContext = this.tmpCanvas.getContext('2d');
-
-		this.encoder.width = this.canvas.width;
-		this.encoder.height = this.canvas.height;
-		this.encoder.frameRate = this.framerate;
-		this.encoder.kbps = 30000;
-		this.encoder.initialize();
-
-		super.start();
-	}
-
-	tick() {
-		const { width, height } = this.canvas;
-		const pixels = this.getBitmapRGBA(this.canvas, width, height);
-
-		this.encoder.addFrameRgba(pixels);
-	}
-
-	async end() {
-		this.encoder.finalize();
-
-		const data = this.encoder.FS.readFile(this.encoder.outputFilename);
-		this.result = new Blob([data], { type: 'video/mp4' });
-
-		super.end();
-	}
-}
-
-export default H264Recorder;