refactor: Migrate screen sharing media handling from direct WebRTC to Mediasoup.

public/app.js

@@ -1,153 +0,0 @@
-const socket = io();
-const peerConnections = {};
-const startBtn = document.getElementById('startBtn');
-const localVideo = document.getElementById('localVideo');
-const statusDot = document.getElementById('statusDot');
-const statusText = document.getElementById('statusText');
-const passwordInput = document.getElementById('broadcasterPassword');
-const authContainer = document.getElementById('authContainer');
-
-let activeStream;
-
-const config = {
-    iceServers: [
-        { urls: "stun:localhost:3478" },
-        {
-            urls: "turn:localhost:3478",
-            username: "myuser",
-            credential: "mypassword"
-        }
-    ]
-};
-
-socket.on('authError', (msg) => {
-    alert(msg);
-    stopSharing();
-});
-
-socket.on('viewer', id => {
-    if (!activeStream) return;
-    
-    const peerConnection = new RTCPeerConnection(config);
-    peerConnections[id] = peerConnection;
-
-    activeStream.getTracks().forEach(track => {
-        const sender = peerConnection.addTrack(track, activeStream);
-        
-        // Force high bitrate for best possible 1080p60 quality
-        if (track.kind === 'video') {
-            const params = sender.getParameters();
-            if (!params.encodings) params.encodings = [{}];
-            
-            // Set max bandwidth to 10 Mbps (10,000,000 bps)
-            params.encodings[0].maxBitrate = 10000000; 
-            
-            sender.setParameters(params).catch(e => console.error("Could not set high bitrate:", e));
-        }
-    });
-
-    peerConnection.onicecandidate = event => {
-        if (event.candidate) {
-            socket.emit('candidate', id, event.candidate);
-        }
-    };
-
-    peerConnection
-        .createOffer()
-        .then(sdp => {
-            // Force VP8/H264 on the SDP offer to maximize compatibility with Chromium
-            if (window.RTCRtpSender && window.RTCRtpSender.getCapabilities) {
-                const capabilities = window.RTCRtpSender.getCapabilities('video');
-                if (capabilities && capabilities.codecs) {
-                    const preferredCodecs = capabilities.codecs.filter(c => 
-                        c.mimeType.toLowerCase() === 'video/vp8' || 
-                        c.mimeType.toLowerCase() === 'video/h264'
-                    );
-                    if (preferredCodecs.length > 0) {
-                        const transceivers = peerConnection.getTransceivers();
-                        transceivers.forEach(transceiver => {
-                            if (transceiver.receiver.track.kind === 'video') {
-                                try {
-                                    transceiver.setCodecPreferences(preferredCodecs);
-                                } catch (e) {
-                                    console.warn('Failed to set codec preferences:', e);
-                                }
-                            }
-                        });
-                    }
-                }
-            }
-            return peerConnection.setLocalDescription(sdp);
-        })
-        .then(() => {
-            socket.emit('offer', id, peerConnection.localDescription);
-        });
-});
-
-socket.on('answer', (id, description) => {
-    if (peerConnections[id]) {
-        peerConnections[id].setRemoteDescription(description);
-    }
-});
-
-socket.on('candidate', (id, candidate) => {
-    if (peerConnections[id]) {
-        peerConnections[id].addIceCandidate(new RTCIceCandidate(candidate));
-    }
-});
-
-socket.on('disconnectPeer', id => {
-    if (peerConnections[id]) {
-        peerConnections[id].close();
-        delete peerConnections[id];
-    }
-});
-
-startBtn.addEventListener('click', async () => {
-    const password = passwordInput.value;
-    if (!password) {
-        alert("Please enter the stream password to broadcast.");
-        return;
-    }
-
-    try {
-        const stream = await navigator.mediaDevices.getDisplayMedia({
-            video: {
-                width: { ideal: 1920 },
-                height: { ideal: 1080 },
-                frameRate: { ideal: 60 }
-            },
-            audio: false 
-        });
-
-        activeStream = stream;
-        localVideo.srcObject = stream;
-        localVideo.classList.add('active');
-        
-        startBtn.style.display = 'none';
-        authContainer.style.display = 'none';
-        statusDot.classList.add('active');
-        statusText.innerText = 'Sharing Screen (1080p60)';
-
-        socket.emit('broadcaster', password);
-
-        stream.getVideoTracks()[0].onended = () => {
-            stopSharing();
-        };
-
-    } catch (err) {
-        console.error("Error accessing display media.", err);
-        statusText.innerText = 'Failed to access screen';
-        statusDot.style.backgroundColor = 'var(--error-color)';
-    }
-});
-
-function stopSharing() {
-    startBtn.style.display = 'inline-block';
-    authContainer.style.display = 'block';
-    localVideo.classList.remove('active');
-    statusDot.classList.remove('active');
-    statusText.innerText = 'Not Sharing';
-    activeStream = null;
-    socket.emit('disconnect'); 
-}

