WebCam als schlanke alternative zum appVideoControl

2026-06-02 22:19:08 +02:00
commit 9b1ae2ae14
11 changed files with 842 additions and 0 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>AppRobotWebcam</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body { background: #0f0f0f; color: #e0e0e0; font-family: monospace; }
+
+    header {
+      display: flex; align-items: center; gap: 12px;
+      padding: 10px 16px;
+      background: #1a1a1a;
+      border-bottom: 1px solid #333;
+    }
+    h1 { font-size: 1rem; font-weight: normal; letter-spacing: 0.05em; }
+    #statusText { font-size: 0.8rem; color: #888; margin-left: auto; }
+
+    #cameras {
+      display: flex; flex-wrap: wrap; gap: 12px;
+      padding: 12px;
+    }
+
+    .cam-box {
+      position: relative;
+      background: #000;
+      border: 1px solid #2a2a2a;
+    }
+    .cam-box canvas { display: block; }
+
+    .cam-label {
+      position: absolute; top: 5px; left: 8px;
+      background: rgba(0,0,0,.65);
+      padding: 2px 7px; border-radius: 3px;
+      font-size: 0.72rem; color: #ccc;
+    }
+    .cam-info {
+      position: absolute; bottom: 5px; right: 8px;
+      background: rgba(0,0,0,.65);
+      padding: 2px 7px; border-radius: 3px;
+      font-size: 0.68rem; color: #999;
+    }
+
+    .cam-actions {
+      position: absolute; top: 5px; right: 8px;
+      display: flex; gap: 4px;
+    }
+    .cam-actions button {
+      background: rgba(0,0,0,.65); color: #ccc;
+      border: 1px solid #444; padding: 2px 8px;
+      font-family: monospace; font-size: 0.7rem;
+      cursor: pointer; border-radius: 3px;
+    }
+    .cam-actions button:hover { background: rgba(60,60,60,.8); }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>AppRobotWebcam</h1>
+    <span id="statusText">Verbinde...</span>
+  </header>
+  <div id="cameras"></div>
+  <script src="viewer.js"></script>
+</body>
+</html>