highest quality

public/client.js

@@ -6,6 +6,8 @@ const streamListUl = document.getElementById('streamList');
 const lobbyView = document.getElementById('lobby-view');
 const streamView = document.getElementById('stream-view');
 const streamTitle = document.getElementById('currentStreamTitle');
+const upstreamMetricsBox = document.getElementById('upstreamMetrics');
+const downstreamMetricsBox = document.getElementById('downstreamMetrics');
 
 // --- Global State ---
 let localStream = null;
@@ -15,16 +17,35 @@ let iceServers = [];
 let currentUpstreamPC = null;
 let currentDownstreamPC = null;
 let downstreamId = null;
+let origVideoStream,
+  displayedVideoStream,
+  sentVideoStream,
+  origAudioStream,
+  displayedAudioStream,
+  sentAudioStream,
+  origVideoTrack,
+  origAudioTrack,
+  displayedVideoTrack,
+  displayedAudioTrack,
+  sentVideoTrack,
+  sentAudioTrack;
 
 // FADING connections
 let oldUpstreamPCs = [];
 let oldDownstreamPCs = [];
 
+// Debug metrics history for bitrate/fps deltas
+const metricsHistory = {
+  upstream: null,
+  downstream: null,
+};
+
 // --- 1. Initialization ---
 async function init() {
   try {
     const response = await fetch('/api/get-turn-credentials');
     const data = await response.json();
+    console.log('TURN data:', data);
     iceServers = data.iceServers;
   } catch (e) {
     iceServers = [{ urls: 'stun:stun.l.google.com:19302' }];
@@ -36,13 +57,13 @@ init();
 
 // Receive list of streams from server
 socket.on('stream_list_update', (streams) => {
-	streamListUl.innerHTML = "";
+  streamListUl.innerHTML = '';
   if (streams.length === 0) {
     streamListUl.innerHTML = "<li style='cursor:default; color:#777;'>No active streams. Start one!</li>";
     return;
   }
 
-	streams.forEach(name => {
+  streams.forEach((name) => {
     const li = document.createElement('li');
     li.innerText = `${name}`;
     li.onclick = () => joinStream(name);
@@ -55,12 +76,12 @@ async function startStream() {
   const fileInput = document.getElementById('videoFileInput');
   const file = fileInput.files[0];
 
-	if (!name) return alert("Please enter a name");
+  if (!name) return alert('Please enter a name');
 
   try {
     if (file) {
       // --- OPTION A: VIDEO FILE MODE ---
-			console.log("Starting stream from video file...");
+      console.log('Starting stream from video file...');
 
       // 1. Create a URL for the local file
       const fileURL = URL.createObjectURL(file);
@@ -78,20 +99,20 @@ async function startStream() {
       // (Chrome/Edge use captureStream, Firefox uses mozCaptureStream)
       if (localVideo.captureStream) {
         localStream = localVideo.captureStream();
-			} else if (localVideo.mozCaptureStream) {
-				localStream = localVideo.mozCaptureStream();
       } else {
-				return alert("Your browser does not support capturing video from files.");
+        return alert('Your browser does not support capturing video from files.');
       }
 
       // Note: captureStream() sometimes doesn't capture audio if the element is muted.
       // If you want to stream audio, you must hear it locally too.
-
     } else {
       // --- OPTION B: WEBCAM MODE ---
-			console.log("Starting stream from Webcam...");
+      console.log('Starting stream from Webcam...');
-			localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+      localStream = await navigator.mediaDevices.getUserMedia({
-			localVideo.srcObject = localStream;
+        video: { width: { ideal: 4096 } },
+        audio: true,
+      });
+      localVideo.srcObject = localStream.clone();
       localVideo.muted = true; // Mute local webcam to avoid feedback loop
     }
 
@@ -105,10 +126,9 @@ async function startStream() {
 
     socket.emit('start_stream', name);
     statusDiv.innerText = `Status: Broadcasting (Head) | ID: ${socket.id}`;
-
   } catch (err) {
     console.error(err);
-		alert("Failed to start stream: " + err.message);
+    alert('Failed to start stream: ' + err.message);
   }
 }
 
@@ -127,9 +147,9 @@ function leaveStream() {
   location.reload(); // Simple way to reset state and go back to lobby
 }
 
-
 // --- 3. Health Reporting (Unchanged) ---
 setInterval(calculateAndReportHealth, 5000);
+setInterval(pollPeerMetrics, 2000);
 
 async function calculateAndReportHealth() {
   if (localStream) {
@@ -144,7 +164,7 @@ async function calculateAndReportHealth() {
     let packetsReceived = 0;
     let jitter = 0;
 
-		stats.forEach(report => {
+    stats.forEach((report) => {
       if (report.type === 'inbound-rtp' && report.kind === 'video') {
         packetsLost = report.packetsLost || 0;
         packetsReceived = report.packetsReceived || 0;
@@ -156,12 +176,12 @@ async function calculateAndReportHealth() {
     if (totalPackets === 0) return;
 
     const lossRate = packetsLost / totalPackets;
-		const score = 100 - (lossRate * 100 * 5) - (jitter * 100);
+    const score = 100 - lossRate * 100 * 5 - jitter * 100;
     const finalScore = Math.max(0, Math.min(100, score));
     console.log(`Health: ${finalScore.toFixed(0)} | Loss: ${(lossRate * 100).toFixed(2)}%`);
 
     socket.emit('update_score', finalScore);
-	} catch (e) { }
+  } catch (e) {}
 }
 
 // --- 4. Socket Events (Logic Updated for Smart Disconnect) ---
@@ -177,7 +197,7 @@ socket.on('disconnect_downstream', () => {
     currentDownstreamPC = null;
     downstreamId = null;
   }
-	oldDownstreamPCs.forEach(pc => pc.close());
+  oldDownstreamPCs.forEach((pc) => pc.close());
   oldDownstreamPCs = [];
 });
 
@@ -190,10 +210,10 @@ socket.on('signal_msg', async ({ sender, type, sdp, candidate }) => {
     }
   } else if (type === 'candidate') {
     const ice = new RTCIceCandidate(candidate);
-		if (currentDownstreamPC && sender === downstreamId) currentDownstreamPC.addIceCandidate(ice).catch(e => { });
+    if (currentDownstreamPC && sender === downstreamId) currentDownstreamPC.addIceCandidate(ice).catch((e) => {});
-		if (currentUpstreamPC) currentUpstreamPC.addIceCandidate(ice).catch(e => { });
+    if (currentUpstreamPC) currentUpstreamPC.addIceCandidate(ice).catch((e) => {});
-		oldUpstreamPCs.forEach(pc => pc.addIceCandidate(ice).catch(e => { }));
+    oldUpstreamPCs.forEach((pc) => pc.addIceCandidate(ice).catch((e) => {}));
-		oldDownstreamPCs.forEach(pc => pc.addIceCandidate(ice).catch(e => { }));
+    oldDownstreamPCs.forEach((pc) => pc.addIceCandidate(ice).catch((e) => {}));
   }
 });
 
@@ -203,12 +223,12 @@ socket.on('error_msg', (msg) => {
 });
 
 socket.on('stream_ended', () => {
-	alert("Stream ended by host");
+  alert('Stream ended by host');
   location.reload();
 });
 
 socket.on('request_keyframe', () => {
-	console.log("Network requested keyframe");
+  console.log('Network requested keyframe');
   // If we were using Insertable streams, we'd need to handle this.
   // With Standard API, the browser handles PLI automatically.
 });
@@ -225,15 +245,42 @@ async function handleUpstreamOffer(senderId, sdp) {
     }
   }, 15000);
 
-	newPC.ontrack = (event) => {
+  newPC.ontrack = async (event) => {
+    console.log('Received track from upstream:', event);
     clearTimeout(safetyTimer); // Success!
 
-		remoteVideo.srcObject = event.streams[0];
+    if (event.track.kind === 'video') {
+      origVideoStream = event.streams[0];
+      displayedVideoStream = origVideoStream.clone();
+      sentVideoStream = origVideoStream.clone();
+
+      origVideoTrack = event.track;
+      displayedVideoTrack = origVideoTrack.clone();
+      sentVideoTrack = origVideoTrack.clone();
+    } else if (event.track.kind === 'audio') {
+      origAudioStream = event.streams[0];
+      displayedAudioStream = origAudioStream.clone();
+      sentAudioStream = origAudioStream.clone();
+
+      origAudioTrack = event.track;
+      displayedAudioTrack = origAudioTrack.clone();
+      sentAudioTrack = origAudioTrack.clone();
+    }
+
+    // Rebuild displayedStream
+    const displayedStream = new MediaStream();
+    if (displayedVideoTrack) displayedStream.addTrack(displayedVideoTrack);
+    if (displayedAudioTrack) displayedStream.addTrack(displayedAudioTrack);
+
+    remoteVideo.srcObject = displayedStream;
     statusDiv.innerText = `Status: Connected | ID: ${socket.id}`;
 
     if (currentDownstreamPC) {
-			const sender = currentDownstreamPC.getSenders().find(s => s.track && s.track.kind === event.track.kind);
+      console.log('Relaying new upstream stream to downstream');
-			if (sender) sender.replaceTrack(event.track);
+      const videoSender = currentDownstreamPC.getSenders().find((s) => s.track && s.track.kind === 'video');
+      const audioSender = currentDownstreamPC.getSenders().find((s) => s.track && s.track.kind === 'video');
+      if (videoSender) await videoSender.replaceTrack(sentVideoTrack);
+      if (audioSender) await audioSender.replaceTrack(sentAudioTrack);
     }
 
     // Smart Disconnect: Old connection dies immediately upon success
@@ -241,7 +288,7 @@ async function handleUpstreamOffer(senderId, sdp) {
       const oldPC = currentUpstreamPC;
       setTimeout(() => {
         oldPC.close();
-				oldUpstreamPCs = oldUpstreamPCs.filter(pc => pc !== oldPC);
+        oldUpstreamPCs = oldUpstreamPCs.filter((pc) => pc !== oldPC);
       }, 1000);
     }
     currentUpstreamPC = newPC;
@@ -263,17 +310,26 @@ async function setupDownstreamConnection(targetId) {
     oldDownstreamPCs.push(oldPC);
     setTimeout(() => {
       oldPC.close();
-			oldDownstreamPCs = oldDownstreamPCs.filter(pc => pc !== oldPC);
+      oldDownstreamPCs = oldDownstreamPCs.filter((pc) => pc !== oldPC);
     }, 5000);
   }
 
   currentDownstreamPC = new RTCPeerConnection({ iceServers });
 
   if (localStream) {
-		localStream.getTracks().forEach(track => currentDownstreamPC.addTrack(track, localStream));
+    console.log('Sending local stream tracks to downstream');
+    localStream.getTracks().forEach((track) => currentDownstreamPC.addTrack(track, localStream));
   } else if (currentUpstreamPC) {
-		currentUpstreamPC.getReceivers().forEach(receiver => {
+    console.log('Relaying upstream stream tracks to downstream');
-			if (receiver.track) currentDownstreamPC.addTrack(receiver.track, remoteVideo.srcObject);
+    // currentDownstreamPC.addTrack(sentVideoTrack, sentVideoStream);
+
+    currentUpstreamPC.getReceivers().map((receiver) => {
+      console.log('Receiver track:', receiver.track);
+      if (!receiver.track) return;
+
+      const sentTrack = receiver.track.kind === 'video' ? sentVideoTrack : sentAudioTrack;
+      const sentStream = receiver.track.kind === 'video' ? sentVideoStream : sentAudioStream;
+      currentDownstreamPC.addTrack(sentTrack, sentStream);
     });
   }
 
@@ -281,10 +337,261 @@ async function setupDownstreamConnection(targetId) {
     if (event.candidate) socket.emit('signal_msg', { target: targetId, type: 'candidate', candidate: event.candidate });
   };
 
+  await Promise.all(
+    currentDownstreamPC.getSenders().map(async (sender) => {
+      const params = sender.getParameters();
+      params.encodings = params.encodings.map((enc) => {
+        enc.maxBitrate = 200_000_000;
+        enc.maxFramerate = 60;
+        enc.scaleResolutionDownBy = 1.0;
+        enc.priority = 'high';
+        return enc;
+      });
+      params.degradationPreference = 'maintain-resolution';
+      await sender.setParameters(params);
+    })
+  );
+
   const offer = await currentDownstreamPC.createOffer();
-	offer.sdp = offer.sdp.replace(/b=AS:([0-9]+)/g, 'b=AS:4000');
+  // offer.sdp = offer.sdp.replace(/b=AS:([0-9]+)/g, 'b=AS:4000');
-	if (!offer.sdp.includes('b=AS:')) offer.sdp = offer.sdp.replace(/(m=video.*\r\n)/, '$1b=AS:4000\r\n');
+  // if (!offer.sdp.includes('b=AS:')) offer.sdp = offer.sdp.replace(/(m=video.*\r\n)/, '$1b=AS:4000\r\n');
 
   await currentDownstreamPC.setLocalDescription(offer);
   socket.emit('signal_msg', { target: targetId, type: 'offer', sdp: offer });
 }
+
+// --- 6. Debug Metrics (bitrate / loss / fps) ---
+
+async function pollPeerMetrics() {
+  try {
+    const upstreamResult = currentUpstreamPC
+      ? await collectInboundMetrics(currentUpstreamPC, metricsHistory.upstream)
+      : null;
+    const downstreamResult = currentDownstreamPC
+      ? await collectOutboundMetrics(currentDownstreamPC, metricsHistory.downstream)
+      : null;
+
+    metricsHistory.upstream = upstreamResult
+      ? upstreamResult.snapshot
+      : currentUpstreamPC
+      ? metricsHistory.upstream
+      : null;
+    metricsHistory.downstream = downstreamResult
+      ? downstreamResult.snapshot
+      : currentDownstreamPC
+      ? metricsHistory.downstream
+      : null;
+
+    renderMetrics(upstreamResult ? upstreamResult.display : null, downstreamResult ? downstreamResult.display : null);
+
+    // Stream metrics to the monitor dashboard
+    socket.emit('report_metrics', {
+      inbound: upstreamResult ? upstreamResult.display : null,
+      outbound: downstreamResult ? downstreamResult.display : null,
+    });
+  } catch (err) {
+    console.warn('Metrics poll failed', err);
+  }
+}
+
+async function collectInboundMetrics(pc, previous) {
+  const stats = await pc.getStats();
+  let inboundVideo = null;
+  let candidatePair = null;
+
+  const tag = pc.__metricsTag || (pc.__metricsTag = Math.random().toString(36).slice(2));
+  const prev = previous && previous.tag === tag ? previous : null;
+
+  stats.forEach((report) => {
+    if (report.type === 'inbound-rtp' && report.kind === 'video' && !report.isRemote) inboundVideo = report;
+    if (report.type === 'candidate-pair' && report.state === 'succeeded' && report.nominated) candidatePair = report;
+  });
+
+  if (!inboundVideo) return null;
+
+  const deltaMs = prev ? inboundVideo.timestamp - prev.timestamp : null;
+  const bytesDelta = prev ? inboundVideo.bytesReceived - prev.bytesReceived : null;
+  const bitrateKbps = deltaMs && deltaMs > 0 && bytesDelta >= 0 ? (bytesDelta * 8) / deltaMs : null; // timestamp is ms
+  const framesDelta =
+    prev && inboundVideo.framesDecoded !== undefined && prev.framesDecoded !== undefined
+      ? inboundVideo.framesDecoded - prev.framesDecoded
+      : null;
+  const fps = framesDelta !== null && deltaMs && deltaMs > 0 ? (framesDelta * 1000) / deltaMs : null;
+
+  const packetLossPct =
+    inboundVideo.packetsLost !== undefined && inboundVideo.packetsReceived !== undefined
+      ? (inboundVideo.packetsLost / (inboundVideo.packetsReceived + inboundVideo.packetsLost)) * 100
+      : null;
+  const jitterMs = inboundVideo.jitter !== undefined ? inboundVideo.jitter * 1000 : null;
+  const rttMs =
+    candidatePair && candidatePair.currentRoundTripTime !== undefined
+      ? candidatePair.currentRoundTripTime * 1000
+      : null;
+
+  const codecReport = inboundVideo.codecId && stats.get ? stats.get(inboundVideo.codecId) : null;
+  const codecLabel = codecReport ? codecReport.mimeType || codecReport.codecId || codecReport.sdpFmtpLine || '' : null;
+
+  return {
+    display: {
+      bitrateKbps,
+      fps,
+      resolution:
+        inboundVideo.frameWidth && inboundVideo.frameHeight
+          ? `${inboundVideo.frameWidth}x${inboundVideo.frameHeight}`
+          : null,
+      packetLossPct,
+      jitterMs,
+      rttMs,
+      pli: inboundVideo.pliCount,
+      nack: inboundVideo.nackCount,
+      fir: inboundVideo.firCount,
+      framesDropped: inboundVideo.framesDropped,
+      codec: codecLabel,
+      state: pc.iceConnectionState || pc.connectionState,
+    },
+    snapshot: {
+      timestamp: inboundVideo.timestamp,
+      bytesReceived: inboundVideo.bytesReceived || 0,
+      framesDecoded: inboundVideo.framesDecoded || 0,
+      tag,
+    },
+  };
+}
+
+async function collectOutboundMetrics(pc, previous) {
+  const stats = await pc.getStats();
+  let outboundVideo = null;
+  let remoteInbound = null;
+  let candidatePair = null;
+
+  const tag = pc.__metricsTag || (pc.__metricsTag = Math.random().toString(36).slice(2));
+  const prev = previous && previous.tag === tag ? previous : null;
+
+  stats.forEach((report) => {
+    if (report.type === 'outbound-rtp' && report.kind === 'video' && !report.isRemote) outboundVideo = report;
+    if (report.type === 'remote-inbound-rtp' && report.kind === 'video') remoteInbound = report;
+    if (report.type === 'candidate-pair' && report.state === 'succeeded' && report.nominated) candidatePair = report;
+  });
+
+  if (!outboundVideo) return null;
+
+  const deltaMs = prev ? outboundVideo.timestamp - prev.timestamp : null;
+  const bytesDelta = prev ? outboundVideo.bytesSent - prev.bytesSent : null;
+  const bitrateKbps = deltaMs && deltaMs > 0 && bytesDelta >= 0 ? (bytesDelta * 8) / deltaMs : null;
+  const framesDelta =
+    prev && outboundVideo.framesEncoded !== undefined && prev.framesEncoded !== undefined
+      ? outboundVideo.framesEncoded - prev.framesEncoded
+      : null;
+  const fps = framesDelta !== null && deltaMs && deltaMs > 0 ? (framesDelta * 1000) / deltaMs : null;
+
+  let packetLossPct = null;
+  if (remoteInbound && remoteInbound.packetsLost !== undefined && remoteInbound.packetsReceived !== undefined) {
+    packetLossPct = (remoteInbound.packetsLost / (remoteInbound.packetsReceived + remoteInbound.packetsLost)) * 100;
+  }
+
+  const rttMs =
+    candidatePair && candidatePair.currentRoundTripTime !== undefined
+      ? candidatePair.currentRoundTripTime * 1000
+      : null;
+  const codecReport = outboundVideo.codecId && stats.get ? stats.get(outboundVideo.codecId) : null;
+  const codecLabel = codecReport ? codecReport.mimeType || codecReport.codecId || codecReport.sdpFmtpLine || '' : null;
+
+  return {
+    display: {
+      bitrateKbps,
+      fps,
+      resolution:
+        outboundVideo.frameWidth && outboundVideo.frameHeight
+          ? `${outboundVideo.frameWidth}x${outboundVideo.frameHeight}`
+          : null,
+      packetLossPct,
+      rttMs,
+      qualityLimit: outboundVideo.qualityLimitationReason || 'none',
+      nack: outboundVideo.nackCount,
+      pli: outboundVideo.pliCount,
+      fir: outboundVideo.firCount,
+      retransmits: outboundVideo.retransmittedPacketsSent,
+      codec: codecLabel,
+      state: pc.iceConnectionState || pc.connectionState,
+    },
+    snapshot: {
+      timestamp: outboundVideo.timestamp,
+      bytesSent: outboundVideo.bytesSent || 0,
+      framesEncoded: outboundVideo.framesEncoded || 0,
+      tag,
+    },
+  };
+}
+
+function renderMetrics(inboundDisplay, outboundDisplay) {
+  if (!currentUpstreamPC) {
+    upstreamMetricsBox.innerHTML = 'No upstream peer (head broadcaster).';
+  } else if (!inboundDisplay) {
+    upstreamMetricsBox.innerHTML = 'Collecting inbound stats...';
+  } else {
+    upstreamMetricsBox.innerHTML = metricsLines([
+      ['State', inboundDisplay.state || '--'],
+      ['Bitrate', formatBitrate(inboundDisplay.bitrateKbps)],
+      ['FPS', formatNumber(inboundDisplay.fps)],
+      ['Resolution', inboundDisplay.resolution || '--'],
+      ['Loss', formatPercent(inboundDisplay.packetLossPct)],
+      ['Jitter', formatMillis(inboundDisplay.jitterMs)],
+      ['RTT', formatMillis(inboundDisplay.rttMs)],
+      ['PLI/NACK/FIR', formatTriple(inboundDisplay.pli, inboundDisplay.nack, inboundDisplay.fir)],
+      ['Frames Dropped', formatCount(inboundDisplay.framesDropped)],
+      ['Codec', inboundDisplay.codec || '--'],
+    ]);
+  }
+
+  if (!currentDownstreamPC) {
+    downstreamMetricsBox.innerHTML = 'No downstream peer connected.';
+  } else if (!outboundDisplay) {
+    downstreamMetricsBox.innerHTML = 'Collecting outbound stats...';
+  } else {
+    downstreamMetricsBox.innerHTML = metricsLines([
+      ['State', outboundDisplay.state || '--'],
+      ['Bitrate', formatBitrate(outboundDisplay.bitrateKbps)],
+      ['FPS', formatNumber(outboundDisplay.fps)],
+      ['Resolution', outboundDisplay.resolution || '--'],
+      ['Loss (remote)', formatPercent(outboundDisplay.packetLossPct)],
+      ['RTT', formatMillis(outboundDisplay.rttMs)],
+      ['Quality Limit', outboundDisplay.qualityLimit || '--'],
+      ['PLI/NACK/FIR', formatTriple(outboundDisplay.pli, outboundDisplay.nack, outboundDisplay.fir)],
+      ['Retransmits', formatCount(outboundDisplay.retransmits)],
+      ['Codec', outboundDisplay.codec || '--'],
+    ]);
+  }
+}
+
+function metricsLines(rows) {
+  return rows
+    .map(([label, value]) => `<div class="metrics-line"><span>${label}</span><span>${value}</span></div>`)
+    .join('');
+}
+
+function formatNumber(value, decimals = 1) {
+  return Number.isFinite(value) ? value.toFixed(decimals) : '--';
+}
+
+function formatBitrate(kbps) {
+  return Number.isFinite(kbps) ? `${kbps.toFixed(0)} kbps` : '--';
+}
+
+function formatPercent(value) {
+  return Number.isFinite(value) ? `${value.toFixed(1)}%` : '--';
+}
+
+function formatMillis(value) {
+  return Number.isFinite(value) ? `${value.toFixed(1)} ms` : '--';
+}
+
+function formatCount(value) {
+  return Number.isFinite(value) ? `${value}` : '--';
+}
+
+function formatTriple(a, b, c) {
+  const pa = Number.isFinite(a) ? a : '-';
+  const pb = Number.isFinite(b) ? b : '-';
+  const pc = Number.isFinite(c) ? c : '-';
+  return `${pa}/${pb}/${pc}`;
+}

public/index.html

@@ -1,9 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
-
+  <head>
-<head>
+    <meta charset="UTF-8" />
-	<meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Strandcast</title>
     <style>
       /* --- RESET & BASICS --- */
@@ -117,7 +116,7 @@
       }
 
       /* Inputs - 16px font prevents iOS zoom */
-		input[type="text"] {
+      input[type='text'] {
         width: 100%;
         padding: 12px;
         background: #000;
@@ -129,7 +128,7 @@
         font-size: 16px;
       }
 
-		input[type="file"] {
+      input[type='file'] {
         width: 100%;
         padding: 10px;
         background: #222;
@@ -179,7 +178,6 @@
         background: #000;
         border-radius: 8px;
         margin: 10px 0;
-			object-fit: cover;
       }
 
       #status {
@@ -194,6 +192,45 @@
         font-size: 14px;
       }
 
+      /* --- DEBUG METRICS --- */
+      #debug-metrics {
+        margin-top: 14px;
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+        gap: 12px;
+      }
+
+      .metrics-card {
+        background: #111;
+        border: 1px solid #222;
+        border-radius: 10px;
+        padding: 12px 14px;
+        text-align: left;
+        font-family: monospace;
+      }
+
+      .metrics-title {
+        color: #00d2ff;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        margin-bottom: 8px;
+      }
+
+      .metrics-line {
+        display: flex;
+        justify-content: space-between;
+        color: #ccc;
+        font-size: 12px;
+        margin: 4px 0;
+      }
+
+      .metrics-note {
+        color: #777;
+        font-size: 12px;
+      }
+
       /* --- MOBILE MEDIA QUERY --- */
       @media (max-width: 600px) {
         .navbar {
@@ -222,9 +259,9 @@
         }
       }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <nav class="navbar">
       <a href="/" class="brand">Strandcast</a>
       <div class="nav-links">
@@ -236,31 +273,46 @@
       <div id="lobby-view">
         <h1>Join a Broadcast</h1>
         <div class="card">
-				<h3 style="margin-bottom:15px; color:#aaa; font-size:12px; text-transform:uppercase; letter-spacing:1px;">Active Streams</h3>
+          <h3 style="margin-bottom: 15px; color: #aaa; font-size: 12px; text-transform: uppercase; letter-spacing: 1px">
+            Active Streams
+          </h3>
           <ul id="streamList">
-					<li style="color:#777; cursor:default; background:transparent; border:none; justify-content:center;">Searching...</li>
+            <li style="color: #777; cursor: default; background: transparent; border: none; justify-content: center">
+              Searching...
+            </li>
           </ul>
         </div>
         <div class="card">
-				<h3 style="margin-bottom:15px; color:#aaa; font-size:12px; text-transform:uppercase; letter-spacing:1px;">Go Live</h3>
+          <h3 style="margin-bottom: 15px; color: #aaa; font-size: 12px; text-transform: uppercase; letter-spacing: 1px">
-				<input type="text" id="streamNameInput" placeholder="Stream Name">
+            Go Live
-				<div style="text-align: left; margin-bottom: 8px;">
+          </h3>
-					<label style="color: #666; font-size: 11px; font-weight:bold;">SOURCE (OPTIONAL):</label>
+          <input type="text" id="streamNameInput" placeholder="Stream Name" />
+          <div style="text-align: left; margin-bottom: 8px">
+            <label style="color: #666; font-size: 11px; font-weight: bold">SOURCE (OPTIONAL):</label>
           </div>
-				<input type="file" id="videoFileInput" accept="video/*">
+          <input type="file" id="videoFileInput" accept="video/*" />
           <button onclick="startStream()">Start Broadcasting</button>
         </div>
       </div>
       <div id="stream-view">
-			<h2 id="currentStreamTitle" style="color:#fff; margin-bottom:10px; font-size: 18px;">Stream Name</h2>
+        <h2 id="currentStreamTitle" style="color: #fff; margin-bottom: 10px; font-size: 18px">Stream Name</h2>
         <video id="localVideo" autoplay muted playsinline></video>
         <video id="remoteVideo" autoplay playsinline></video>
         <div id="status">Status: Connecting...</div>
+        <div id="debug-metrics">
+          <div class="metrics-card">
+            <div class="metrics-title">Inbound (from upstream)</div>
+            <div id="upstreamMetrics" class="metrics-body metrics-note">Waiting for data...</div>
+          </div>
+          <div class="metrics-card">
+            <div class="metrics-title">Outbound (to downstream)</div>
+            <div id="downstreamMetrics" class="metrics-body metrics-note">Waiting for data...</div>
+          </div>
+        </div>
         <button onclick="leaveStream()" class="leave-btn">Leave Stream</button>
       </div>
     </div>
     <script src="/socket.io/socket.io.js"></script>
     <script src="client.js"></script>
-</body>
+  </body>
-
 </html>

public/monitor.html

@@ -1,9 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
-
+  <head>
-<head>
+    <meta charset="UTF-8" />
-	<meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Strandcast Monitor</title>
     <style>
       /* --- RESET & BASICS --- */
@@ -105,9 +104,44 @@
       }
 
       .chain-visual {
+        display: flex;
+        align-items: stretch;
+        gap: 14px;
+        flex-wrap: wrap;
+        width: 100%;
+      }
+
+      /* Node wrapper: arrow + card */
+      .node-wrapper {
+        display: flex;
+        align-items: stretch;
+        gap: 10px;
+        padding: 0;
+        min-width: 210px;
+        max-width: 240px;
+        background: transparent;
+        border: none;
+        box-shadow: none;
+      }
+
+      .node-row {
         display: flex;
         align-items: center;
-			width: max-content;
+        gap: 10px;
+        height: 100%;
+      }
+
+      .node-card {
+        display: grid;
+        grid-template-rows: auto 1fr;
+        gap: 8px;
+        background: #0f0f0f;
+        border: 1px solid #222;
+        border-radius: 10px;
+        padding: 10px;
+        flex: 1;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+        justify-items: center;
       }
 
       /* The Nodes */
@@ -116,14 +150,12 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-			width: 90px;
+        width: 86px;
-			height: 70px;
+        height: 64px;
         border-radius: 8px;
-			/* Softer corners */
         background: #222;
         border: 1px solid #444;
         position: relative;
-			margin: 0 4px;
         transition: all 0.2s;
       }
 
@@ -147,6 +179,46 @@
         letter-spacing: 0.5px;
       }
 
+      .node-metrics {
+        font-size: 11px;
+        color: #ccc;
+        line-height: 1.4;
+        background: #111;
+        border: 1px solid #222;
+        border-radius: 8px;
+        padding: 6px 8px;
+      }
+
+      .metrics-grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 12px;
+      }
+
+      .metric-row {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+      }
+
+      .metric-label {
+        color: #888;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .metric-value {
+        color: #e5e5e5;
+        font-size: 12px;
+        text-align: right;
+        font-variant-numeric: tabular-nums;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 2px;
+      }
+
       /* Health Colors */
       .healthy {
         border-color: #00ff88;
@@ -168,7 +240,7 @@
       .arrow {
         font-size: 16px;
         color: #555;
-			margin: 0 8px;
+        align-self: center;
       }
 
       /* --- MOBILE MEDIA QUERY --- */
@@ -195,9 +267,9 @@
         }
       }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <nav class="navbar">
       <a href="/" class="brand">Strandcast</a>
       <div class="nav-links">
@@ -206,9 +278,8 @@
       </div>
     </nav>
     <h1>Network Status</h1>
-	<div id="dashboard" style="text-align: center; color: #555;">Connecting...</div>
+    <div id="dashboard" style="text-align: center; color: #555">Connecting...</div>
     <script src="/socket.io/socket.io.js"></script>
     <script src="monitor.js"></script>
-</body>
+  </body>
-
 </html>

public/monitor.js

@@ -4,16 +4,16 @@ const dashboard = document.getElementById('dashboard');
 // Identify as a monitor
 socket.emit('join_monitor');
 
-socket.on('monitor_update', ({ streams, scores }) => {
+socket.on('monitor_update', ({ streams, scores, metrics }) => {
-	updateDashboard(streams, scores);
+  updateDashboard(streams, scores, metrics || {});
 });
 
-function updateDashboard(streams, scores) {
+function updateDashboard(streams, scores, metrics) {
   const activeStreamNames = Object.keys(streams);
 
   // 1. Remove streams that no longer exist
   const existingContainers = document.querySelectorAll('.stream-container');
-	existingContainers.forEach(container => {
+  existingContainers.forEach((container) => {
     const name = container.getAttribute('data-stream');
     if (!streams[name]) {
       container.remove();
@@ -23,7 +23,7 @@ function updateDashboard(streams, scores) {
   // 2. Add or Update streams
   if (activeStreamNames.length === 0) {
     // If empty, show message (only if not already showing it)
-		if (!dashboard.innerText.includes("No Active Streams")) {
+    if (!dashboard.innerText.includes('No Active Streams')) {
       dashboard.innerHTML = "<div style='text-align:center; color:#555; margin-top:50px;'>No Active Streams</div>";
     }
     return;
@@ -31,11 +31,11 @@ function updateDashboard(streams, scores) {
     // FIX: Check if we are still showing a text message (Connecting, No Active Streams, etc)
     // If we have streams but no stream containers yet, clear the text.
     if (!dashboard.querySelector('.stream-container')) {
-			dashboard.innerHTML = "";
+      dashboard.innerHTML = '';
     }
   }
 
-	activeStreamNames.forEach(name => {
+  activeStreamNames.forEach((name) => {
     let container = document.getElementById(`stream-${name}`);
     const chain = streams[name];
 
@@ -67,14 +67,14 @@ function updateDashboard(streams, scores) {
     titleEl.innerText = `Stream: ${name} (${chain.length} nodes)`;
 
     // Update Nodes
-		updateChainVisual(container.querySelector('.chain-visual'), chain, scores);
+    updateChainVisual(container.querySelector('.chain-visual'), chain, scores, metrics);
   });
 }
 
-function updateChainVisual(visualContainer, chain, scores) {
+function updateChainVisual(visualContainer, chain, scores, metrics) {
   const existingNodes = Array.from(visualContainer.querySelectorAll('.node-wrapper'));
   const nodeMap = {};
-	existingNodes.forEach(el => nodeMap[el.getAttribute('data-id')] = el);
+  existingNodes.forEach((el) => (nodeMap[el.getAttribute('data-id')] = el));
 
   const processedIds = new Set();
 
@@ -87,9 +87,10 @@ function updateChainVisual(visualContainer, chain, scores) {
     if (score < 50) healthClass = 'weak';
     if (index === 0) healthClass = 'healthy';
 
-		const role = index === 0 ? "SOURCE" : (index === chain.length - 1 ? "VIEWER" : "RELAY");
+    const role = index === 0 ? 'SOURCE' : index === chain.length - 1 ? 'VIEWER' : 'RELAY';
     const shortId = socketId.substring(0, 4);
 
+    const metric = metrics[socketId] || {};
     let nodeWrapper = nodeMap[socketId];
 
     // --- CREATE ---
@@ -97,16 +98,19 @@ function updateChainVisual(visualContainer, chain, scores) {
       nodeWrapper = document.createElement('div');
       nodeWrapper.className = 'node-wrapper';
       nodeWrapper.setAttribute('data-id', socketId);
-			nodeWrapper.style.display = 'flex';
-			nodeWrapper.style.alignItems = 'center';
 
       nodeWrapper.innerHTML = `
+        <div class="node-row">
           <div class="arrow">➔</div>
+          <div class="node-card">
             <div class="node">
               <div class="node-role"></div>
               <div class="node-id"></div>
               <div class="node-score"></div>
             </div>
+            <div class="node-metrics"></div>
+          </div>
+        </div>
       `;
 
       visualContainer.appendChild(nodeWrapper);
@@ -120,7 +124,7 @@ function updateChainVisual(visualContainer, chain, scores) {
 
     // 2. Arrow Visibility
     const arrow = nodeWrapper.querySelector('.arrow');
-		arrow.style.opacity = index === 0 ? "0" : "1";
+    arrow.style.opacity = index === 0 ? '0' : '1';
 
     // 3. Data
     const nodeEl = nodeWrapper.querySelector('.node');
@@ -129,13 +133,50 @@ function updateChainVisual(visualContainer, chain, scores) {
     nodeWrapper.querySelector('.node-role').innerText = role;
     nodeWrapper.querySelector('.node-id').innerText = shortId;
     nodeWrapper.querySelector('.node-score').innerText = score;
+
+    const metricsBox = nodeWrapper.querySelector('.node-metrics');
+    metricsBox.innerHTML = renderMetricsLines(metric.inbound, metric.outbound);
   });
 
   // --- REMOVE ---
-	existingNodes.forEach(el => {
+  existingNodes.forEach((el) => {
     const id = el.getAttribute('data-id');
     if (!processedIds.has(id)) {
       el.remove();
     }
   });
 }
+
+function renderMetricsLines(inbound, outbound) {
+  const rows = [];
+  rows.push(metricRow('Inbound', inbound ? formatMetricLines(inbound, true) : ['—']));
+  rows.push(metricRow('Outbound', outbound ? formatMetricLines(outbound, false) : ['—']));
+  return `<div class="metrics-grid">${rows.join('')}</div>`;
+}
+
+function metricRow(label, valueLines) {
+  const valueHtml = valueLines.map((v) => `<span>${v}</span>`).join('');
+  return `<div class="metric-row"><span class="metric-label">${label}</span><span class="metric-value">${valueHtml}</span></div>`;
+}
+
+function formatMetricLines(m, isInbound) {
+  const lines = [];
+  lines.push(fmtBitrate(m.bitrateKbps));
+  lines.push(`loss ${fmtPercent(m.packetLossPct)}`);
+  lines.push(`fps ${fmtNumber(m.fps)}`);
+  if (m.resolution) lines.push(m.resolution);
+  if (!isInbound && m.qualityLimit) lines.push(`limit ${m.qualityLimit}`);
+  return lines;
+}
+
+function fmtNumber(v) {
+  return Number.isFinite(v) ? v.toFixed(1) : '--';
+}
+
+function fmtBitrate(kbps) {
+  return Number.isFinite(kbps) ? `${kbps.toFixed(0)} kbps` : '--';
+}
+
+function fmtPercent(v) {
+  return Number.isFinite(v) ? `${v.toFixed(1)}%` : '--';
+}

server.js

@@ -1,7 +1,7 @@
 require('dotenv').config();
 const express = require('express');
 const http = require('http');
-const { Server } = require("socket.io");
+const { Server } = require('socket.io');
 const axios = require('axios');
 
 const app = express();
@@ -13,14 +13,15 @@ app.use(express.static('public'));
 // --- Cloudflare Credentials ---
 app.get('/api/get-turn-credentials', async (req, res) => {
   try {
-		const response = await axios.post(
+    // const response = await axios.post(
-			`https://rtc.live.cloudflare.com/v1/turn/keys/${process.env.CLOUDFLARE_APP_ID}/credentials/generate-ice-servers`,
+    // 	`https://rtc.live.cloudflare.com/v1/turn/keys/${process.env.CLOUDFLARE_APP_ID}/credentials/generate-ice-servers`,
-			{ ttl: 86400 },
+    // 	{ ttl: 86400 },
-			{ headers: { 'Authorization': `Bearer ${process.env.CLOUDFLARE_API_TOKEN}`, 'Content-Type': 'application/json' } }
+    // 	{ headers: { 'Authorization': `Bearer ${process.env.CLOUDFLARE_API_TOKEN}`, 'Content-Type': 'application/json' } }
-		);
+    // );
-		res.json(response.data);
+    const response = await fetch(`https://strandcast.benglsoftware.com/api/get-turn-credentials`);
+    res.json(await response.json());
   } catch (error) {
-		console.error("Cloudflare Error:", error.message);
+    console.error('Cloudflare Error:', error.message);
     res.json({ iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] });
   }
 });
@@ -30,6 +31,7 @@ app.get('/api/get-turn-credentials', async (req, res) => {
 const streams = {};
 const socketStreamMap = {}; // Helper: socketId -> StreamName (for fast lookups on disconnect)
 const scores = {}; // socketId -> Health Score (0-100)
+const metrics = {}; // socketId -> { inbound, outbound, ts }
 
 io.on('connection', (socket) => {
   console.log(`User connected: ${socket.id}`);
@@ -41,11 +43,11 @@ io.on('connection', (socket) => {
   // A. Start New Stream
   socket.on('start_stream', (streamName) => {
     if (streams[streamName]) {
-			socket.emit('error_msg', "Stream name already exists.");
+      socket.emit('error_msg', 'Stream name already exists.');
       return;
     }
     if (socketStreamMap[socket.id]) {
-			socket.emit('error_msg', "You are already in a stream.");
+      socket.emit('error_msg', 'You are already in a stream.');
       return;
     }
 
@@ -63,7 +65,7 @@ io.on('connection', (socket) => {
   socket.on('join_stream', (streamName) => {
     const chain = streams[streamName];
     if (!chain) {
-			socket.emit('error_msg', "Stream does not exist.");
+      socket.emit('error_msg', 'Stream does not exist.');
       return;
     }
 
@@ -94,6 +96,11 @@ io.on('connection', (socket) => {
     scores[socket.id] = score;
   });
 
+  // D2. Metrics Updates
+  socket.on('report_metrics', (payload) => {
+    metrics[socket.id] = { ...payload, ts: Date.now() };
+  });
+
   // E. Keyframe Relay
   socket.on('relay_keyframe_upstream', () => {
     const streamName = socketStreamMap[socket.id];
@@ -105,6 +112,7 @@ io.on('connection', (socket) => {
   // F. Disconnects (Healing)
   socket.on('disconnect', () => {
     delete scores[socket.id];
+    delete metrics[socket.id];
     const streamName = socketStreamMap[socket.id];
 
     if (!streamName) return; // User wasn't in a stream
@@ -121,7 +129,7 @@ io.on('connection', (socket) => {
     if (index === 0) {
       delete streams[streamName];
       // Notify everyone in this stream that it ended
-			chain.forEach(peerId => {
+      chain.forEach((peerId) => {
         if (peerId !== socket.id) io.to(peerId).emit('stream_ended');
         delete socketStreamMap[peerId];
       });
@@ -157,7 +165,7 @@ io.on('connection', (socket) => {
   socket.on('join_monitor', () => {
     socket.join('monitors');
     // Send immediate state
-		socket.emit('monitor_update', { streams, scores });
+    socket.emit('monitor_update', { streams, scores, metrics });
   });
 });
 
@@ -167,14 +175,14 @@ setInterval(() => {
   // Only emit if there is someone watching to save bandwidth
   const monitorRoom = io.sockets.adapter.rooms.get('monitors');
   if (monitorRoom && monitorRoom.size > 0) {
-		io.to('monitors').emit('monitor_update', { streams, scores });
+    io.to('monitors').emit('monitor_update', { streams, scores, metrics });
   }
 }, 1000);
 
 // --- THE MULTI-STREAM OPTIMIZER ---
 setInterval(() => {
   // Loop through EVERY active stream
-	Object.keys(streams).forEach(streamName => {
+  Object.keys(streams).forEach((streamName) => {
     const chain = streams[streamName];
 
     if (chain.length < 3) return;