voice-poc: WebRTC voice + screen share + spatial audio with configurable STUN/TURN

voice-poc/public/index.html

@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>gibbz voice — POC</title>
+<link rel="stylesheet" href="style.css" />
+</head>
+<body>
+<div id="app">
+  <!-- server rail -->
+  <nav id="rail">
+    <div class="rail-icon home" title="gibbz voice">G</div>
+    <div class="rail-sep"></div>
+    <div class="rail-icon" title="POC server">VP</div>
+  </nav>
+
+  <!-- channel sidebar -->
+  <aside id="sidebar">
+    <header id="server-name">gibbz voice <span class="poc-tag">POC</span></header>
+    <div class="channel-group-label">Text channels</div>
+    <div class="channel text" data-noop>#
+      general <span class="hint">not implemented</span></div>
+    <div class="channel-group-label">Voice channels</div>
+    <div class="channel voice" data-room="general">&#128266; General <span class="count" data-room-count="general"></span></div>
+    <div class="channel voice" data-room="gaming">&#128266; Gaming <span class="count" data-room-count="gaming"></span></div>
+    <div class="channel voice" data-room="lounge">&#128266; Lounge <span class="count" data-room-count="lounge"></span></div>
+
+    <footer id="user-panel">
+      <div class="me">
+        <div class="avatar" id="me-avatar">?</div>
+        <div class="me-meta">
+          <input id="nick" maxlength="24" spellcheck="false" title="Nickname" />
+          <span id="voice-status">not connected</span>
+        </div>
+      </div>
+      <div class="user-buttons">
+        <button id="btn-mic" class="ctl" title="Toggle mic (M)">&#127908;</button>
+        <button id="btn-deafen" class="ctl" title="Toggle deafen (D)">&#128064;</button>
+        <button id="btn-settings" class="ctl" title="Voice &amp; ICE settings">&#9881;&#65039;</button>
+      </div>
+    </footer>
+  </aside>
+
+  <!-- main stage -->
+  <main id="main">
+    <div id="stage">
+      <div id="screens"></div>
+      <div id="tiles"></div>
+      <div id="stage-empty">
+        <div class="big-icon">&#128266;</div>
+        <h2>Pick a voice channel to join</h2>
+        <p>Peer-to-peer WebRTC voice &amp; screen sharing. Drag avatars on the spatial plane to position who you hear.</p>
+      </div>
+    </div>
+
+    <div id="spatial-wrap">
+      <div class="spatial-label">
+        <span>SPATIAL AUDIO</span>
+        <span class="hint">drag <b>your</b> avatar &mdash; others hear you shift; you hear them relative to position</span>
+      </div>
+      <canvas id="spatial"></canvas>
+    </div>
+  </main>
+</div>
+
+<!-- settings modal -->
+<div id="modal-backdrop" class="hidden">
+  <div id="settings-modal" role="dialog" aria-modal="true">
+    <h2>Voice &amp; ICE settings</h2>
+    <p class="hint">Overrides the server-provided ICE configuration (stored in <code>localStorage</code>, applied on next join).</p>
+    <label class="toggle-row">
+      <input type="checkbox" id="override-enabled" />
+      <span>Use custom STUN/TURN (JSON below)</span>
+    </label>
+    <textarea id="ice-json" rows="12" spellcheck="false"></textarea>
+    <div class="modal-actions">
+      <button id="ice-reset" class="ghost">Reset to server defaults</button>
+      <span class="spacer"></span>
+      <button id="ice-cancel" class="ghost">Cancel</button>
+      <button id="ice-save">Save</button>
+    </div>
+    <h3>Server defaults</h3>
+    <pre id="ice-server-default" class="hint"></pre>
+  </div>
+</div>
+
+<div id="toasts"></div>
+
+<script src="app.js?v=4"></script>
+</body>
+</html>