phone-stream-e2e

Running

App Files Files Community

kylsprt commited on Feb 20

Commit

a7e3093

verified ·

1 Parent(s): 30c2a23

Update index.html

Browse files

Files changed (1) hide show

index.html +527 -140

index.html CHANGED Viewed

@@ -3,139 +3,455 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-<title>🎙️ Audio CCTV</title>
 <style>
-  * { margin:0; padding:0; box-sizing:border-box; }
   body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    background: #0a0a0a; color: #e0e0e0;
-    min-height: 100vh;
-    display: flex; justify-content: center; align-items: center;
-  }
-  .c { width:100%; max-width:420px; padding:24px; }
-  h1 { text-align:center; font-size:1.6em; margin-bottom:6px; }
-  .sub { text-align:center; color:#666; font-size:13px; margin-bottom:24px; }
-  input {
-    width:100%; padding:14px; border:2px solid #222; border-radius:10px;
-    background:#111; color:#fff; font-size:16px; text-align:center;
-    margin-bottom:12px; outline:none;
-  }
-  input:focus { border-color:#00c853; }
   .btn {
-    width:100%; padding:16px; border:none; border-radius:10px;
-    font-size:16px; font-weight:700; cursor:pointer;
-    margin-bottom:10px; transition:all .2s;
-  }
-  .btn:active { transform:scale(0.97); }
-  #connectBtn { background:#00c853; color:#000; }
-  #connectBtn:disabled { background:#1a1a1a; color:#444; cursor:default; }
-  #muteBtn {
-    display:none; background:#00c853; color:#000;
-  }
-  #muteBtn.muted { background:#ff1744; color:#fff; }
-  .status {
-    text-align:center; margin:16px 0; padding:12px;
-    border-radius:10px; background:#111; font-size:14px;
-  }
-  .label { font-size:12px; color:#555; margin:8px 0 4px; }
-  .meter {
-    width:100%; height:6px; background:#1a1a1a;
-    border-radius:3px; overflow:hidden;
   }
   .meter-fill {
-    height:100%; width:0%; border-radius:3px;
-    transition:width .08s linear;
   }
-  #micFill { background:#00c853; }
-  #spkFill { background:#2979ff; }
-  .stats {
-    text-align:center; font-size:11px; color:#333; margin-top:20px;
   }
   .tips {
-    margin-top:24px; padding:16px; background:#111;
-    border-radius:10px; font-size:12px; color:#555; line-height:1.6;
   }
-  .tips b { color:#888; }
 </style>
 </head>
 <body>
-<div class="c">
-  <h1>🎙️ Audio CCTV</h1>
-  <p class="sub">Intercom 2 arah — buka di 2 device, room sama</p>
-  <input type="text" id="room" placeholder="Nama Room" value="kamar">
-  <button class="btn" id="connectBtn">🔌 Connect</button>
-  <button class="btn" id="muteBtn">🎤 Mic ON</button>
-  <div class="status" id="status">⚫ Belum terhubung</div>
-  <div class="label">📤 Mic</div>
-  <div class="meter"><div class="meter-fill" id="micFill"></div></div>
-  <div class="label">📥 Speaker</div>
-  <div class="meter"><div class="meter-fill" id="spkFill"></div></div>
-  <div class="stats" id="stats"></div>
-  <div class="tips">
-    <b>Tips HP bekas 24 jam:</b><br>
-    • Colok charger terus<br>
-    • Matikan battery optimization untuk Chrome<br>
-    • Setting > Display > Screen timeout > Never<br>
-    • Setting > WiFi > Keep WiFi on during sleep > Always<br>
-    • Aktifkan Do Not Disturb
   </div>
 </div>
 <script>
 const $ = id => document.getElementById(id);
-const BUFFER = 4096;
 let ws, audioCtx, micStream;
 let captureNode, playNode, sourceNode, silentGain;
 let playQueue = [];
-let isMuted = false, isInit = false;
 let bytesSent = 0, bytesRecv = 0, reconnects = 0;
-// ========== CONNECT ==========
-$('connectBtn').onclick = init;
-$('muteBtn').onclick = toggleMute;
-async function init() {
   try {
-    // Minta izin mic (sekali aja)
-    if (!isInit) {
-      micStream = await navigator.mediaDevices.getUserMedia({
-        audio: {
-          echoCancellation: true,
-          noiseSuppression: true,
-          autoGainControl: true
-        }
-      });
-      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-      if (audioCtx.state === 'suspended') await audioCtx.resume();
-      setupAudio();
-      isInit = true;
-    }
     connectWS();
   } catch(e) {
-    setStatus('❌ ' + e.message);
-    alert('Izinkan akses mikrofon dulu!');
   }
 }
 // ========== WEBSOCKET ==========
 function connectWS() {
-  const room = $('room').value || 'default';
   const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
   ws = new WebSocket(`${proto}//${location.host}/ws/${room}`);
   ws.binaryType = 'arraybuffer';
   ws.onopen = () => {
-    setStatus(`🟢 Terhubung — Room: ${room}`);
-    $('connectBtn').disabled = true;
-    $('connectBtn').textContent = '🟢 Connected';
-    $('muteBtn').style.display = 'block';
     tryWakeLock();
   };
@@ -150,37 +466,28 @@ function connectWS() {
   };
   ws.onclose = () => {
     reconnects++;
-    setStatus(`🔴 Terputus — reconnect #${reconnects}...`);
-    setTimeout(connectWS, 3000);
   };
-  ws.onerror = () => setStatus('❌ Error');
 }
-// ========== AUDIO NODES ==========
-function setupAudio() {
-  // --- CAPTURE: Mic → WebSocket ---
   sourceNode = audioCtx.createMediaStreamSource(micStream);
-  captureNode = audioCtx.createScriptProcessor(BUFFER, 1, 1);
   silentGain = audioCtx.createGain();
-  silentGain.gain.value = 0; // mic gak keluar speaker sendiri
   captureNode.onaudioprocess = (e) => {
-    if (!ws || ws.readyState !== 1 || isMuted) return;
     const pcm = e.inputBuffer.getChannelData(0);
-    // Mic meter
-    let sum = 0;
-    for (let i = 0; i < pcm.length; i++) sum += pcm[i] * pcm[i];
-    setMeter('micFill', Math.sqrt(sum / pcm.length));
-    // Float32 → Int16
-    const int16 = new Int16Array(pcm.length);
-    for (let i = 0; i < pcm.length; i++) {
-      const s = Math.max(-1, Math.min(1, pcm[i]));
-      int16[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
-    }
     ws.send(int16.buffer);
     bytesSent += int16.buffer.byteLength;
   };
@@ -189,58 +496,138 @@ function setupAudio() {
   captureNode.connect(silentGain);
   silentGain.connect(audioCtx.destination);
-  // --- PLAYBACK: WebSocket → Speaker ---
-  playNode = audioCtx.createScriptProcessor(BUFFER, 1, 1);
   playNode.onaudioprocess = (e) => {
     const out = e.outputBuffer.getChannelData(0);
-    if (playQueue.length > 0) {
       const chunk = playQueue.shift();
       const len = Math.min(out.length, chunk.length);
       for (let i = 0; i < len; i++) out[i] = chunk[i];
       for (let i = len; i < out.length; i++) out[i] = 0;
-      let sum = 0;
-      for (let i = 0; i < len; i++) sum += chunk[i] * chunk[i];
-      setMeter('spkFill', Math.sqrt(sum / len));
     } else {
       out.fill(0);
-      setMeter('spkFill', 0);
     }
   };
   playNode.connect(audioCtx.destination);
-  // Stats update
-  setInterval(() => {
-    const s = (bytesSent/1024).toFixed(0);
-    const r = (bytesRecv/1024).toFixed(0);
-    $('stats').textContent = `📤 ${s} KB | 📥 ${r} KB | Buffer: ${playQueue.length} | Reconnects: ${reconnects}`;
-  }, 1000);
-  // Keep-alive: ping server biar gak sleep
-  setInterval(() => fetch('/ping').catch(()=>{}), 60000);
-  setInterval(() => {
-    if (ws && ws.readyState === 1) ws.send(new Uint8Array(1));
-  }, 30000);
 }
-// ========== UTILS ==========
-function toggleMute() {
-  isMuted = !isMuted;
-  $('muteBtn').textContent = isMuted ? '🔇 Mic OFF' : '🎤 Mic ON';
-  $('muteBtn').classList.toggle('muted', isMuted);
 }
-function setMeter(id, rms) {
-  $(id).style.width = Math.min(100, rms * 500) + '%';
 }
-function setStatus(t) { $('status').textContent = t; }
 async function tryWakeLock() {
-  try { if ('wakeLock' in navigator) await navigator.wakeLock.request('screen'); }
-  catch(e) {}
 }
 </script>
 </body>
 </html>

 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<title>Audio CCTV</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎙</text></svg>">
+<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
 <style>
+  :root {
+    --bg: #050505;
+    --surface: #0d0d0d;
+    --surface-2: #141414;
+    --surface-3: #1a1a1a;
+    --border: #1f1f1f;
+    --border-2: #2a2a2a;
+    --text: #f0f0f0;
+    --text-2: #999;
+    --text-3: #555;
+    --accent: #00e676;
+    --accent-dim: rgba(0,230,118,.08);
+    --accent-glow: rgba(0,230,118,.15);
+    --danger: #ff3d57;
+    --danger-dim: rgba(255,61,87,.08);
+    --blue: #448aff;
+    --blue-dim: rgba(68,138,255,.15);
+    --radius: 14px;
+    --radius-sm: 10px;
+    --transition: .25s cubic-bezier(.4,0,.2,1);
+  }
+  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
+  html, body {
+    height:100%; overflow:hidden;
+    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
+    background: var(--bg); color: var(--text);
+    -webkit-font-smoothing: antialiased;
+  }
   body {
+    display:flex; justify-content:center; align-items:center;
+  }
+  .app {
+    width:100%; max-width:400px; height:100vh; max-height:100dvh;
+    display:flex; flex-direction:column;
+    padding: 0 20px;
+    overflow-y:auto; overflow-x:hidden;
+    scrollbar-width:none;
+  }
+  .app::-webkit-scrollbar { display:none; }
+  /* ===== HEADER ===== */
+  .header {
+    padding: 52px 0 28px;
+    text-align:center; flex-shrink:0;
+  }
+  .header-icon {
+    width:52px; height:52px;
+    background: var(--accent-dim);
+    border: 1px solid rgba(0,230,118,.12);
+    border-radius:16px;
+    display:inline-flex; align-items:center; justify-content:center;
+    margin-bottom:16px;
+  }
+  .header-icon i { color: var(--accent); }
+  .header h1 {
+    font-size:22px; font-weight:700;
+    letter-spacing:-.3px; margin-bottom:4px;
+  }
+  .header p { font-size:13px; color:var(--text-3); }
+  /* ===== CARD ===== */
+  .card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding:20px; margin-bottom:12px;
+    flex-shrink:0;
+  }
+  .card-label {
+    font-size:11px; font-weight:600;
+    text-transform:uppercase; letter-spacing:.8px;
+    color:var(--text-3); margin-bottom:14px;
+    display:flex; align-items:center; gap:6px;
+  }
+  .card-label i { width:14px; height:14px; }
+  /* ===== ROOM INPUT ===== */
+  .room-row { display:flex; gap:10px; }
+  .room-input {
+    flex:1; padding:14px 16px;
+    background: var(--surface-2);
+    border:1.5px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text); font-size:15px;
+    outline:none; transition: var(--transition);
+  }
+  .room-input:focus {
+    border-color: var(--accent);
+    background: var(--accent-dim);
+  }
+  .room-input::placeholder { color: var(--text-3); }
+  .room-input:disabled {
+    opacity:.4; pointer-events:none;
+  }
+  /* ===== BUTTONS ===== */
   .btn {
+    display:inline-flex; align-items:center; justify-content:center; gap:8px;
+    padding:14px 20px; border:none; border-radius:var(--radius-sm);
+    font-size:14px; font-weight:600; cursor:pointer;
+    transition: var(--transition); position:relative; overflow:hidden;
+    flex-shrink:0;
+  }
+  .btn:active { transform:scale(.96); }
+  .btn i { width:18px; height:18px; flex-shrink:0; pointer-events:none; }
+  .btn:disabled { opacity:.35; pointer-events:none; transform:none; }
+  .btn-connect {
+    background: var(--accent); color:#000;
+  }
+  .btn-connect:hover { background:#00f082; }
+  .btn-connect.connected {
+    background: var(--danger-dim); color: var(--danger);
+    border: 1px solid rgba(255,61,87,.2);
+  }
+  .btn-row { display:flex; gap:10px; }
+  .btn-mic {
+    flex:1; background: var(--accent-dim); color: var(--accent);
+    border:1px solid rgba(0,230,118,.15);
+  }
+  .btn-mic.muted {
+    background: var(--danger-dim); color: var(--danger);
+    border-color: rgba(255,61,87,.2);
+  }
+  .btn-speaker {
+    flex:1; background: var(--blue-dim); color: var(--blue);
+    border:1px solid rgba(68,138,255,.15);
+  }
+  .btn-speaker.muted {
+    background: var(--danger-dim); color: var(--danger);
+    border-color: rgba(255,61,87,.2);
+  }
+  /* ===== STATUS ===== */
+  .status-bar {
+    display:flex; align-items:center; gap:10px;
+    padding:14px 16px; border-radius:var(--radius-sm);
+    background: var(--surface-2); border:1px solid var(--border);
+  }
+  .status-dot {
+    width:8px; height:8px; border-radius:50%;
+    background: var(--text-3); flex-shrink:0;
+    transition: var(--transition);
+  }
+  .status-dot.live {
+    background: var(--accent);
+    box-shadow: 0 0 8px var(--accent-glow);
+    animation: pulse-dot 2s infinite;
+  }
+  .status-dot.error { background: var(--danger); }
+  @keyframes pulse-dot {
+    0%,100% { opacity:1; }
+    50% { opacity:.4; }
+  }
+  .status-text { font-size:13px; color:var(--text-2); flex:1; }
+  /* ===== METERS ===== */
+  .meters { display:flex; flex-direction:column; gap:16px; }
+  .meter-item {}
+  .meter-head {
+    display:flex; align-items:center; justify-content:space-between;
+    margin-bottom:8px;
+  }
+  .meter-label {
+    display:flex; align-items:center; gap:6px;
+    font-size:12px; font-weight:600; color:var(--text-2);
+  }
+  .meter-label i { width:14px; height:14px; }
+  .meter-val {
+    font-size:11px; color:var(--text-3);
+    font-variant-numeric: tabular-nums;
+  }
+  .meter-track {
+    width:100%; height:4px;
+    background: var(--surface-3);
+    border-radius:2px; overflow:hidden;
   }
   .meter-fill {
+    height:100%; width:0%;
+    border-radius:2px;
+    transition: width .06s linear;
   }
+  .meter-fill.mic { background: var(--accent); }
+  .meter-fill.spk { background: var(--blue); }
+  /* ===== STATS ===== */
+  .stats-grid {
+    display:grid; grid-template-columns:1fr 1fr 1fr;
+    gap:10px;
+  }
+  .stat-item {
+    text-align:center; padding:12px 8px;
+    background: var(--surface-2);
+    border-radius:var(--radius-sm);
+    border:1px solid var(--border);
+  }
+  .stat-val {
+    font-size:16px; font-weight:700;
+    font-variant-numeric: tabular-nums;
+    margin-bottom:2px;
   }
+  .stat-label { font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; }
+  .stat-val.up { color: var(--accent); }
+  .stat-val.down { color: var(--blue); }
+  .stat-val.neutral { color: var(--text-2); }
+  /* ===== TIPS ===== */
   .tips {
+    padding:16px; background:var(--surface-2);
+    border:1px solid var(--border);
+    border-radius:var(--radius-sm);
+    margin-bottom:32px;
+  }
+  .tips-title {
+    font-size:12px; font-weight:600; color:var(--text-2);
+    margin-bottom:10px; display:flex; align-items:center; gap:6px;
+  }
+  .tips-title i { width:14px; height:14px; }
+  .tips ul {
+    list-style:none; display:flex; flex-direction:column; gap:6px;
+  }
+  .tips li {
+    font-size:12px; color:var(--text-3); line-height:1.5;
+    padding-left:16px; position:relative;
+  }
+  .tips li::before {
+    content:''; position:absolute; left:0; top:7px;
+    width:4px; height:4px; border-radius:50%;
+    background: var(--border-2);
+  }
+  /* ===== CONTROLS HIDDEN UNTIL CONNECTED ===== */
+  .controls { display:none; }
+  .controls.show { display:flex; flex-direction:column; gap:12px; }
+  /* ===== RESPONSIVE ===== */
+  @media (min-width:768px) {
+    .app {
+      max-height:unset; justify-content:center;
+      padding: 40px 20px;
+    }
+    .header { padding-top:0; }
+  }
+  @media (max-height:640px) {
+    .header { padding: 24px 0 16px; }
+    .header-icon { width:40px; height:40px; border-radius:12px; margin-bottom:10px; }
+    .tips { display:none; }
   }
 </style>
 </head>
 <body>
+<div class="app">
+  <!-- HEADER -->
+  <div class="header">
+    <div class="header-icon">
+      <i data-lucide="radio" style="width:24px;height:24px;"></i>
+    </div>
+    <h1>Audio CCTV</h1>
+    <p>Intercom 2 arah &mdash; realtime audio relay</p>
+  </div>
+  <!-- ROOM + CONNECT -->
+  <div class="card">
+    <div class="card-label">
+      <i data-lucide="hash"></i> Room
+    </div>
+    <div class="room-row">
+      <input type="text" class="room-input" id="room" placeholder="Nama room..." value="kamar" autocomplete="off" spellcheck="false">
+      <button class="btn btn-connect" id="connectBtn">
+        <i data-lucide="plug"></i>
+      </button>
+    </div>
+  </div>
+  <!-- STATUS -->
+  <div class="card">
+    <div class="status-bar">
+      <div class="status-dot" id="statusDot"></div>
+      <span class="status-text" id="statusText">Belum terhubung</span>
+    </div>
+  </div>
+  <!-- CONTROLS (hidden until connected) -->
+  <div class="controls" id="controls">
+    <!-- MIC & SPEAKER -->
+    <div class="card">
+      <div class="card-label">
+        <i data-lucide="settings-2"></i> Kontrol
+      </div>
+      <div class="btn-row">
+        <button class="btn btn-mic" id="muteBtn">
+          <i data-lucide="mic"></i>
+          <span>Mic ON</span>
+        </button>
+        <button class="btn btn-speaker" id="spkBtn">
+          <i data-lucide="volume-2"></i>
+          <span>Speaker ON</span>
+        </button>
+      </div>
+    </div>
+    <!-- METERS -->
+    <div class="card">
+      <div class="card-label">
+        <i data-lucide="activity"></i> Level
+      </div>
+      <div class="meters">
+        <div class="meter-item">
+          <div class="meter-head">
+            <div class="meter-label"><i data-lucide="mic"></i> Mikrofon</div>
+            <span class="meter-val" id="micDb">-∞ dB</span>
+          </div>
+          <div class="meter-track"><div class="meter-fill mic" id="micFill"></div></div>
+        </div>
+        <div class="meter-item">
+          <div class="meter-head">
+            <div class="meter-label"><i data-lucide="volume-2"></i> Speaker</div>
+            <span class="meter-val" id="spkDb">-∞ dB</span>
+          </div>
+          <div class="meter-track"><div class="meter-fill spk" id="spkFill"></div></div>
+        </div>
+      </div>
+    </div>
+    <!-- STATS -->
+    <div class="card">
+      <div class="card-label">
+        <i data-lucide="bar-chart-3"></i> Statistik
+      </div>
+      <div class="stats-grid">
+        <div class="stat-item">
+          <div class="stat-val up" id="statUp">0</div>
+          <div class="stat-label">Sent KB</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-val down" id="statDown">0</div>
+          <div class="stat-label">Recv KB</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-val neutral" id="statBuf">0</div>
+          <div class="stat-label">Buffer</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- TIPS -->
+  <div class="tips" id="tips">
+    <div class="tips-title">
+      <i data-lucide="lightbulb"></i> Tips HP bekas 24 jam
+    </div>
+    <ul>
+      <li>Colok charger terus, baterai aman di 80%</li>
+      <li>Display &gt; Screen timeout &gt; Never</li>
+      <li>Battery optimization &gt; Chrome &gt; Don't optimize</li>
+      <li>WiFi &gt; Keep on during sleep &gt; Always</li>
+      <li>Aktifkan Do Not Disturb mode</li>
+    </ul>
   </div>
 </div>
 <script>
 const $ = id => document.getElementById(id);
+const BUFFER_SIZE = 4096;
+const SAMPLE_RATE = 16000;
 let ws, audioCtx, micStream;
 let captureNode, playNode, sourceNode, silentGain;
 let playQueue = [];
+let isMuted = false, isSpkMuted = false, isConnected = false;
 let bytesSent = 0, bytesRecv = 0, reconnects = 0;
+let reconnectTimer = null;
+// ========== INIT LUCIDE ==========
+document.addEventListener('DOMContentLoaded', () => { lucide.createIcons(); });
+// ========== CONNECT / DISCONNECT ==========
+$('connectBtn').onclick = () => isConnected ? disconnect() : connect();
+async function connect() {
   try {
+    micStream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        echoCancellation: true,
+        noiseSuppression: true,
+        autoGainControl: true,
+        sampleRate: SAMPLE_RATE
+      }
+    });
+    audioCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLE_RATE });
+    if (audioCtx.state === 'suspended') await audioCtx.resume();
+    setupAudioNodes();
     connectWS();
   } catch(e) {
+    setStatus('error', 'Izinkan akses mikrofon');
   }
 }
