feat: Add password-based authentication for broadcasters and restrict WebRTC offers to authenticated users.

public/app.js

@@ -4,6 +4,8 @@ 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;
 
@@ -18,6 +20,11 @@ const config = {
     ]
 };
 
+socket.on('authError', (msg) => {
+    alert(msg);
+    stopSharing();
+});
+
 socket.on('viewer', id => {
     if (!activeStream) return;
     
@@ -97,6 +104,12 @@ socket.on('disconnectPeer', 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: {
@@ -112,10 +125,11 @@ startBtn.addEventListener('click', async () => {
         localVideo.classList.add('active');
         
         startBtn.style.display = 'none';
+        authContainer.style.display = 'none';
         statusDot.classList.add('active');
         statusText.innerText = 'Sharing Screen (1080p60)';
 
-        socket.emit('broadcaster');
+        socket.emit('broadcaster', password);
 
         stream.getVideoTracks()[0].onended = () => {
             stopSharing();
@@ -130,6 +144,7 @@ startBtn.addEventListener('click', async () => {
 
 function stopSharing() {
     startBtn.style.display = 'inline-block';
+    authContainer.style.display = 'block';
     localVideo.classList.remove('active');
     statusDot.classList.remove('active');
     statusText.innerText = 'Not Sharing';

public/index.html

@@ -14,6 +14,9 @@
     <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>