diff --git a/public/app.js b/public/app.js index 13baca4..f9f1e91 100644 --- a/public/app.js +++ b/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'; diff --git a/public/index.html b/public/index.html index 86e2e3d..c273323 100644 --- a/public/index.html +++ b/public/index.html @@ -14,6 +14,9 @@
Broadcast your screen at 1080p 60fps to viewers.
+