public/index.html

@@ -1,38 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Screenshare - Broadcaster</title>
-    <link rel="stylesheet" href="style.css" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div class="container glass">
-      <h1>Share Your Screen</h1>
-      <p>Broadcast your screen at 1080p 60fps to viewers.</p>
-      <div id="authContainer" style="margin-bottom: 1.5rem;">
-        <input type="password" id="broadcasterPassword" placeholder="Enter stream password" style="padding: 0.8rem 1rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(0,0,0,0.2); color: white; width: 100%; max-width: 300px; font-family: inherit; font-size: 1rem; outline: none;">
-      </div>
-      <button id="startBtn" class="btn primary-btn">Start Screenshare</button>
-      <div class="status-indicator">
-        <span class="dot" id="statusDot"></span>
-        <span id="statusText">Not Sharing</span>
-      </div>
-      <video id="localVideo" autoplay playsinline muted></video>
-      <div class="info-section">
-        <p>
-          Viewers can watch at:
-          <a href="/viewer.html" target="_blank" class="accent-link"
-            >/viewer.html</a
-          >
-        </p>
-      </div>
-    </div>
-    <script src="/socket.io/socket.io.js"></script>
-    <script src="app.js"></script>
-  </body>
-</html>

public/mediasoup-entry.js

@@ -0,0 +1,4 @@
+// Entry point for esbuild browser bundle
+// This gets bundled into mediasoup-client.js as a global `mediasoupClient`
+const mediasoupClient = require('mediasoup-client');
+module.exports = mediasoupClient;

public/viewer.html

@@ -17,9 +17,10 @@
             </div>
             <p style="margin-top:20px; font-size: 0.9rem; color: var(--text-secondary);">Click anywhere to enable audio once connected</p>
         </div>
-        <video id="remoteVideo" autoplay playsinline controls></video>
+        <video id="remoteVideo" autoplay playsinline controls muted></video>
     </div>
     <script src="/socket.io/socket.io.js"></script>
+    <script src="mediasoup-client.js"></script>
     <script src="viewer.js"></script>
 </body>
 </html>

public/viewer.js

@@ -2,137 +2,196 @@ const socket = io();
 const remoteVideo = document.getElementById('remoteVideo');
 const overlay = document.getElementById('overlay');
 
-let peerConnection;
-let broadcasterPeerId = null; // Track who the broadcaster is
+let device;
+let recvTransport;
+let consumers = {}; // consumerId -> consumer
 
