Update app.py

app.py

@@ -1,13 +1,25 @@
 import pygame
 import numpy as np
-from flask import Flask, Response, render_template_string, request
+from flask import Flask, Response, render_template_string, request, jsonify
 import time
 import os
+import cv2
+import subprocess
+import threading
+import queue
+import uuid
 
 # Initialize Pygame headlessly
 os.environ['SDL_VIDEODRIVER'] = 'dummy'
 pygame.init()
-#pygame.mixer.init(frequency=44100, size=-16, channels=2)
+
+# Try to initialize mixer, but don't crash if it fails
+try:
+    pygame.mixer.init(frequency=44100, size=-16, channels=2)
+    print("✅ Audio mixer initialized")
+except Exception as e:
+    print(f"⚠️ Audio mixer not available: {e}")
+    print("   Continuing without sound...")
 
 app = Flask(__name__)
 
@@ -19,9 +31,12 @@ class ShaderRenderer:
         self.mouse_y = height // 2
         self.start_time = time.time()
         self.surface = pygame.Surface((width, height))
+        self.frame_count = 0
+        self.last_frame_time = time.time()
+        self.fps = 0
         
         # Sound sources
-        self.sound_source = 'none'  # 'none', 'pygame', 'browser'
+        self.sound_source = 'none'
         self.pygame_sound = None
         self.pygame_playing = False
         self.sound_amp = 0.0
@@ -55,13 +70,20 @@ class ShaderRenderer:
                 self.sound_amp = 0.0
     
     def render_frame(self):
-        """Render a simple pattern that shader will transform"""
+        """Render the pygame frame"""
         t = time.time() - self.start_time
         
+        # Calculate FPS
+        self.frame_count += 1
+        if time.time() - self.last_frame_time > 1.0:
+            self.fps = self.frame_count
+            self.frame_count = 0
+            self.last_frame_time = time.time()
+        
         # Clear
         self.surface.fill((20, 20, 30))
         
-        # Draw TOP marker (should be at top of canvas)
+        # Draw TOP marker
         pygame.draw.rect(self.surface, (255, 100, 100), (10, 10, 100, 30))
         font = pygame.font.Font(None, 24)
         text = font.render("TOP", True, (255, 255, 255))
@@ -102,63 +124,197 @@ class ShaderRenderer:
         pygame.draw.rect(self.surface, (100, 255, 100), 
                         (self.width-220, 10, meter_width, 20))
         
-        # Shader indicator
-        shader_text = font.render("SHADER ON", True, (255, 255, 0))
-        self.surface.blit(shader_text, (self.width-150, self.height-30))
+        # FPS counter
+        fps_text = font.render(f"FPS: {self.fps}", True, (255, 255, 0))
+        self.surface.blit(fps_text, (self.width-150, self.height-60))
         
         return pygame.image.tostring(self.surface, 'RGB')
     
     def get_frame(self):
         return self.render_frame()
+    
+    def get_frame_jpeg(self, quality=80):
+        """Return frame as JPEG"""
+        frame = self.get_frame()
+        # Convert to numpy array for OpenCV
+        img = np.frombuffer(frame, dtype=np.uint8).reshape((self.height, self.width, 3))
+        # Convert RGB to BGR for OpenCV
+        img = cv2.cvtColor(img, cv2.COLOR_RGB2BGR)
+        # Encode as JPEG
+        _, jpeg = cv2.imencode('.jpg', img, [cv2.IMWRITE_JPEG_QUALITY, quality])
+        return jpeg.tobytes()
 
 renderer = ShaderRenderer()
 
