feat: Kamera-Adapter mit Datei-Ersatzweg

src/camera.js

@@ -0,0 +1,57 @@
+/**
+ * Startet den Kamerastrom in einem <video>-Element.
+ * Bevorzugt die Ruecckamera und eine hohe Aufloesung, damit die
+ * kleine Etikettenschrift lesbar bleibt.
+ */
+export async function startCamera(videoElement) {
+  const stream = await navigator.mediaDevices.getUserMedia({
+    video: {
+      facingMode: { ideal: 'environment' },
+      width: { ideal: 1920 },
+      height: { ideal: 1080 },
+    },
+    audio: false,
+  });
+
+  videoElement.srcObject = stream;
+  videoElement.setAttribute('playsinline', '');
+  await videoElement.play();
+
+  return {
+    stop() {
+      for (const track of stream.getTracks()) track.stop();
+      videoElement.srcObject = null;
+    },
+  };
+}
+
+function drawScaled(source, sourceWidth, sourceHeight, maxEdge) {
+  const scale = Math.min(1, maxEdge / Math.max(sourceWidth, sourceHeight));
+  const width = Math.round(sourceWidth * scale);
+  const height = Math.round(sourceHeight * scale);
+
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext('2d', { willReadFrequently: true });
+  context.drawImage(source, 0, 0, width, height);
+  return context.getImageData(0, 0, width, height);
+}
+
+/** Einzelbild aus dem laufenden Kamerastrom. */
+export function grabFrame(videoElement, maxEdge = 1280) {
+  return drawScaled(
+    videoElement,
+    videoElement.videoWidth,
+    videoElement.videoHeight,
+    maxEdge,
+  );
+}
+
+/** Ersatzweg ohne Kamera: Bilddatei auswaehlen (z. B. am Rechner). */
+export async function imageDataFromFile(file, maxEdge = 1280) {
+  const bitmap = await createImageBitmap(file);
+  const data = drawScaled(bitmap, bitmap.width, bitmap.height, maxEdge);
+  bitmap.close();
+  return data;
+}

src/main.js

@@ -1 +1,20 @@
-document.querySelector('#app').textContent = 'RAM-Sortierhilfe';
+import { startCamera, grabFrame } from './camera.js';
+
+const app = document.querySelector('#app');
+app.innerHTML = `
+  <video id="v" style="width:100%"></video>
+  <button id="b" style="min-height:56px;width:100%">Bild aufnehmen</button>
+  <pre id="out"></pre>
+`;
+
+const video = document.querySelector('#v');
+const out = document.querySelector('#out');
+
+startCamera(video)
+  .then(() => { out.textContent = 'Kamera laeuft'; })
+  .catch((error) => { out.textContent = `Kamera nicht verfuegbar: ${error.message}`; });
+
+document.querySelector('#b').addEventListener('click', () => {
+  const frame = grabFrame(video);
+  out.textContent = `Bild: ${frame.width}x${frame.height}`;
+});