-// Fetch TURN credentials dynamically from the server
-const turnHost = window.location.hostname;
-let config = {
-    iceServers: [
-        { urls: `stun:${turnHost}:3478` }
-    ],
-    iceCandidatePoolSize: 5
-};
+async function init() {
+    try {
+        // 1. Get router RTP capabilities
+        const rtpCapabilities = await new Promise((resolve, reject) => {
+            socket.emit('getRouterRtpCapabilities', (data) => {
+                if (data.error) reject(new Error(data.error));
+                else resolve(data);
+            });
+        });
 
-// Load TURN credentials before any connections
-fetch('/turn-config')
-    .then(r => r.json())
-    .then(turn => {
-        config = {
-            iceServers: [
-                { urls: `stun:${turnHost}:3478` },
-                { urls: `turn:${turnHost}:3478`, username: turn.username, credential: turn.credential }
-            ],
-            iceCandidatePoolSize: 5
-        };
-    })
-    .catch(e => console.error('Failed to load TURN config:', e));
+        // 2. Create mediasoup Device and load capabilities
+        device = new mediasoupClient.Device();
+        await device.load({ routerRtpCapabilities: rtpCapabilities });
 
-socket.on('offer', (id, description) => {
-    // Track the broadcaster's socket ID so we only react to THEIR disconnect
-    broadcasterPeerId = id;
-    
-    // Close any existing connection before creating a new one
-    if (peerConnection) {
-        peerConnection.close();
-        peerConnection = null;
+        // 3. Create recv transport
+        const transportParams = await new Promise((resolve, reject) => {
+            socket.emit('createWebRtcTransport', { direction: 'recv' }, (data) => {
+                if (data.error) reject(new Error(data.error));
+                else resolve(data);
+            });
+        });
+
+        recvTransport = device.createRecvTransport(transportParams);
+
+        // Transport 'connect' event: DTLS handshake
+        recvTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
+            try {
+                await new Promise((resolve, reject) => {
+                    socket.emit('connectTransport', {
+                        transportId: recvTransport.id,
+                        dtlsParameters
+                    }, (result) => {
+                        if (result && result.error) reject(new Error(result.error));
+                        else resolve();
+                    });
+                });
+                callback();
+            } catch (e) {
+                errback(e);
+            }
+        });
+
+        // 4. Get existing producers and consume them
+        const existingProducers = await new Promise((resolve, reject) => {
+            socket.emit('getProducers', (data) => {
+                if (data.error) reject(new Error(data.error));
+                else resolve(data);
+            });
+        });
+
+        for (const { producerId, kind } of existingProducers) {
+            await consumeProducer(producerId, kind);
+        }
+
+    } catch (e) {
+        console.error('Failed to initialize mediasoup viewer:', e);
     }
-    peerConnection = new RTCPeerConnection(config);
-    
-    peerConnection.ontrack = event => {
-        remoteVideo.srcObject = event.streams[0];
+}
+
+async function consumeProducer(producerId, kind) {
+    try {
+        const result = await new Promise((resolve, reject) => {
+            socket.emit('consume', {
+                transportId: recvTransport.id,
+                producerId,
+                rtpCapabilities: device.rtpCapabilities
+            }, (data) => {
+                if (data.error) reject(new Error(data.error));
+                else resolve(data);
+            });
+        });
+
+        const consumer = await recvTransport.consume({
+            id: result.id,
+            producerId: result.producerId,
+            kind: result.kind,
+            rtpParameters: result.rtpParameters
+        });
+
+        consumers[consumer.id] = consumer;
+
+        // Attach track to the video element
+        const { track } = consumer;
+        
+        if (!remoteVideo.srcObject) {
+            remoteVideo.srcObject = new MediaStream();
+        }
+        remoteVideo.srcObject.addTrack(track);
+        
         remoteVideo.classList.add('active');
         overlay.classList.add('hidden');
-    };
 
-    // Auto-unmute when the user interacts with the document to bypass browser autoplay restrictions
-    document.addEventListener('click', () => {
-        remoteVideo.muted = false;
-        remoteVideo.volume = 1.0; 
-    }, {once: true});
-
-    // Monitor ICE connection state for stability
-    peerConnection.oniceconnectionstatechange = () => {
-        console.log('ICE state:', peerConnection.iceConnectionState);
-        if (peerConnection.iceConnectionState === 'failed') {
-            console.log('ICE failed, attempting restart...');
-            peerConnection.restartIce();
-        } else if (peerConnection.iceConnectionState === 'disconnected') {
-            setTimeout(() => {
-                if (peerConnection && peerConnection.iceConnectionState === 'disconnected') {
-                    console.log('ICE still disconnected, attempting restart...');
-                    peerConnection.restartIce();
-                }
-            }, 3000);
-        }
-    };
-
-    peerConnection.onicecandidate = event => {
-        if (event.candidate) {
-            socket.emit('candidate', id, event.candidate);
-        }
-    };
-
-    peerConnection
-        .setRemoteDescription(description)
-        .then(() => peerConnection.createAnswer())
-        .then(sdp => {
-            let sdpLines = sdp.sdp.split('\r\n');
-            let opusPayloadType = null;
-            for (let i = 0; i < sdpLines.length; i++) {
-                if (sdpLines[i].includes('a=rtpmap:') && sdpLines[i].includes('opus/48000/2')) {
-                    const match = sdpLines[i].match(/a=rtpmap:(\d+) /);
-                    if (match) opusPayloadType = match[1];
-                }
-            }
-            if (opusPayloadType) {
-                let fmtpFound = false;
-                for (let i = 0; i < sdpLines.length; i++) {
-                    if (sdpLines[i].startsWith(`a=fmtp:${opusPayloadType}`)) {
-                        sdpLines[i] = `a=fmtp:${opusPayloadType} minptime=10;useinbandfec=1;maxplaybackrate=48000;stereo=1;sprop-stereo=1;maxaveragebitrate=510000;cbr=1`;
-                        fmtpFound = true;
-                    }
-                }
-                if (!fmtpFound) {
-                    sdpLines.push(`a=fmtp:${opusPayloadType} minptime=10;useinbandfec=1;maxplaybackrate=48000;stereo=1;sprop-stereo=1;maxaveragebitrate=510000;cbr=1`);
-                }
-            }
-            sdp.sdp = sdpLines.join('\r\n');
-            return peerConnection.setLocalDescription(sdp);
-        })
-        .then(() => {
-            socket.emit('answer', id, peerConnection.localDescription);
+        // Resume the consumer (server starts them paused)
+        await new Promise((resolve, reject) => {
+            socket.emit('resumeConsumer', { consumerId: consumer.id }, (result) => {
+                if (result && result.error) reject(new Error(result.error));
+                else resolve();
+            });
         });
-});
 
-socket.on('candidate', (id, candidate) => {
-    if (peerConnection) {
-        peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
-            .catch(e => console.error(e));
+        consumer.on('trackended', () => {
+            console.log(`Track ended for consumer ${consumer.id}`);
+        });
+
+        consumer.on('transportclose', () => {
+            console.log(`Transport closed for consumer ${consumer.id}`);
+        });
+
+    } catch (e) {
+        console.error('Failed to consume producer:', e);
+    }
+}
+
+// Listen for new producers (e.g. broadcaster adds audio after starting)
+socket.on('newProducer', async ({ producerId, kind }) => {
+    if (recvTransport) {
+        await consumeProducer(producerId, kind);
     }
 });
 
-socket.on('broadcaster', () => {
-    socket.emit('viewer');
+// Handle producer closed (broadcaster stopped a track)
+socket.on('producerClosed', ({ consumerId }) => {
+    const consumer = consumers[consumerId];
+    if (consumer) {
+        // Remove the track from the video element
+        if (remoteVideo.srcObject) {
+            const track = consumer.track;
+            if (track) {
+                remoteVideo.srcObject.removeTrack(track);
+            }
+        }
+        consumer.close();
+        delete consumers[consumerId];
+    }
+
+    // If no more consumers, show overlay
+    if (Object.keys(consumers).length === 0) {
+        remoteVideo.classList.remove('active');
+        remoteVideo.srcObject = null;
+        overlay.classList.remove('hidden');
+    }
 });
 
-// CRITICAL: Only react to the BROADCASTER's disconnect, not other viewers
-socket.on('disconnectPeer', (id) => {
-    if (id !== broadcasterPeerId) return; // Ignore other viewers disconnecting
-    
-    if (peerConnection) {
-        peerConnection.close();
-        peerConnection = null;
+// Broadcaster connected - try to initialize
+socket.on('broadcasterConnected', () => {
+    // Re-init to pick up new producers
+    if (!device) {
+        init();
+    } else {
+        // Just fetch new producers
+        socket.emit('getProducers', async (producers) => {
+            for (const { producerId, kind } of producers) {
+                // Check if we're already consuming this producer
+                const alreadyConsuming = Object.values(consumers).some(c => c.producerId === producerId);
+                if (!alreadyConsuming) {
+                    await consumeProducer(producerId, kind);
+                }
+            }
+        });
     }
-    broadcasterPeerId = null;
+});
+
+// Broadcaster disconnected
+socket.on('broadcasterDisconnected', () => {
+    // Close all consumers
+    Object.values(consumers).forEach(consumer => {
+        consumer.close();
+    });
+    consumers = {};
+
     remoteVideo.classList.remove('active');
     remoteVideo.srcObject = null;
-    
+
     overlay.classList.remove('hidden');
     overlay.querySelector('h1').innerText = 'Stream Ended';
     overlay.querySelector('.status-indicator span:last-child').innerText = 'Waiting for new stream...';
 });
 
+// Auto-unmute when the user interacts with the document
+document.addEventListener('click', () => {
+    remoteVideo.muted = false;
+    remoteVideo.volume = 1.0;
+}, { once: true });
+
+// Initialize on connect
 socket.on('connect', () => {
     socket.emit('viewer');
+    init();
 });