diff --git a/public/embed.html b/public/embed.html new file mode 100644 index 0000000..34aa326 --- /dev/null +++ b/public/embed.html @@ -0,0 +1,33 @@ + + + + + + Screenshare - Embed + + + + + + + + + + diff --git a/public/viewer.js b/public/viewer.js index 8cf57c6..b2d8271 100644 --- a/public/viewer.js +++ b/public/viewer.js @@ -12,25 +12,29 @@ document.addEventListener('click', () => { hasUserInteracted = true; }, { once: document.addEventListener('touchstart', () => { hasUserInteracted = true; }, { once: true }); // Make overlay clickable to start playback on mobile -overlay.addEventListener('click', () => { - if (remoteVideo.srcObject) { - remoteVideo.muted = false; - remoteVideo.play().then(() => { - overlay.classList.add('hidden'); - remoteVideo.classList.add('active'); - }).catch(e => console.error('Play failed:', e)); - } -}); +if (overlay) { + overlay.addEventListener('click', () => { + if (remoteVideo.srcObject) { + remoteVideo.muted = false; + remoteVideo.play().then(() => { + overlay.classList.add('hidden'); + remoteVideo.classList.add('active'); + }).catch(e => console.error('Play failed:', e)); + } + }); +} function tryPlay() { remoteVideo.play().then(() => { - overlay.classList.add('hidden'); + if (overlay) overlay.classList.add('hidden'); remoteVideo.classList.add('active'); }).catch(() => { // Autoplay blocked — show tap prompt - overlay.classList.remove('hidden'); - overlay.querySelector('h1').innerText = 'Tap to Play'; - overlay.querySelector('.status-indicator span:last-child').innerText = 'Stream ready — tap anywhere'; + if (overlay) { + overlay.classList.remove('hidden'); + overlay.querySelector('h1').innerText = 'Tap to Play'; + overlay.querySelector('.status-indicator span:last-child').innerText = 'Stream ready — tap anywhere'; + } }); } @@ -171,7 +175,7 @@ socket.on('producerClosed', ({ consumerId }) => { if (Object.keys(consumers).length === 0) { remoteVideo.classList.remove('active'); remoteVideo.srcObject = null; - overlay.classList.remove('hidden'); + if (overlay) overlay.classList.remove('hidden'); } }); @@ -201,9 +205,11 @@ socket.on('broadcasterDisconnected', () => { remoteVideo.classList.remove('active'); remoteVideo.srcObject = null; - overlay.classList.remove('hidden'); - overlay.querySelector('h1').innerText = 'Offline'; - overlay.querySelector('.status-indicator span:last-child').innerText = 'Waiting for new stream...'; + if (overlay) { + overlay.classList.remove('hidden'); + overlay.querySelector('h1').innerText = 'Offline'; + overlay.querySelector('.status-indicator span:last-child').innerText = 'Waiting for new stream...'; + } }); // Initialize on connect