naimi/yass
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add embed page

Browse Source
This commit is contained in:
Kibi Kelburton
2026-02-24 07:50:31 +01:00
parent 475d64c8ba
commit 5303cdaa2f
2 changed files with 56 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
public/embed.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screenshare - Embed</title>
<style>
body, html {
margin: 0;
padding: 0;
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<video id="remoteVideo" autoplay playsinline controls muted></video>
<script src="/socket.io/socket.io.js"></script>
<script src="mediasoup-client.js"></script>
<script src="viewer.js"></script>
</body>
</html>

40
public/viewer.js
View File

@@ -12,25 +12,29 @@ document.addEventListener('click', () => { hasUserInteracted = true; }, { once:
document.addEventListener('touchstart', () => { hasUserInteracted = true; }, { once: true }); document.addEventListener('touchstart', () => { hasUserInteracted = true; }, { once: true });
// Make overlay clickable to start playback on mobile // Make overlay clickable to start playback on mobile
overlay.addEventListener('click', () => { if (overlay) {
if (remoteVideo.srcObject) { overlay.addEventListener('click', () => {
remoteVideo.muted = false; if (remoteVideo.srcObject) {
remoteVideo.play().then(() => { remoteVideo.muted = false;
overlay.classList.add('hidden'); remoteVideo.play().then(() => {
remoteVideo.classList.add('active'); overlay.classList.add('hidden');
}).catch(e => console.error('Play failed:', e)); remoteVideo.classList.add('active');
} }).catch(e => console.error('Play failed:', e));
}); }
});
}
function tryPlay() { function tryPlay() {
remoteVideo.play().then(() => { remoteVideo.play().then(() => {
overlay.classList.add('hidden'); if (overlay) overlay.classList.add('hidden');
remoteVideo.classList.add('active'); remoteVideo.classList.add('active');
}).catch(() => { }).catch(() => {
// Autoplay blocked — show tap prompt // Autoplay blocked — show tap prompt
overlay.classList.remove('hidden'); if (overlay) {
overlay.querySelector('h1').innerText = 'Tap to Play'; overlay.classList.remove('hidden');
overlay.querySelector('.status-indicator span:last-child').innerText = 'Stream ready — tap anywhere'; 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) { if (Object.keys(consumers).length === 0) {
remoteVideo.classList.remove('active'); remoteVideo.classList.remove('active');
remoteVideo.srcObject = null; 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.classList.remove('active');
remoteVideo.srcObject = null; remoteVideo.srcObject = null;
overlay.classList.remove('hidden'); if (overlay) {
overlay.querySelector('h1').innerText = 'Offline'; overlay.classList.remove('hidden');
overlay.querySelector('.status-indicator span:last-child').innerText = 'Waiting for new stream...'; overlay.querySelector('h1').innerText = 'Offline';
overlay.querySelector('.status-indicator span:last-child').innerText = 'Waiting for new stream...';
}
}); });
// Initialize on connect // Initialize on connect