+# Streaming managers
+class StreamManager:
+    def __init__(self):
+        self.streams = {}
+        
+    def create_mjpeg_stream(self):
+        stream_id = str(uuid.uuid4())
+        self.streams[stream_id] = {
+            'type': 'mjpeg',
+            'active': True,
+            'clients': 0
+        }
+        return stream_id
+    
+    def create_ffmpeg_stream(self, format_type='webm'):
+        stream_id = str(uuid.uuid4())
+        
+        # FFmpeg command based on format
+        if format_type == 'webm':
+            cmd = [
+                'ffmpeg',
+                '-f', 'rawvideo',
+                '-pix_fmt', 'rgb24',
+                '-s', '640x480',
+                '-r', '30',
+                '-i', '-',
+                '-c:v', 'libvpx-vp9',
+                '-b:v', '1M',
+                '-cpu-used', '4',
+                '-deadline', 'realtime',
+                '-f', 'webm',
+                '-'
+            ]
+            mimetype = 'video/webm'
+        else:  # mp4
+            cmd = [
+                'ffmpeg',
+                '-f', 'rawvideo',
+                '-pix_fmt', 'rgb24',
+                '-s', '640x480',
+                '-r', '30',
+                '-i', '-',
+                '-c:v', 'libx264',
+                '-preset', 'ultrafast',
+                '-tune', 'zerolatency',
+                '-b:v', '1M',
+                '-f', 'mp4',
+                '-movflags', 'frag_keyframe+empty_moov',
+                '-'
+            ]
+            mimetype = 'video/mp4'
+        
+        # Start FFmpeg process
+        process = subprocess.Popen(
+            cmd,
+            stdin=subprocess.PIPE,
+            stdout=subprocess.PIPE,
+            stderr=subprocess.DEVNULL,
+            bufsize=0
+        )
+        
+        frame_queue = queue.Queue(maxsize=30)
+        
+        self.streams[stream_id] = {
+            'type': format_type,
+            'mimetype': mimetype,
+            'active': True,
+            'process': process,
+            'queue': frame_queue,
+            'clients': 0
+        }
+        
+        # Start frame pusher thread
+        def push_frames():
+            while self.streams.get(stream_id, {}).get('active', False):
+                try:
+                    frame = renderer.get_frame()
+                    process.stdin.write(frame)
+                except:
+                    break
+            process.terminate()
+        
+        threading.Thread(target=push_frames, daemon=True).start()
+        
+        return stream_id
+    
+    def get_stream(self, stream_id):
+        return self.streams.get(stream_id)
+    
+    def close_stream(self, stream_id):
+        if stream_id in self.streams:
+            stream = self.streams[stream_id]
+            if 'process' in stream:
+                stream['process'].terminate()
+            del self.streams[stream_id]
+
+stream_manager = StreamManager()
+
 @app.route('/')
 def index():
     return render_template_string('''
     <!DOCTYPE html>
     <html>
     <head>
-        <title>Pygame + WebGL Shader + Sound</title>
+        <title>🎮 Pygame + Multi-format Streaming</title>
         <style>
             body {
                 margin: 0;
                 background: #0a0a0a;
                 color: white;
-                font-family: Arial, sans-serif;
+                font-family: 'Segoe UI', Arial, sans-serif;
                 display: flex;
-                flex-direction: column;
                 justify-content: center;
                 align-items: center;
                 min-height: 100vh;
             }
             
             .container {
+                max-width: 900px;
+                padding: 20px;
                 text-align: center;
             }
             
-            canvas {
-                width: 640px;
-                height: 480px;
-                border: 3px solid #4CAF50;
+            h1 {
+                color: #4CAF50;
+                margin-bottom: 20px;
+                text-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
+            }
+            
+            .video-container {
+                background: #000;
+                border-radius: 12px;
+                padding: 5px;
+                margin: 20px 0;
+                box-shadow: 0 0 30px rgba(76, 175, 80, 0.2);
+            }
+            
+            #videoPlayer {
+                width: 100%;
+                max-width: 640px;
+                height: auto;
                 border-radius: 8px;
-                cursor: crosshair;
                 display: block;
-                margin: 20px 0;
+                margin: 0 auto;
+                background: #111;
+            }
+            
+            #mjpegImg {
+                width: 100%;
+                max-width: 640px;
+                height: auto;
+                border-radius: 8px;
+                display: none;
+                margin: 0 auto;
+                background: #111;
             }
             
             .controls {
                 background: #1a1a1a;
+                border-radius: 12px;
                 padding: 20px;
-                border-radius: 8px;
                 margin-top: 20px;
             }
             
-            .button-group {
+            .format-buttons {
                 display: flex;
                 gap: 10px;
                 justify-content: center;
-                margin: 15px 0;
+                margin: 20px 0;
                 flex-wrap: wrap;
             }
             
@@ -168,427 +324,402 @@ def index():
                 border: none;
                 padding: 12px 24px;
                 font-size: 16px;
-                border-radius: 5px;
+                border-radius: 8px;
                 cursor: pointer;
                 transition: all 0.3s;
-                min-width: 120px;
+                min-width: 100px;
+                font-weight: bold;
+                border: 1px solid #444;
             }
             
             button:hover {
-                transform: scale(1.05);
+                transform: translateY(-2px);
+                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
             }
             
             button.active {
                 background: #4CAF50;
+                border-color: #4CAF50;
                 box-shadow: 0 0 20px #4CAF50;
             }
             
-            button.shader.active {
-                background: #ffaa00;
-                color: black;
-            }
-            
-            button.sound.active {
-                background: #4CAF50;
-            }
-            
-            button.browser.active {
-                background: #2196F3;
+            .status-panel {
+                background: #222;
+                border-radius: 8px;
+                padding: 15px;
+                margin-top: 20px;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                flex-wrap: wrap;
+                gap: 15px;
             }
             
-            .status-bar {
+            .status-item {
                 display: flex;
-                justify-content: space-between;
                 align-items: center;
-                margin-top: 15px;
-                padding: 10px;
-                background: #222;
-                border-radius: 5px;
+                gap: 10px;
             }
             
-            .indicator {
-                padding: 5px 10px;
-                border-radius: 4px;
+            .status-label {
+                color: #888;
                 font-size: 14px;
             }
             
-            .indicator.none { background: #444; }
-            .indicator.pygame { background: #4CAF50; }
-            .indicator.browser { background: #2196F3; }
-            .indicator.shader-on { background: #ffaa00; color: black; }
-            .indicator.shader-off { background: #666; }
-            
-            .meter {
-                width: 200px;
-                height: 20px;
+            .status-value {
                 background: #333;
-                border-radius: 10px;
-                overflow: hidden;
+                padding: 5px 12px;
+                border-radius: 20px;
+                font-size: 14px;
+                font-weight: bold;
             }
             
-            .meter-fill {
-                height: 100%;
-                width: 0%;
-                background: linear-gradient(90deg, #4CAF50, #2196F3);
-                transition: width 0.05s;
+            .browser-support {
+                font-size: 12px;
+                color: #666;
+                margin-top: 15px;
+                padding: 10px;
+                border-top: 1px solid #333;
             }
             
             .badge {
                 display: inline-block;
-                padding: 5px 10px;
+                padding: 3px 8px;
                 border-radius: 4px;
-                margin-left: 10px;
-                font-size: 12px;
+                font-size: 11px;
+                margin-left: 5px;
             }
             
-            .badge.on {
+            .badge.green {
                 background: #4CAF50;
-                color: white;
             }
             
-            .badge.off {
-                background: #ff4444;
-                color: white;
+            .badge.yellow {
+                background: #ffaa00;
+                color: black;
             }
             
-            .color-sample {
-                display: inline-block;
-                width: 12px;
-                height: 12px;
-                border-radius: 3px;
-                margin: 0 5px;
+            .badge.red {
+                background: #ff4444;
             }
             
             .info-text {
-                font-size: 12px;
                 color: #666;
-                margin-top: 15px;
+                font-size: 12px;
+                margin-top: 10px;
             }
         </style>
     </head>
     <body>
         <div class="container">
-            <h1>🎮 Pygame + WebGL Shader + Sound</h1>
+            <h1>🎮 Pygame + Multi-format Streaming</h1>
             
-            <canvas id="canvas" width="640" height="480"></canvas>
+            <div class="video-container">
+                <video id="videoPlayer" autoplay controls muted></video>
+                <img id="mjpegImg" src="">
+            </div>
             
             <div class="controls">
-                <div class="button-group">
-                    <button id="shaderBtn" class="shader active" onclick="toggleShader()">
-                        🔮 SHADER ON
-                    </button>
-                    <span id="shaderBadge" class="badge on">EFFECTS ACTIVE</span>
-                </div>
-                
-                <h3>🔊 Sound Source</h3>
-                <div class="button-group">
-                    <button id="btnNone" class="sound active" onclick="setSoundSource('none')">🔇 None</button>
-                    <button id="btnPygame" class="sound" onclick="setSoundSource('pygame')">🎮 Pygame</button>
-                    <button id="btnBrowser" class="sound" onclick="setSoundSource('browser')">🌐 Browser</button>
+                <h3>📡 Streaming Format</h3>
+                <div class="format-buttons">
+                    <button id="btnMjpeg" onclick="setFormat('mjpeg')" class="active">📸 MJPEG</button>
+                    <button id="btnWebm" onclick="setFormat('webm')">🎥 WebM (VP9)</button>
+                    <button id="btnMp4" onclick="setFormat('mp4')">🎬 MP4 (H.264)</button>
                 </div>
                 
-                <div class="status-bar">
-                    <div>
-                        <span id="sourceIndicator" class="indicator none">Source: None</span>
-                        <span id="shaderIndicator" class="indicator shader-on" style="margin-left: 10px;">Shader: ON</span>
+                <div class="status-panel">
+                    <div class="status-item">
+                        <span class="status-label">Current Format:</span>
+                        <span id="currentFormat" class="status-value">MJPEG</span>
+                    </div>
+                    <div class="status-item">
+                        <span class="status-label">Browser Support:</span>
+                        <span id="browserSupport" class="status-value">Checking...</span>
                     </div>
-                    <div class="meter">
-                        <div id="soundMeter" class="meter-fill"></div>
+                    <div class="status-item">
+                        <span class="status-label">Stream Status:</span>
+                        <span id="streamStatus" class="status-value">🟢 Active</span>
                     </div>
                 </div>
                 
+                <div class="browser-support" id="supportDetails">
+                    Testing browser capabilities...
+                </div>
+                
                 <div class="info-text">
-                    <span class="color-sample" style="background: #ff6464;"></span> No sound
-                    <span class="color-sample" style="background: #64ff64;"></span> Pygame sound
-                    <span class="color-sample" style="background: #6464ff;"></span> Browser sound
-                    | <span style="color: #ff6464;">🔴 TOP</span> marker should be at top
-                    | <span style="color: #64ff64;">🟢 BOTTOM</span> at bottom
+                    ⚡ MJPEG: Lowest CPU, universal support<br>
+                    🎥 WebM: Efficient compression, best for Chrome/Firefox<br>
+                    🎬 MP4: Universal support, hardware accelerated
                 </div>
             </div>
         </div>
         
-        <!-- Audio element for browser sound -->
-        <audio id="browserAudio" loop style="display:none;">
-            <source src="/static/sound.mp3" type="audio/mpeg">
-        </audio>
-        
-        <!-- WebGL Shader -->
-        <script id="vertex-shader" type="x-shader/x-vertex">
-            attribute vec2 position;
-            varying vec2 vUv;
-            void main() {
-                // Flip Y coordinate to fix Pygame orientation
-                vUv = vec2(position.x * 0.5 + 0.5, 1.0 - (position.y * 0.5 + 0.5));
-                gl_Position = vec4(position, 0.0, 1.0);
-            }
-        </script>
-        
-        <script id="fragment-shader" type="x-shader/x-fragment">
-            precision highp float;
-            
-            uniform sampler2D uTexture;
-            uniform float uTime;
-            uniform vec2 uMouse;
-            uniform vec2 uResolution;
-            uniform bool uShaderEnabled;
-            
-            varying vec2 vUv;
-            
-            void main() {
-                // Get pixel from pygame texture (now correctly oriented)
-                vec4 color = texture2D(uTexture, vUv);
-                
-                if (uShaderEnabled) {
-                    // SHADER EFFECTS ON
-                    
-                    // 1. Time-based color shift
-                    color.r += sin(uTime + vUv.x * 10.0) * 0.2;
-                    color.g += cos(uTime + vUv.y * 10.0) * 0.2;
-                    
-                    // 2. Mouse ripple effect
-                    float dist = distance(vUv, uMouse);
-                    if (dist < 0.2) {
-                        float ripple = sin(dist * 50.0 - uTime * 5.0) * 0.5 + 0.5;
-                        color.rgb += vec3(0.5, 0.2, 0.8) * ripple * 0.5;
-                    }
-                    
-                    // 3. Scanlines
-                    float scanline = sin(vUv.y * uResolution.y * 2.0 + uTime * 10.0) * 0.1 + 0.9;
-                    color.rgb *= scanline;
-                    
-                    // 4. Edge glow
-                    float edge = 1.0 - abs(vUv.x - 0.5) * 2.0;
-                    edge *= 1.0 - abs(vUv.y - 0.5) * 2.0;
-                    color.rgb += vec3(0.2, 0.1, 0.5) * edge * sin(uTime) * 0.3;
-                }
-                // else: SHADER EFFECTS OFF - pure Pygame pixels
-                
-                gl_FragColor = color;
-            }
-        </script>
-        
         <script>
-            const canvas = document.getElementById('canvas');
-            const gl = canvas.getContext('webgl');
-            const browserAudio = document.getElementById('browserAudio');
-            
-            if (!gl) {
-                alert('WebGL not supported!');
-            }
-            
-            let texture = gl.createTexture();
-            let startTime = Date.now() / 1000;
-            let shaderEnabled = true;
-            let mouse = [0.5, 0.5];
-            let currentSource = 'none';
-            
-            // UI Elements
-            const shaderBtn = document.getElementById('shaderBtn');
-            const shaderBadge = document.getElementById('shaderBadge');
-            const shaderIndicator = document.getElementById('shaderIndicator');
-            
-            function toggleShader() {
-                shaderEnabled = !shaderEnabled;
+            const videoPlayer = document.getElementById('videoPlayer');
+            const mjpegImg = document.getElementById('mjpegImg');
+            let currentFormat = 'mjpeg';
+            let streamActive = true;
+            
+            // Check browser capabilities
+            function checkBrowserSupport() {
+                const video = document.createElement('video');
+                const support = {
+                    webm: video.canPlayType('video/webm; codecs="vp9, vorbis"'),
+                    webmVP8: video.canPlayType('video/webm; codecs="vp8, vorbis"'),
+                    mp4: video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'),
+                    mp4H264: video.canPlayType('video/mp4; codecs="avc1.64001E"'),
+                    mjpeg: true
+                };
                 
-                // Update UI
-                if (shaderEnabled) {
-                    shaderBtn.className = 'shader active';
-                    shaderBtn.innerHTML = '🔮 SHADER ON';
-                    shaderBadge.className = 'badge on';
-                    shaderBadge.innerHTML = 'EFFECTS ACTIVE';
-                    shaderIndicator.className = 'indicator shader-on';
-                    shaderIndicator.innerHTML = 'Shader: ON';
-                } else {
-                    shaderBtn.className = '';
-                    shaderBtn.innerHTML = '🎮 SHADER OFF';
-                    shaderBadge.className = 'badge off';
-                    shaderBadge.innerHTML = 'PURE PYGAME';
-                    shaderIndicator.className = 'indicator shader-off';
-                    shaderIndicator.innerHTML = 'Shader: OFF';
-                }
+                let supportText = '';
+                let details = '';
                 
-                // Update shader uniform
-                if (program) {
-                    gl.useProgram(program);
-                    const uShaderEnabled = gl.getUniformLocation(program, 'uShaderEnabled');
-                    gl.uniform1i(uShaderEnabled, shaderEnabled);
+                if (support.webm) {
+                    supportText += '✓ WebM VP9 ';
+                    details += 'WebM VP9: ' + support.webm + '<br>';
                 }
-            }
-            
-            // Sound meter animation
-            let soundAmp = 0;
-            function updateSoundMeter() {
-                if (currentSource === 'browser' && !browserAudio.paused) {
-                    // Simulate amplitude from browser audio
-                    soundAmp = 0.3 + 0.2 * Math.sin(Date.now() * 0.01);
-                    document.getElementById('soundMeter').style.width = (soundAmp * 100) + '%';
-                } else if (currentSource === 'pygame') {
-                    // Get amplitude from server
-                    fetch('/sound/amp')
-                        .then(res => res.json())
-                        .then(data => {
-                            soundAmp = data.amp;
-                            document.getElementById('soundMeter').style.width = (soundAmp * 100) + '%';
-                        });
-                } else {
-                    soundAmp = 0;
-                    document.getElementById('soundMeter').style.width = '0%';
+                if (support.mp4) {
+                    supportText += '✓ MP4 H.264 ';
+                    details += 'MP4 H.264: ' + support.mp4 + '<br>';
                 }
-                requestAnimationFrame(updateSoundMeter);
+                supportText += '✓ MJPEG';
+                
+                document.getElementById('browserSupport').innerHTML = supportText;
+                document.getElementById('supportDetails').innerHTML = details;
+                
+                return support;
             }
-            updateSoundMeter();
             
-            function setSoundSource(source) {
-                currentSource = source;
+            function setFormat(format) {
+                currentFormat = format;
                 
-                // Update UI
-                document.getElementById('btnNone').className = source === 'none' ? 'sound active' : 'sound';
-                document.getElementById('btnPygame').className = source === 'pygame' ? 'sound active' : 'sound';
-                document.getElementById('btnBrowser').className = source === 'browser' ? 'sound active' : 'sound';
+                // Update button states
+                document.getElementById('btnMjpeg').className = format === 'mjpeg' ? 'active' : '';
+                document.getElementById('btnWebm').className = format === 'webm' ? 'active' : '';
+                document.getElementById('btnMp4').className = format === 'mp4' ? 'active' : '';
                 
-                const indicator = document.getElementById('sourceIndicator');
-                indicator.className = `indicator ${source}`;
-                indicator.innerHTML = `Source: ${source.charAt(0).toUpperCase() + source.slice(1)}`;
+                document.getElementById('currentFormat').innerHTML = format.toUpperCase();
                 
-                // Handle audio
-                if (source === 'browser') {
-                    browserAudio.play().catch(e => console.log('Audio play failed:', e));
+                // Hide both players first
+                videoPlayer.style.display = 'none';
+                mjpegImg.style.display = 'none';
+                
+                if (format === 'mjpeg') {
+                    // Use img tag for MJPEG
+                    mjpegImg.style.display = 'block';
+                    mjpegImg.src = '/video/mjpeg?' + Date.now(); // Add timestamp to prevent caching
                 } else {
-                    browserAudio.pause();
-                    browserAudio.currentTime = 0;
+                    // Use video tag for WebM/MP4
+                    videoPlayer.style.display = 'block';
+                    
+                    // Stop current playback
+                    videoPlayer.pause();
+                    videoPlayer.removeAttribute('src');
+                    videoPlayer.load();
+                    
+                    // Set new source
+                    const source = document.createElement('source');
+                    if (format === 'webm') {
+                        source.src = '/video/webm?' + Date.now();
+                        source.type = 'video/webm';
+                    } else {
+                        source.src = '/video/mp4?' + Date.now();
+                        source.type = 'video/mp4';
+                    }
+                    
+                    videoPlayer.appendChild(source);
+                    videoPlayer.load();
+                    videoPlayer.play().catch(e => console.log('Playback error:', e));
                 }
-                
-                // Tell server about source change
-                fetch('/sound/source', {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({source: source})
-                });
             }
             
-            // Mouse tracking
-            canvas.addEventListener('mousemove', (e) => {
-                const rect = canvas.getBoundingClientRect();
-                mouse[0] = (e.clientX - rect.left) / rect.width;
-                mouse[1] = 1.0 - (e.clientY - rect.top) / rect.height;
-                
-                const x = Math.round((e.clientX - rect.left) * 640 / rect.width);
-                const y = Math.round((e.clientY - rect.top) * 480 / rect.height);
-                
-                fetch('/mouse', {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({x, y})
-                });
-            });
-            
-            // Setup WebGL
-            function createShader(type, source) {
-                const shader = gl.createShader(type);
-                gl.shaderSource(shader, source);
-                gl.compileShader(shader);
-                return shader;
+            // Monitor stream health
+            function checkStreamHealth() {
+                if (currentFormat === 'mjpeg') {
+                    // For MJPEG, check if image is loading
+                    mjpegImg.onerror = function() {
+                        document.getElementById('streamStatus').innerHTML = '🔴 Error';
+                        streamActive = false;
+                    };
+                    mjpegImg.onload = function() {
+                        document.getElementById('streamStatus').innerHTML = '🟢 Active';
+                        streamActive = true;
+                    };
+                } else {
+                    // For video, check if playing
+                    videoPlayer.onerror = function() {
+                        document.getElementById('streamStatus').innerHTML = '🔴 Error';
+                        streamActive = false;
+                    };
+                    videoPlayer.onplaying = function() {
+                        document.getElementById('streamStatus').innerHTML = '🟢 Active';
+                        streamActive = true;
+                    };
+                }
             }
             
-            // Compile shaders
-            const vertexShader = createShader(gl.VERTEX_SHADER, 
-                document.getElementById('vertex-shader').textContent);
-            const fragmentShader = createShader(gl.FRAGMENT_SHADER, 
-                document.getElementById('fragment-shader').textContent);
+            // Initialize
+            checkBrowserSupport();
+            setFormat('mjpeg');  // Start with MJPEG for reliability
+            checkStreamHealth();
             
-            // Create program
-            const program = gl.createProgram();
-            gl.attachShader(program, vertexShader);
-            gl.attachShader(program, fragmentShader);
-            gl.linkProgram(program);
-            gl.useProgram(program);
-            
-            // Set up fullscreen quad
-            const vertices = new Float32Array([
-                -1, -1, 1, -1, -1, 1,
-                -1, 1, 1, -1, 1, 1
-            ]);
-            
-            const buffer = gl.createBuffer();
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
-            
-            const position = gl.getAttribLocation(program, 'position');
-            gl.enableVertexAttribArray(position);
-            gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
-            
-            // Get uniform locations
-            const uTexture = gl.getUniformLocation(program, 'uTexture');
-            const uTime = gl.getUniformLocation(program, 'uTime');
-            const uMouse = gl.getUniformLocation(program, 'uMouse');
-            const uResolution = gl.getUniformLocation(program, 'uResolution');
-            const uShaderEnabled = gl.getUniformLocation(program, 'uShaderEnabled');
-            
-            gl.uniform1i(uTexture, 0);
-            gl.uniform2f(uResolution, canvas.width, canvas.height);
-            gl.uniform1i(uShaderEnabled, shaderEnabled);
-            
-            // Texture setup
-            gl.bindTexture(gl.TEXTURE_2D, texture);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-            
-            // Main loop
-            function update() {
-                fetch('/frame')
-                    .then(res => res.arrayBuffer())
-                    .then(buffer => {
-                        // Update texture with new frame
-                        gl.bindTexture(gl.TEXTURE_2D, texture);
-                        gl.texImage2D(
-                            gl.TEXTURE_2D, 0, gl.RGB, 640, 480, 0,
-                            gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array(buffer)
-                        );
-                        
-                        // Update uniforms
-                        const time = (Date.now() / 1000) - startTime;
-                        gl.uniform1f(uTime, time);
-                        gl.uniform2f(uMouse, mouse[0], mouse[1]);
-                        
-                        // Draw
-                        gl.drawArrays(gl.TRIANGLES, 0, 6);
-                        
-                        requestAnimationFrame(update);
-                    });
-            }
-            
-            update();
+            // Reconnect on error
+            setInterval(() => {
+                if (!streamActive) {
+                    console.log('Attempting to reconnect...');
+                    setFormat(currentFormat);
+                }
+            }, 5000);
         </script>
     </body>
     </html>
     ''')
 
