Spaces:

marksverdhei
/

obs-stream

Sleeping

App Files Files Community

marksverdhei commited on Mar 19

Commit

6e20182

verified ·

1 Parent(s): 604fcb2

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

web/index.html +13 -114

web/index.html CHANGED Viewed

@@ -6,105 +6,25 @@
     <title>Live Stream</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body {
-            background: #0a0a0a;
-            color: #fff;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-        }
-        .container {
-            width: 100%;
-            max-width: 1280px;
-            padding: 20px;
-        }
-        .video-wrapper {
-            position: relative;
-            width: 100%;
-            background: #111;
-            border-radius: 8px;
-            overflow: hidden;
-            aspect-ratio: 16/9;
-        }
         video {
-            width: 100%;
-            height: 100%;
             object-fit: contain;
             background: #000;
         }
-        .overlay {
-            position: absolute;
-            top: 0; left: 0; right: 0; bottom: 0;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            background: rgba(0,0,0,0.7);
-            cursor: pointer;
-            transition: opacity 0.3s;
-        }
-        .overlay.hidden { opacity: 0; pointer-events: none; }
-        .overlay .status {
-            font-size: 1.2rem;
-            color: #aaa;
-            margin-top: 12px;
-        }
-        .play-btn {
-            width: 72px; height: 72px;
-            border-radius: 50%;
-            background: rgba(255,255,255,0.15);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border: 2px solid rgba(255,255,255,0.3);
-        }
-        .play-btn svg { fill: #fff; width: 32px; height: 32px; margin-left: 4px; }
-        .live-badge {
-            position: absolute;
-            top: 12px;
-            left: 12px;
-            background: #e53e3e;
-            color: #fff;
-            padding: 4px 10px;
-            border-radius: 4px;
-            font-size: 0.75rem;
-            font-weight: 700;
-            letter-spacing: 0.05em;
-            display: none;
-        }
-        .live-badge.active { display: block; }
     </style>
 </head>
 <body>
-    <div class="container">
-        <div class="video-wrapper">
-            <video id="video" autoplay muted playsinline></video>
-            <div class="live-badge" id="liveBadge">LIVE</div>
-            <div class="overlay" id="overlay">
-                <div class="play-btn">
-                    <svg viewBox="0 0 24 24"><polygon points="5,3 19,12 5,21"/></svg>
-                </div>
-                <div class="status" id="status">Click to watch</div>
-            </div>
-        </div>
-    </div>
     <script>
         const video = document.getElementById('video');
-        const overlay = document.getElementById('overlay');
-        const status = document.getElementById('status');
-        const liveBadge = document.getElementById('liveBadge');
-        let ws;
-        let mediaSource;
-        let sourceBuffer;
         let bufferQueue = [];
         function connect() {
-            status.textContent = 'Connecting...';
             const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
             ws = new WebSocket(`${proto}//${location.host}/api/ws?src=live`);
             ws.binaryType = 'arraybuffer';
@@ -112,14 +32,10 @@
             ws.onopen = () => {
                 mediaSource = new MediaSource();
                 video.src = URL.createObjectURL(mediaSource);
-                mediaSource.addEventListener('sourceopen', () => {
-                    // go2rtc sends codec info as first text message
-                });
             };
             ws.onmessage = (event) => {
                 if (typeof event.data === 'string') {
-                    // Codec info from go2rtc
                     const msg = JSON.parse(event.data);
                     if (msg.type === 'mse') {
                         try {
@@ -129,22 +45,17 @@
                                 if (bufferQueue.length > 0 && !sourceBuffer.updating) {
                                     sourceBuffer.appendBuffer(bufferQueue.shift());
                                 }
-                                // Keep buffer trimmed to avoid memory issues
                                 if (video.buffered.length > 0 && video.buffered.end(0) - video.buffered.start(0) > 30) {
                                     sourceBuffer.remove(0, video.buffered.end(0) - 10);
                                 }
                             });
-                            overlay.classList.add('hidden');
-                            liveBadge.classList.add('active');
                             video.muted = false;
                             video.play().catch(() => {});
                         } catch (e) {
-                            console.error('Failed to create source buffer:', e);
-                            status.textContent = 'Codec not supported';
                         }
                     }
                 } else {
-                    // Binary media data
                     if (sourceBuffer && !sourceBuffer.updating) {
                         try {
                             sourceBuffer.appendBuffer(event.data);
@@ -157,19 +68,8 @@
                 }
             };
-            ws.onclose = () => {
-                liveBadge.classList.remove('active');
-                overlay.classList.remove('hidden');
-                status.textContent = 'Stream ended. Click to reconnect.';
-                cleanup();
-            };
-            ws.onerror = () => {
-                liveBadge.classList.remove('active');
-                overlay.classList.remove('hidden');
-                status.textContent = 'Stream offline. Click to retry.';
-                cleanup();
-            };
         }
         function cleanup() {
@@ -181,12 +81,11 @@
             mediaSource = null;
         }
-        overlay.addEventListener('click', () => {
-            if (ws && ws.readyState === WebSocket.OPEN) return;
-            connect();
-        });
-        // Auto-connect on load
         connect();
     </script>
 </body>

     <title>Live Stream</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
+        html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
         video {
+            width: 100vw;
+            height: 100vh;
             object-fit: contain;
             background: #000;
         }
     </style>
 </head>
 <body>
+    <video id="video" autoplay muted playsinline></video>
     <script>
         const video = document.getElementById('video');
+        let ws, mediaSource, sourceBuffer;
         let bufferQueue = [];
+        let reconnectTimer;
         function connect() {
             const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
             ws = new WebSocket(`${proto}//${location.host}/api/ws?src=live`);
             ws.binaryType = 'arraybuffer';
             ws.onopen = () => {
                 mediaSource = new MediaSource();
                 video.src = URL.createObjectURL(mediaSource);
             };
             ws.onmessage = (event) => {
                 if (typeof event.data === 'string') {
                     const msg = JSON.parse(event.data);
                     if (msg.type === 'mse') {
                         try {
                                 if (bufferQueue.length > 0 && !sourceBuffer.updating) {
                                     sourceBuffer.appendBuffer(bufferQueue.shift());
                                 }
                                 if (video.buffered.length > 0 && video.buffered.end(0) - video.buffered.start(0) > 30) {
                                     sourceBuffer.remove(0, video.buffered.end(0) - 10);
                                 }
                             });
                             video.muted = false;
                             video.play().catch(() => {});
                         } catch (e) {
+                            console.error('Source buffer error:', e);
                         }
                     }
                 } else {
                     if (sourceBuffer && !sourceBuffer.updating) {
                         try {
                             sourceBuffer.appendBuffer(event.data);
                 }
             };
+            ws.onclose = () => { cleanup(); scheduleReconnect(); };
+            ws.onerror = () => { cleanup(); scheduleReconnect(); };
         }
         function cleanup() {
             mediaSource = null;
         }
+        function scheduleReconnect() {
+            clearTimeout(reconnectTimer);
+            reconnectTimer = setTimeout(connect, 3000);
+        }
         connect();
     </script>
 </body>