+function disconnect() {
+  if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+  if (ws) { ws.onclose = null; ws.close(); ws = null; }
+  if (captureNode) { captureNode.disconnect(); captureNode = null; }
+  if (playNode) { playNode.disconnect(); playNode = null; }
+  if (sourceNode) { sourceNode.disconnect(); sourceNode = null; }
+  if (silentGain) { silentGain.disconnect(); silentGain = null; }
+  if (audioCtx) { audioCtx.close(); audioCtx = null; }
+  if (micStream) { micStream.getTracks().forEach(t => t.stop()); micStream = null; }
+  playQueue = [];
+  isConnected = false;
+  setStatus('off', 'Terputus');
+  $('controls').classList.remove('show');
+  $('connectBtn').classList.remove('connected');
+  $('connectBtn').innerHTML = '<i data-lucide="plug"></i>';
+  $('room').disabled = false;
+  lucide.createIcons({ nodes: [$('connectBtn')] });
+}
 // ========== WEBSOCKET ==========
 function connectWS() {
+  const room = $('room').value.trim() || 'default';
   const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
   ws = new WebSocket(`${proto}//${location.host}/ws/${room}`);
   ws.binaryType = 'arraybuffer';
   ws.onopen = () => {
+    isConnected = true;
+    setStatus('live', `Live &mdash; ${room}`);
+    $('controls').classList.add('show');
+    $('connectBtn').classList.add('connected');
+    $('connectBtn').innerHTML = '<i data-lucide="plug-zap"></i>';
+    $('room').disabled = true;
+    lucide.createIcons({ nodes: [$('connectBtn')] });
     tryWakeLock();
   };
   };
   ws.onclose = () => {
+    if (!isConnected) return;
     reconnects++;
+    setStatus('error', `Reconnecting #${reconnects}...`);
+    reconnectTimer = setTimeout(connectWS, 3000);
   };