-@app.route('/frame')
-def frame():
-    """Return raw RGB bytes"""
-    return Response(renderer.get_frame(), mimetype='application/octet-stream')
+@app.route('/video/mjpeg')
+def video_mjpeg():
+    """MJPEG streaming endpoint"""
+    def generate():
+        while True:
+            frame = renderer.get_frame_jpeg(quality=70)
+            yield (b'--frame\r\n'
+                   b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
+            # Small delay to control frame rate
+            time.sleep(1/30)
+    
+    return Response(
+        generate(),
+        mimetype='multipart/x-mixed-replace; boundary=frame'
+    )
+
+@app.route('/video/webm')
+def video_webm():
+    """WebM streaming endpoint"""
+    cmd = [
+        'ffmpeg',
+        '-f', 'rawvideo',
+        '-pix_fmt', 'rgb24',
+        '-s', '640x480',
+        '-r', '30',
+        '-i', '-',
+        '-c:v', 'libvpx-vp9',
+        '-b:v', '1M',
+        '-cpu-used', '4',
+        '-deadline', 'realtime',
+        '-f', 'webm',
+        '-'
+    ]
+    
+    process = subprocess.Popen(
+        cmd,
+        stdin=subprocess.PIPE,
+        stdout=subprocess.PIPE,
+        stderr=subprocess.DEVNULL,
+        bufsize=0
+    )
+    
+    def generate():
+        # Frame pusher thread
+        def push_frames():
+            while True:
+                try:
+                    frame = renderer.get_frame()
+                    process.stdin.write(frame)
+                except:
+                    break
+        
+        threading.Thread(target=push_frames, daemon=True).start()
+        
+        # Read and yield encoded data
+        while True:
+            data = process.stdout.read(4096)
+            if not data:
+                break
+            yield data
+    
+    return Response(
+        generate(),
+        mimetype='video/webm',
+        headers={
+            'Cache-Control': 'no-cache',
+            'Transfer-Encoding': 'chunked'
+        }
+    )
+
+@app.route('/video/mp4')
+def video_mp4():
+    """MP4 streaming endpoint"""
+    cmd = [
+        'ffmpeg',
+        '-f', 'rawvideo',
+        '-pix_fmt', 'rgb24',
+        '-s', '640x480',
+        '-r', '30',
+        '-i', '-',
+        '-c:v', 'libx264',
+        '-preset', 'ultrafast',
+        '-tune', 'zerolatency',
+        '-b:v', '1M',
+        '-f', 'mp4',
+        '-movflags', 'frag_keyframe+empty_moov',
+        '-'
+    ]
+    
+    process = subprocess.Popen(
+        cmd,
+        stdin=subprocess.PIPE,
+        stdout=subprocess.PIPE,
+        stderr=subprocess.DEVNULL,
+        bufsize=0
+    )
+    
+    def generate():
+        def push_frames():
+            while True:
+                try:
+                    frame = renderer.get_frame()
+                    process.stdin.write(frame)
+                except:
+                    break
+        
+        threading.Thread(target=push_frames, daemon=True).start()
+        
+        while True:
+            data = process.stdout.read(4096)
+            if not data:
+                break
+            yield data
+    
+    return Response(
+        generate(),
+        mimetype='video/mp4',
+        headers={
+            'Cache-Control': 'no-cache',
+            'Transfer-Encoding': 'chunked'
+        }
+    )
 
 @app.route('/mouse', methods=['POST'])
 def mouse():
+    """Keep mouse endpoint for interactivity"""
     data = request.json
     renderer.set_mouse(data['x'], data['y'])
     return 'OK'
 
 @app.route('/sound/source', methods=['POST'])
 def sound_source():
+    """Keep sound source endpoint"""
     data = request.json
     renderer.set_sound_source(data['source'])
     return 'OK'
 
 @app.route('/sound/amp')
 def sound_amp():
+    """Keep sound amp endpoint for compatibility"""
     return {'amp': renderer.sound_amp}
 
-# Serve static sound file
 @app.route('/static/sound.mp3')
 def serve_sound():
+    """Serve sound file"""
     if os.path.exists('sound.mp3'):
         with open('sound.mp3', 'rb') as f:
             return Response(f.read(), mimetype='audio/mpeg')
@@ -596,10 +727,14 @@ def serve_sound():
 
 if __name__ == '__main__':
     print("\n" + "="*70)
-    print("🎮 Pygame + WebGL Shader + Sound")
+    print("🎮 Pygame + Multi-format Streaming")
     print("="*70)
-    print("🌐 Starting on Hugging Face Spaces")
-    print("\n🔮 Shader Toggle: See pure Pygame vs. effects")
+    print("📡 Streaming endpoints:")
+    print("   • MJPEG: /video/mjpeg - Low CPU, universal")
+    print("   • WebM:  /video/webm  - VP9 codec, efficient")
+    print("   • MP4:   /video/mp4   - H.264, hardware accelerated")
+    print("\n🌐 Main page: /")
     print("="*70 + "\n")
-    port = int(os.environ.get('PORT', 7860))  # Use HF port
-    app.run(host='0.0.0.0', port=port, debug=False)
+    
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=False, threaded=True)