camera and everything

package.json

@@ -16,6 +16,7 @@
 	},
 	"devDependencies": {
 		"@tsconfig/svelte": "^5.0.2",
+		"@types/debug": "^4.1.12",
 		"@types/eslint": "8.56.0",
 		"@types/lodash": "^4.14.202",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -39,7 +40,8 @@
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@tabler/icons-svelte": "^2.47.0",
+		"@tabler/icons-webfont": "^2.47.0",
+		"debug": "^4.3.4",
 		"lodash": "^4.17.21",
 		"normalize.css": "^8.0.1",
 		"svelte": "^4.2.7",

pnpm-lock.yaml

@@ -20,9 +20,12 @@ dependencies:
   '@sveltejs/vite-plugin-svelte':
     specifier: ^3.0.0
     version: 3.0.2(svelte@4.2.9)(vite@5.0.12)
-  '@tabler/icons-svelte':
+  '@tabler/icons-webfont':
     specifier: ^2.47.0
-    version: 2.47.0(svelte@4.2.9)
+    version: 2.47.0
+  debug:
+    specifier: ^4.3.4
+    version: 4.3.4
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
@@ -46,6 +49,9 @@ devDependencies:
   '@tsconfig/svelte':
     specifier: ^5.0.2
     version: 5.0.2
+  '@types/debug':
+    specifier: ^4.1.12
+    version: 4.1.12
   '@types/eslint':
     specifier: 8.56.0
     version: 8.56.0
@@ -90,7 +96,7 @@ devDependencies:
     version: 3.6.3(postcss@8.4.33)(svelte@4.2.9)
   wait-on:
     specifier: ^7.2.0
-    version: 7.2.0
+    version: 7.2.0(debug@4.3.4)
 
 packages:
 
@@ -677,13 +683,10 @@ packages:
       - supports-color
     dev: false
 
-  /@tabler/icons-svelte@2.47.0(svelte@4.2.9):
+  /@tabler/icons-webfont@2.47.0:
-    resolution: {integrity: sha512-xL2NyCUUhBQv0lXylgNCpfHtMW4Ihu0hCacaYXeX+NiS1LO0geqXk/0lkrBH+u/ZLX6vyqUYNFjawjzmxthFjw==}
+    resolution: {integrity: sha512-yfV9zDal0iYDmyGz4BS9IlhaaMydtLdyOrY2UAZToP65sVWj7AFIi6symNzsoBaX867xAZWVHdKcocah0BfSog==}
-    peerDependencies:
-      svelte: '>=3 <5'
     dependencies:
       '@tabler/icons': 2.47.0
-      svelte: 4.2.9
     dev: false
 
   /@tabler/icons@2.47.0:
@@ -702,6 +705,12 @@ packages:
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
     dev: false
 
+  /@types/debug@4.1.12:
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+    dependencies:
+      '@types/ms': 0.7.34
+    dev: true
+
   /@types/eslint@8.56.0:
     resolution: {integrity: sha512-FlsN0p4FhuYRjIxpbdXovvHQhtlG05O1GG/RNWvdAxTboR438IOTwmrY/vLA+Xfgg06BTkP045M3vpFwTMv1dg==}
     dependencies:
@@ -720,6 +729,10 @@ packages:
     resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
     dev: true
 
+  /@types/ms@0.7.34:
+    resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
+    dev: true
+
   /@types/node@20.11.19:
     resolution: {integrity: sha512-7xMnVEcZFu0DikYjWOlRq7NTPETrm7teqUT2WkQjrTIkEgUyyGdWsj/Zg8bEJt5TNklzbPD1X3fqfsHw3SpapQ==}
     requiresBuild: true
@@ -963,10 +976,10 @@ packages:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: true
 
-  /axios@1.6.7:
+  /axios@1.6.7(debug@4.3.4):
     resolution: {integrity: sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==}
     dependencies:
-      follow-redirects: 1.15.5
+      follow-redirects: 1.15.5(debug@4.3.4)
       form-data: 4.0.0
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -1634,7 +1647,7 @@ packages:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
     dev: true
 
-  /follow-redirects@1.15.5:
+  /follow-redirects@1.15.5(debug@4.3.4):
     resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==}
     engines: {node: '>=4.0'}
     peerDependencies:
@@ -1642,6 +1655,8 @@ packages:
     peerDependenciesMeta:
       debug:
         optional: true
+    dependencies:
+      debug: 4.3.4
     dev: true
 
   /form-data@4.0.0:
@@ -2896,12 +2911,12 @@ packages:
       vite: 5.0.12
     dev: false
 
-  /wait-on@7.2.0:
+  /wait-on@7.2.0(debug@4.3.4):
     resolution: {integrity: sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==}
     engines: {node: '>=12.0.0'}
     hasBin: true
     dependencies:
-      axios: 1.6.7
+      axios: 1.6.7(debug@4.3.4)
       joi: 17.12.1
       lodash: 4.17.21
       minimist: 1.2.8

src/index.css

@@ -9,7 +9,7 @@ body, html {
   background-color: black;
 
   font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-  font-size: 1.5vw;
+  font-size: min(1.5vw, 1.5vh);
 }
 
 * {
@@ -19,3 +19,23 @@ body, html {
 a {
   color: white;
 }
+
+
+h1, h2, h3 {
+  margin-top: 0;
+}
+
+button, .button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+  text-decoration: none;
+  border: 1px solid white;
+  cursor: pointer;
+
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  background: black;
+  color: white;
+}

src/lib/Spinner.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { IconSpiral } from '@tabler/icons-svelte';
+	export let size = 32;
+</script>
+
+<div class="spinner"><IconSpiral {size} class="spinner-icon" /></div>
+
+<style>
+	.spinner {
+		text-align: center;
+	}
+
+	:global(.spinner-icon) {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>

src/lib/TestCard.svelte

@@ -4,7 +4,8 @@
 	import Axes from '$lib/Axes.svelte';
 	import ColorGradient from '$lib/ColorGradient.svelte';
 	import BrightnessGradient from '$lib/BrightnessGradient.svelte';
-	import { onMount } from 'svelte';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher<{ focus: void }>();
 
 	export let full = false;
 
@@ -22,14 +23,9 @@
 	$: circleBlocks =
 		2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) +
 		(sizes.horizontalCount % 2);
-
-	onMount(() => {
-		window.addEventListener('dblclick', () => {
-			document.body.requestFullscreen();
-		});
-	});
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class="test-card"
 	class:full
@@ -40,6 +36,7 @@
          --column-width: {columnWidth};
          --column-height: {columnHeight};
          --left-column: {leftColumn};"
+	on:dblclick={() => dispatch('focus') && document.body.requestFullscreen()}
 >
 	<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={!full} />
 

src/routes/+layout.svelte

@@ -2,10 +2,12 @@
 	import 'normalize.css/normalize.css';
 	import '@fontsource/b612';
 	import '@fontsource/b612/700.css';
+	import '@tabler/icons-webfont/tabler-icons.css';
 	import '../index.css';
 	import TestCard from '$lib/TestCard.svelte';
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
 
 	let idleTimeout: NodeJS.Timeout | undefined;
 	onMount(() => {
@@ -21,8 +23,11 @@
 	$: onlyCard = $page.url.pathname === '/card';
 </script>
 
-<TestCard full={onlyCard} />
+<TestCard full={onlyCard} on:focus={() => goto('/card')} />
 <main class:content={!onlyCard}>
+	{#if $page.url.pathname !== '/' && !onlyCard}
+		<a href="/" class="button button-back"><i class="ti ti-arrow-back" />Back</a>
+	{/if}
 	<slot />
 </main>
 
@@ -32,13 +37,16 @@
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
-		max-height: 90vh;
+		height: 90vh;
-		max-width: 90vw;
+		width: 90vw;
 		background: rgba(0, 0, 0, 0.8);
 		border-radius: 0.5rem;
 		border: 1px solid white;
 
 		padding: 1rem;
+
+		display: flex;
+		flex-direction: column;
 	}
 
 	:global(.hide-idle) {
@@ -49,4 +57,16 @@
 	:global(body.idle .hide-idle) {
 		opacity: 0;
 	}
+
+	.button-back {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+
+		opacity: 0.66;
+		transition: opacity 0.3s;
+		&:hover {
+			opacity: 1;
+		}
+	}
 </style>

src/routes/+page.svelte

@@ -1,14 +1,4 @@
 <script>
-	import {
-		IconCamera,
-		IconCpu2,
-		IconDeviceGamepad,
-		IconKeyboard,
-		IconMicrophone,
-		IconMouse,
-		IconVideo,
-		IconVolume
-	} from '@tabler/icons-svelte';
 </script>
 
 <nav>
@@ -16,35 +6,35 @@
 
 	<div class="options">
 		<a href="card">
-			<div class="icon"><IconVideo size={72} /></div>
+			<div class="icon"><i class="ti ti-video"></i></div>
 			Video
 		</a>
 		<a href="audio">
-			<div class="icon"><IconVolume size={72} /></div>
+			<div class="icon"><i class="ti ti-volume"></i></div>
 			Audio
 		</a>
 		<a href="keyboard">
-			<div class="icon"><IconKeyboard size={72} /></div>
+			<div class="icon"><i class="ti ti-keyboard"></i></div>
 			Keyboard
 		</a>
 		<a href="mouse">
-			<div class="icon"><IconMouse size={72} /></div>
+			<div class="icon"><i class="ti ti-mouse"></i></div>
 			Mouse
 		</a>
 		<a href="gamepad">
-			<div class="icon"><IconDeviceGamepad size={72} /></div>
+			<div class="icon"><i class="ti ti-device-gamepad"></i></div>
 			Gamepad
 		</a>
 		<a href="camera">
-			<div class="icon"><IconCamera size={72} /></div>
+			<div class="icon"><i class="ti ti-camera"></i></div>
 			Camera
 		</a>
 		<a href="microphone">
-			<div class="icon"><IconMicrophone size={72} /></div>
+			<div class="icon"><i class="ti ti-microphone"></i></div>
 			Microphone
 		</a>
 		<a href="sensors">
-			<div class="icon"><IconCpu2 size={72} /></div>
+			<div class="icon"><i class="ti ti-cpu-2"></i></div>
 			Sensors
 		</a>
 	</div>
@@ -55,6 +45,7 @@
 		text-align: center;
 		font-size: 2.5rem;
 		margin: 1rem;
+		text-transform: uppercase;
 	}
 
 	.options {
@@ -66,5 +57,9 @@
 			text-align: center;
 			text-decoration: none;
 		}
+
+		& .ti {
+			font-size: 3rem;
+		}
 	}
 </style>

src/routes/camera/+page.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import debug from 'debug';
+	const dbg = debug('app:camera');
+
+	let video: HTMLVideoElement;
+	let devices: MediaDeviceInfo[] = [];
+	let currentDevice: string | undefined;
+
+	let requestResolution: [number, number] | 'auto' = 'auto';
+	let requestFramerate: number | 'auto' = 'auto';
+	let deviceInfo: {
+		resolution?: string;
+		frameRate?: number;
+	} = {};
+	let snapshot: string | undefined;
+	let flipped = false;
+
+	$: dbg('devices %O', devices);
+	$: dbg('currentDevice %s', currentDevice);
+
+	onMount(() => {
+		refreshDevices();
+		video.addEventListener('playing', () => {
+			if (browser && video?.srcObject instanceof MediaStream) {
+				deviceInfo = {
+					resolution: `${video.videoWidth}x${video.videoHeight}`,
+					frameRate: video?.srcObject?.getVideoTracks()[0]?.getSettings().frameRate
+				};
+			}
+		});
+	});
+
+	onDestroy(() => {
+		if (browser && video?.srcObject instanceof MediaStream) {
+			video.srcObject.getTracks().forEach((t) => t.stop());
+		}
+	});
+
+	async function refreshDevices() {
+		devices = (await navigator.mediaDevices.enumerateDevices()).filter(
+			(d) => d.kind === 'videoinput'
+		);
+		if (!currentDevice) {
+			currentDevice = devices[0]?.deviceId;
+		}
+	}
+
+	$: if (currentDevice) {
+		navigator.mediaDevices
+			.getUserMedia({
+				video: {
+					deviceId: currentDevice,
+					width: requestResolution === 'auto' ? undefined : requestResolution[0],
+					height: requestResolution === 'auto' ? undefined : requestResolution[1],
+					frameRate: requestFramerate === 'auto' ? undefined : requestFramerate
+				}
+			})
+			.then((stream) => {
+				video.srcObject = stream;
+				refreshDevices();
+			});
+	}
+
+	async function takeSnapshot() {
+		const canvas = document.createElement('canvas');
+		canvas.width = video.videoWidth;
+		canvas.height = video.videoHeight;
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return;
+		if (flipped) {
+			ctx.scale(-1, 1);
+			ctx.translate(-canvas.width, 0);
+		}
+		ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+		snapshot = canvas.toDataURL('image/png');
+	}
+</script>
+
+<h2><i class="ti ti-camera"></i> Camera test</h2>
+
+<div class="controls">
+	<label>
+		Device
+		<select bind:value={currentDevice} id="device">
+			{#each devices as device}
+				<option value={device.deviceId}>{device.label || '???'}</option>
+			{/each}
+		</select>
+	</label>
+	<button on:click={refreshDevices}>
+		<i class="ti ti-refresh"></i>
+		Refresh
+	</button>
+	<div class="separator"></div>
+	<label>
+		Resolution
+		<select bind:value={requestResolution}>
+			<option value="auto">Auto</option>
+			<option value={[4096, 2160]}>4096x2160</option>
+			<option value={[3840, 2160]}>3840x2160</option>
+			<option value={[1920, 1080]}>1920x1080</option>
+			<option value={[1280, 720]}>1280x720</option>
+			<option value={[640, 480]}>640x480</option>
+			<option value={[320, 240]}>320x240</option>
+		</select>
+	</label>
+	<label>
+		Frame rate
+		<select bind:value={requestFramerate}>
+			<option value="auto">Auto</option>
+			<option value={120}>120 fps</option>
+			<option value={60}>60 fps</option>
+			<option value={30}>30 fps</option>
+			<option value={15}>15 fps</option>
+			<option value={10}>10 fps</option>
+			<option value={5}>5 fps</option>
+		</select>
+	</label>
+</div>
+
+<div class="display" class:snapshot={Boolean(snapshot)}>
+	<!-- svelte-ignore a11y-media-has-caption -->
+	<video class:flipped bind:this={video} autoplay class:unloaded={!currentDevice}></video>
+	{#if snapshot}
+		<!-- svelte-ignore a11y-missing-attribute -->
+		<!--suppress HtmlRequiredAltAttribute -->
+		<img src={snapshot} />
+		<button on:click={() => (snapshot = undefined)}><i class="ti ti-x"></i></button>
+	{/if}
+</div>
+
+<footer>
+	{#if !currentDevice}
+		<span class="subdued">No camera selected</span>
+	{:else}
+		<ul>
+			{#key currentDevice}
+				<li>
+					Resolution: <strong>{deviceInfo.resolution || '???'}</strong>
+				</li>
+				<li>
+					Frame rate: <strong>{deviceInfo.frameRate || '???'}</strong>
+				</li>
+			{/key}
+		</ul>
+		<div class="controls">
+			<button on:click={takeSnapshot}>
+				<i class="ti ti-camera"></i>
+				Take picture
+			</button>
+			<button on:click={() => (flipped = !flipped)}>
+				<i class="ti ti-flip-vertical"></i>
+				{#if flipped}
+					Unflip image
+				{:else}
+					Flip image
+				{/if}
+			</button>
+		</div>
+	{/if}
+</footer>
+
+<style>
+	.controls {
+		display: flex;
+		align-items: end;
+		justify-content: stretch;
+		gap: 1em;
+
+		& label:first-child {
+			flex-grow: 1;
+			min-width: 0;
+		}
+	}
+
+	select {
+		background: black;
+		color: white;
+		padding: 0.25em 0.5em;
+		border-radius: 0.25em;
+		border: 1px solid white;
+	}
+
+	label {
+		display: flex;
+		flex-direction: column;
+		gap: 0.2em;
+
+		font-size: 0.8em;
+		& select {
+			font-size: initial;
+		}
+	}
+
+	.display {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		flex-grow: 1;
+		justify-content: center;
+
+		& img {
+			object-fit: contain;
+		}
+
+		& button {
+			position: absolute;
+			top: 1em;
+			right: 1em;
+		}
+
+		&.snapshot {
+			& video {
+				display: none;
+			}
+		}
+	}
+
+	video {
+		min-width: 0;
+		min-height: 0;
+		max-width: 100%;
+		max-height: 100%;
+
+		margin: 1em 0;
+
+		&.unloaded {
+			background: repeating-linear-gradient(45deg, gray, gray 20px, darkgray 20px, darkgray 40px);
+			flex-grow: 1;
+		}
+
+		&.flipped {
+			transform: scaleX(-1);
+		}
+	}
+
+	footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: inline-flex;
+		gap: 1rem;
+	}
+
+	.subdued {
+		opacity: 0.8;
+	}
+</style>

src/routes/card/+page.svelte

@@ -1,8 +1,7 @@
 <script>
-	import { IconArrowBack } from '@tabler/icons-svelte';
 </script>
 
-<a href="/" class="hide-idle"><IconArrowBack /> Back</a>
+<a href="/" class="hide-idle"><i class="ti ti-arrow-back"></i> Back</a>
 
 <style>
 	a {