+  ws.onerror = () => {};
 }
+// ========== AUDIO PIPELINE ==========
+function setupAudioNodes() {
   sourceNode = audioCtx.createMediaStreamSource(micStream);
+  captureNode = audioCtx.createScriptProcessor(BUFFER_SIZE, 1, 1);
   silentGain = audioCtx.createGain();
+  silentGain.gain.value = 0;
   captureNode.onaudioprocess = (e) => {
+    if (!ws || ws.readyState !== 1 || isMuted) { setMeter('mic', 0); return; }
     const pcm = e.inputBuffer.getChannelData(0);
+    const rms = calcRMS(pcm);
+    setMeter('mic', rms);
+    const int16 = float32ToInt16(pcm);
     ws.send(int16.buffer);
     bytesSent += int16.buffer.byteLength;
   };
   captureNode.connect(silentGain);
   silentGain.connect(audioCtx.destination);
+  playNode = audioCtx.createScriptProcessor(BUFFER_SIZE, 1, 1);
   playNode.onaudioprocess = (e) => {
     const out = e.outputBuffer.getChannelData(0);
+    if (playQueue.length > 0 && !isSpkMuted) {
       const chunk = playQueue.shift();
       const len = Math.min(out.length, chunk.length);
       for (let i = 0; i < len; i++) out[i] = chunk[i];
       for (let i = len; i < out.length; i++) out[i] = 0;
+      setMeter('spk', calcRMS(chunk));
     } else {
       out.fill(0);
+      setMeter('spk', 0);
     }
   };
   playNode.connect(audioCtx.destination);
+  startStatsLoop();
+  startKeepAlive();
+}
+// ========== CONTROLS ==========
+$('muteBtn').onclick = () => {
+  isMuted = !isMuted;
+  const btn = $('muteBtn');
+  btn.classList.toggle('muted', isMuted);
+  btn.innerHTML = isMuted
+    ? '<i data-lucide="mic-off"></i><span>Mic OFF</span>'
+    : '<i data-lucide="mic"></i><span>Mic ON</span>';
+  lucide.createIcons({ nodes: [btn] });
+};
+$('spkBtn').onclick = () => {
+  isSpkMuted = !isSpkMuted;
+  const btn = $('spkBtn');
+  btn.classList.toggle('muted', isSpkMuted);
+  btn.innerHTML = isSpkMuted
+    ? '<i data-lucide="volume-x"></i><span>Speaker OFF</span>'
+    : '<i data-lucide="volume-2"></i><span>Speaker ON</span>';
+  lucide.createIcons({ nodes: [btn] });
+};
+// ========== HELPERS ==========
+function float32ToInt16(f32) {
+  const int16 = new Int16Array(f32.length);
+  for (let i = 0; i < f32.length; i++) {
+    const s = Math.max(-1, Math.min(1, f32[i]));
+    int16[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
+  }
+  return int16;
 }
+function calcRMS(buf) {
+  let sum = 0;
+  for (let i = 0; i < buf.length; i++) sum += buf[i] * buf[i];
+  return Math.sqrt(sum / buf.length);
+}
+function setMeter(type, rms) {
+  const pct = Math.min(100, rms * 500);
+  const db = rms > 0.0001 ? (20 * Math.log10(rms)).toFixed(0) : '-∞';
+  if (type === 'mic') {
+    $('micFill').style.width = pct + '%';
+    $('micDb').textContent = db + ' dB';
+  } else {
+    $('spkFill').style.width = pct + '%';
+    $('spkDb').textContent = db + ' dB';
+  }
 }
+function setStatus(state, text) {
+  const dot = $('statusDot');
+  dot.className = 'status-dot';
+  if (state === 'live') dot.classList.add('live');
+  if (state === 'error') dot.classList.add('error');
+  $('statusText').innerHTML = text;
 }
+function startStatsLoop() {
+  setInterval(() => {
+    $('statUp').textContent = (bytesSent / 1024).toFixed(0);
+    $('statDown').textContent = (bytesRecv / 1024).toFixed(0);
+    $('statBuf').textContent = playQueue.length;
+  }, 1000);
+}
+function startKeepAlive() {
+  setInterval(() => fetch('/ping').catch(() => {}), 55000);
+  setInterval(() => { if (ws && ws.readyState === 1) ws.send(new Uint8Array(1)); }, 25000);
+}
 async function tryWakeLock() {
+  try { if ('wakeLock' in navigator) await navigator.wakeLock.request('screen'); } catch(e) {}
 }
+// ========== ALWAYS ON: Re-connect on visibility change ==========
+document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'visible' && isConnected) {
+    if (audioCtx && audioCtx.state === 'suspended') audioCtx.resume();
+    if (!ws || ws.readyState > 1) connectWS();
+  }
+});
+// ========== PREVENT SLEEP: Silent audio loop ==========
+(function keepAudioAlive() {
+  document.addEventListener('click', function once() {
+    try {
+      const ctx = new (window.AudioContext || window.webkitAudioContext)();
+      const osc = ctx.createOscillator();
+      const gain = ctx.createGain();
+      gain.gain.value = 0.00001;
+      osc.connect(gain);
+      gain.connect(ctx.destination);
+      osc.start();
+    } catch(e) {}
+    document.removeEventListener('click', once);
+  });
+})();
+// ========== NO SLEEP: Invisible video trick ==========
+(function noSleep() {
+  let video = document.createElement('video');
+  video.setAttribute('playsinline','');
+  video.setAttribute('muted','');
+  video.style.cssText = 'position:fixed;top:-1px;left:-1px;width:1px;height:1px;opacity:0.01;';
+  const blob = new Blob([new Uint8Array([
+    0,0,0,28,102,116,121,112,105,115,111,109,0,0,2,0,105,115,111,109,105,115,111,50,
+    109,112,52,49,0,0,0,8,102,114,101,101,0,0,2,239,109,100,97,116,0,0,0,0
+  ])], {type:'video/mp4'});
+  video.src = URL.createObjectURL(blob);
+  document.body.appendChild(video);
+  document.addEventListener('click', function() { video.play().catch(()=>{}); }, {once:true});
+})();
 </script>
 </body>
 </html>