feat: improve WebRTC synchronization and add experimental debug console to player

Datanoise · Datanoise · commit 9cbe9575119c · 2026-02-20T16:58:54.000+01:00
diff --git a/relay/webrtc.go b/relay/webrtc.go
@@ -5,6 +5,7 @@ import (
 	"errors"
 	"fmt"
 	"io"
+	"strings"
 	"sync"
 	"time"
 
@@ -38,6 +39,12 @@ func (wm *WebRTCManager) HandleOffer(mount string, offer webrtc.SessionDescripti
 		return nil, fmt.Errorf("stream not found")
 	}
 
+	// WebRTC requires Opus (usually in Ogg container for us)
+	ct := strings.ToLower(stream.ContentType)
+	if !strings.Contains(ct, "ogg") && !strings.Contains(ct, "opus") {
+		return nil, fmt.Errorf("WebRTC requires Opus stream (got %s)", stream.ContentType)
+	}
+
 	peerConnection, err := wm.api.NewPeerConnection(webrtc.Configuration{
 		ICEServers: []webrtc.ICEServer{
 			{URLs: []string{"stun:stun.l.google.com:19302"}},
@@ -98,7 +105,8 @@ func (wm *WebRTCManager) streamToTrack(pc *webrtc.PeerConnection, track *webrtc.
 	// Seek to next "OggS" magic
 	syncBuf := make([]byte, 16384)
 	foundSync := false
-	for !foundSync {
+	var searched int64 = 0
+	for !foundSync && searched < 512*1024 { // Safeguard: stop after 512KB
 		select {
 		case <-ctx.Done():
 			return
@@ -107,7 +115,7 @@ func (wm *WebRTCManager) streamToTrack(pc *webrtc.PeerConnection, track *webrtc.
 			if n == 0 {
 				continue
 			}
-			for i := 0; i < n-4; i++ {
+			for i := 0; i <= n-4; i++ {
 				if syncBuf[i] == 'O' && syncBuf[i+1] == 'g' && syncBuf[i+2] == 'g' && syncBuf[i+3] == 'S' {
 					offset += int64(i)
 					foundSync = true
@@ -116,10 +124,16 @@ func (wm *WebRTCManager) streamToTrack(pc *webrtc.PeerConnection, track *webrtc.
 			}
 			if !foundSync {
 				offset = next
+				searched += int64(n)
 			}
 		}
 	}
 
+	if !foundSync {
+		logrus.Errorf("WebRTC: Could not find Ogg sync in first 512KB for %s. Is it an Opus stream?", stream.MountName)
+		return
+	}
+
 	reader := &StreamReader{
 		Stream: stream,
 		Offset: offset,
diff --git a/server/templates/webrtc_player.html b/server/templates/webrtc_player.html
@@ -44,6 +44,14 @@
         .visualizer { width: 100%; height: 100px; margin-top: 2rem; opacity: 0.5; }
         
         #connection-state { font-size: 0.8rem; color: var(--secondary); margin-top: 1rem; text-transform: uppercase; letter-spacing: 0.1em; }
+
+        .debug-panel {
+            margin-top: 3rem; padding: 1.5rem; background: rgba(0,0,0,0.3); border-radius: 20px;
+            text-align: left; font-family: monospace; font-size: 0.75rem; color: #10b981;
+            max-height: 200px; overflow-y: auto; border: 1px solid var(--border);
+        }
+        .debug-panel div { margin-bottom: 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.25rem; }
+        .debug-label { color: var(--secondary); font-weight: bold; }
     </style>
 </head>
 <body>
@@ -58,54 +66,101 @@ <h1>{{.Stream.Name}}</h1>
 
         <div id="connection-state">Ready</div>
         <canvas id="viz" class="visualizer"></canvas>
+
+        <div class="debug-panel" id="debug-log">
+            <div><span class="debug-label">[SYSTEM]</span> Debug console initialized.</div>
+        </div>
     </div>
 
     <script>
         lucide.createIcons();
         let pc;
         const mount = "{{.Stream.MountName}}";
 
+        function log(label, msg) {
+            const el = document.getElementById('debug-log');
+            const div = document.createElement('div');
+            div.innerHTML = `<span class="debug-label">[${label}]</span> ${msg}`;
+            el.prepend(div);
+        }
+
         async function startWebRTC() {
             const btn = document.getElementById('start-btn');
             const stateEl = document.getElementById('connection-state');
             
             btn.disabled = true;
             stateEl.textContent = "Connecting...";
+            log('CORE', 'Starting RTCPeerConnection...');
 
             pc = new RTCPeerConnection({
                 iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
             });
 
+            pc.onicecandidate = (e) => {
+                if (e.candidate) log('ICE', `Found candidate: ${e.candidate.protocol} ${e.candidate.address}`);
+            };
+
+            pc.onicegatheringstatechange = () => log('ICE', `Gathering State: ${pc.iceGatheringState}`);
+            pc.oniceconnectionstatechange = () => log('ICE', `Conn State: ${pc.iceConnectionState}`);
+            pc.onsignalingstatechange = () => log('SIG', `Signaling State: ${pc.signalingState}`);
+
             pc.ontrack = (event) => {
+                log('CORE', 'Audio track received!');
                 const stream = event.streams[0];
-                const audio = new Audio();
+                let audio = document.getElementById('webrtc-audio');
+                if (!audio) {
+                    audio = document.createElement('audio');
+                    audio.id = 'webrtc-audio';
+                    audio.style.display = 'none';
+                    document.body.appendChild(audio);
+                }
                 audio.srcObject = stream;
-                audio.play();
+                audio.play().then(() => log('CORE', 'Playback started successfully')).catch(e => log('ERROR', `Playback failed: ${e.message}`));
                 initVisualizer(stream);
             };
 
             pc.onconnectionstatechange = () => {
                 stateEl.textContent = pc.connectionState;
+                log('CORE', `Connection State: ${pc.connectionState}`);
                 if (pc.connectionState === 'connected') {
                     btn.innerHTML = '<i data-lucide="volume-2"></i>';
                     lucide.createIcons();
                 }
+                if (pc.connectionState === 'failed') {
+                    stateEl.textContent = "Connection Failed";
+                    btn.disabled = false;
+                    btn.innerHTML = '<i data-lucide="refresh-cw"></i>';
+                    lucide.createIcons();
+                }
             };
 
             // Add receiver for audio
             pc.addTransceiver('audio', { direction: 'recvonly' });
+            log('SIG', 'Added recvonly audio transceiver');
 
             const offer = await pc.createOffer();
+            log('SIG', 'SDP Offer created');
             await pc.setLocalDescription(offer);
 
+            log('HTTP', `Sending offer to server for mount ${mount}...`);
             const response = await fetch(`/webrtc/offer?mount=${encodeURIComponent(mount)}`, {
                 method: 'POST',
                 body: JSON.stringify(pc.localDescription),
                 headers: { 'Content-Type': 'application/json' }
             });
 
+            if (!response.ok) {
+                const err = await response.text();
+                stateEl.textContent = "Error: " + err;
+                log('ERROR', `Signaling failed: ${err}`);
+                btn.disabled = false;
+                return;
+            }
+
             const answer = await response.json();
+            log('SIG', 'SDP Answer received from server');
             await pc.setRemoteDescription(answer);
+            log('CORE', 'Remote description set, awaiting ICE...');
         }
 
         function initVisualizer(stream) {
