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';