Upload app.py

app.py

@@ -9,6 +9,33 @@ import threading
 import queue
 import uuid
 
+# ============ CONFIGURATION ============
+VIDEO_WIDTH = 1280
+VIDEO_HEIGHT = 720
+VIDEO_FPS = 30
+JPEG_QUALITY = 70
+STREAM_PORT = 7860
+
+# Colors (RGB)
+COLOR_TOP = (255, 100, 100)
+COLOR_BOTTOM = (100, 255, 100)
+COLOR_BG = (20, 20, 30)
+COLOR_GRID = (50, 50, 70)
+COLOR_FPS = (255, 255, 0)
+COLOR_CLOCK = (0, 255, 255)
+
+# Button colors
+COLOR_BUTTON_NORMAL = (80, 80, 80)
+COLOR_BUTTON_HOVER = (100, 100, 200)
+COLOR_BUTTON_CLICKED = (0, 200, 0)
+COLOR_BUTTON_BORDER = (200, 200, 200)
+
+# Sound source colors
+COLOR_SOUND_NONE = (255, 100, 100)
+COLOR_SOUND_PYGAME = (100, 255, 100)
+COLOR_SOUND_BROWSER = (100, 100, 255)
+# =======================================
+
 # Initialize Pygame headlessly
 os.environ['SDL_VIDEODRIVER'] = 'dummy'
 pygame.init()
@@ -24,7 +51,7 @@ except Exception as e:
 app = Flask(__name__)
 
 class ShaderRenderer:
-    def __init__(self, width=640, height=480):
+    def __init__(self, width=VIDEO_WIDTH, height=VIDEO_HEIGHT):
         self.width = width
         self.height = height
         self.mouse_x = width // 2
@@ -34,6 +61,7 @@ class ShaderRenderer:
         self.frame_count = 0
         self.last_frame_time = time.time()
         self.fps = 0
+        self.button_clicked = False
         
         # Sound sources
         self.sound_source = 'none'
@@ -69,6 +97,16 @@ class ShaderRenderer:
                 self.pygame_playing = False
                 self.sound_amp = 0.0
     
+    def handle_click(self, x, y):
+        """Handle mouse clicks on Pygame surface"""
+        button_rect = pygame.Rect(self.width-250, 120, 220, 50)
+        
+        if button_rect.collidepoint(x, y):
+            self.button_clicked = not self.button_clicked
+            print(f"🎯 Button {'clicked!' if self.button_clicked else 'unclicked!'}")
+            return True
+        return False
+    
     def render_frame(self):
         """Render the pygame frame"""
         t = time.time() - self.start_time
@@ -81,59 +119,104 @@ class ShaderRenderer:
             self.last_frame_time = time.time()
         
         # Clear
-        self.surface.fill((20, 20, 30))
+        self.surface.fill(COLOR_BG)
+        
+        # Use larger font for 720p
+        font = pygame.font.Font(None, 36)
+        small_font = pygame.font.Font(None, 24)
         
         # Draw TOP marker
-        pygame.draw.rect(self.surface, (255, 100, 100), (10, 10, 100, 30))
-        font = pygame.font.Font(None, 24)
+        pygame.draw.rect(self.surface, COLOR_TOP, (10, 10, 150, 40))
         text = font.render("TOP", True, (255, 255, 255))
-        self.surface.blit(text, (20, 15))
+        self.surface.blit(text, (30, 15))
         
         # Draw BOTTOM marker
-        pygame.draw.rect(self.surface, (100, 255, 100), (10, self.height-40, 100, 30))
+        pygame.draw.rect(self.surface, COLOR_BOTTOM, (10, self.height-50, 150, 40))
         text = font.render("BOTTOM", True, (0, 0, 0))
-        self.surface.blit(text, (20, self.height-35))
+        self.surface.blit(text, (20, self.height-45))
+        
+        # ===== CLOCK DISPLAY =====
+        current_time = time.time()
+        seconds = int(current_time) % 60
+        hundredths = int((current_time * 100) % 100)
+        
+        # Clock background
+        pygame.draw.rect(self.surface, (40, 40, 50), (self.width-250, 70, 220, 50))
+        pygame.draw.rect(self.surface, (100, 100, 150), (self.width-250, 70, 220, 50), 2)
+        
+        # Clock text
+        time_str = f"{seconds:02d}.{hundredths:02d}s"
+        clock_text = font.render(time_str, True, COLOR_CLOCK)
+        self.surface.blit(clock_text, (self.width-230, 80))
         
-        # Draw moving circle
-        circle_size = 30 + int(20 * np.sin(t * 2))
+        # ===== CLICKABLE BUTTON =====
+        button_rect = pygame.Rect(self.width-250, 140, 220, 50)
+        
+        # Check if mouse is over button
+        mouse_over = button_rect.collidepoint(self.mouse_x, self.mouse_y)
+        
+        # Button color based on state and hover
+        if self.button_clicked:
+            button_color = COLOR_BUTTON_CLICKED
+        elif mouse_over:
+            button_color = COLOR_BUTTON_HOVER
+        else:
+            button_color = COLOR_BUTTON_NORMAL
+        
+        # Draw button
+        pygame.draw.rect(self.surface, button_color, button_rect)
+        pygame.draw.rect(self.surface, COLOR_BUTTON_BORDER, button_rect, 3)
+        
+        # Button text
+        if self.button_clicked:
+            btn_text = "✅ CLICKED!"
+        else:
+            btn_text = "🔘 CLICK ME"
+        
+        text_surf = font.render(btn_text, True, (255, 255, 255))
+        text_rect = text_surf.get_rect(center=button_rect.center)
+        self.surface.blit(text_surf, text_rect)
+        
+        # ===== MOVING CIRCLE =====
+        circle_size = 40 + int(30 * np.sin(t * 2))
         
         # Color code based on sound source
         if self.sound_source == 'pygame':
-            color = (100, 255, 100)  # Green for pygame sound
+            color = COLOR_SOUND_PYGAME
         elif self.sound_source == 'browser':
-            color = (100, 100, 255)  # Blue for browser sound
+            color = COLOR_SOUND_BROWSER
         else:
-            color = (255, 100, 100)  # Red for no sound
+            color = COLOR_SOUND_NONE
             
         pygame.draw.circle(self.surface, color, 
                          (self.mouse_x, self.mouse_y), circle_size)
         
-        # Draw grid
-        for x in range(0, self.width, 50):
+        # ===== GRID =====
+        for x in range(0, self.width, 70):
             alpha = int(40 + 20 * np.sin(x * 0.1 + t))
             pygame.draw.line(self.surface, (alpha, alpha, 50), 
                            (x, 0), (x, self.height))
-        for y in range(0, self.height, 50):
+        for y in range(0, self.height, 70):
             alpha = int(40 + 20 * np.cos(y * 0.1 + t))
             pygame.draw.line(self.surface, (alpha, alpha, 50), 
                            (0, y), (self.width, y))
         
-        # Sound meter
-        meter_width = int(200 * self.sound_amp)
-        pygame.draw.rect(self.surface, (60, 60, 60), (self.width-220, 10, 200, 20))
+        # ===== SOUND METER =====
+        meter_width = int(250 * self.sound_amp)
+        pygame.draw.rect(self.surface, (60, 60, 60), (self.width-270, 210, 250, 25))
         pygame.draw.rect(self.surface, (100, 255, 100), 
-                        (self.width-220, 10, meter_width, 20))
+                        (self.width-270, 210, meter_width, 25))
         
-        # 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))
+        # ===== FPS COUNTER =====
+        fps_text = small_font.render(f"FPS: {self.fps}", True, COLOR_FPS)
+        self.surface.blit(fps_text, (self.width-200, self.height-80))
         
         return pygame.image.tostring(self.surface, 'RGB')
     
     def get_frame(self):
         return self.render_frame()
     
-    def get_frame_jpeg(self, quality=80):
+    def get_frame_jpeg(self, quality=JPEG_QUALITY):
         """Return frame as JPEG"""
         frame = self.get_frame()
         # Convert to numpy array for OpenCV
@@ -146,113 +229,164 @@ class ShaderRenderer:
 
 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
+# ============ STREAMING ENDPOINTS ============
+
+@app.route('/video/mjpeg')
+def video_mjpeg():
+    """MJPEG streaming endpoint"""
+    def generate():
+        while True:
+            frame = renderer.get_frame_jpeg()
+            yield (b'--frame\r\n'
+                   b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
+            time.sleep(1/VIDEO_FPS)
     
-    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)
+    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', f'{VIDEO_WIDTH}x{VIDEO_HEIGHT}',
+        '-r', str(VIDEO_FPS),
+        '-i', '-',
+        '-c:v', 'libvpx-vp9',
+        '-b:v', '2M',
+        '-cpu-used', '4',
+        '-deadline', 'realtime',
+        '-f', 'webm',
+        '-'
+    ]
+    
+    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
         
-        self.streams[stream_id] = {
-            'type': format_type,
-            'mimetype': mimetype,
-            'active': True,
-            'process': process,
-            'queue': frame_queue,
-            'clients': 0
-        }
+        threading.Thread(target=push_frames, daemon=True).start()
         
-        # Start frame pusher thread
+        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', f'{VIDEO_WIDTH}x{VIDEO_HEIGHT}',
+        '-r', str(VIDEO_FPS),
+        '-i', '-',
+        '-c:v', 'libx264',
+        '-preset', 'ultrafast',
+        '-tune', 'zerolatency',
+        '-b:v', '2M',
+        '-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 self.streams.get(stream_id, {}).get('active', False):
+            while True:
                 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)
+        while True:
+            data = process.stdout.read(4096)
+            if not data:
+                break
+            yield data
     
-    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]
+    return Response(
+        generate(),
+        mimetype='video/mp4',
+        headers={'Cache-Control': 'no-cache', 'Transfer-Encoding': 'chunked'}
+    )
+
+# ============ INTERACTIVITY ENDPOINTS ============
 
-stream_manager = StreamManager()
+@app.route('/mouse', methods=['POST'])
+def mouse():
+    data = request.json
+    renderer.set_mouse(data['x'], data['y'])
+    return 'OK'
+
+@app.route('/click', methods=['POST'])
+def click():
+    data = request.json
+    renderer.handle_click(data['x'], data['y'])
+    return 'OK'
+
+@app.route('/sound/source', methods=['POST'])
+def sound_source():
+    data = request.json
+    renderer.set_sound_source(data['source'])
+    return 'OK'
+
+@app.route('/sound/amp')
+def sound_amp():
+    return {'amp': renderer.sound_amp}
+
+@app.route('/static/sound.mp3')
+def serve_sound():
+    if os.path.exists('sound.mp3'):
+        with open('sound.mp3', 'rb') as f:
+            return Response(f.read(), mimetype='audio/mpeg')
+    return 'Sound not found', 404
+
+# ============ HTML PAGE ============
 
 @app.route('/')
 def index():
-    return render_template_string('''
+    return render_template_string(f'''
     <!DOCTYPE html>
     <html>
     <head>
-        <title>🎮 Pygame + Multi-format Streaming</title>
+        <title>🎮 Pygame 720p Streaming</title>
         <style>
-            body {
+            body {{
                 margin: 0;
                 background: #0a0a0a;
                 color: white;
@@ -261,64 +395,72 @@ def index():
                 justify-content: center;
                 align-items: center;
                 min-height: 100vh;
-            }
+            }}
             
-            .container {
-                max-width: 900px;
+            .container {{
+                max-width: 1400px;
                 padding: 20px;
                 text-align: center;
-            }
+            }}
             
-            h1 {
+            h1 {{
                 color: #4CAF50;
                 margin-bottom: 20px;
-                text-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
-            }
+            }}
             
-            .video-container {
+            .video-container {{
                 background: #000;
                 border-radius: 12px;
                 padding: 5px;
                 margin: 20px 0;
                 box-shadow: 0 0 30px rgba(76, 175, 80, 0.2);
-            }
+                position: relative;
+            }}
             
-            #videoPlayer {
+            #videoPlayer, #mjpegImg {{
                 width: 100%;
-                max-width: 640px;
+                max-width: {VIDEO_WIDTH}px;
                 height: auto;
                 border-radius: 8px;
                 display: block;
                 margin: 0 auto;
                 background: #111;
-            }
+                cursor: crosshair;
+            }}
             
-            #mjpegImg {
-                width: 100%;
-                max-width: 640px;
-                height: auto;
-                border-radius: 8px;
+            #mjpegImg {{
                 display: none;
-                margin: 0 auto;
-                background: #111;
-            }
+            }}
             
-            .controls {
+            .mouse-coords {{
+                position: absolute;
+                bottom: 10px;
+                left: 10px;
+                background: rgba(0,0,0,0.7);
+                color: #4CAF50;
+                padding: 5px 10px;
+                border-radius: 20px;
+                font-family: monospace;
+                font-size: 14px;
+                pointer-events: none;
+            }}
+            
+            .controls {{
                 background: #1a1a1a;
                 border-radius: 12px;
                 padding: 20px;
                 margin-top: 20px;
-            }
+            }}
             
-            .format-buttons {
+            .format-buttons, .sound-controls {{
                 display: flex;
                 gap: 10px;
                 justify-content: center;
                 margin: 20px 0;
                 flex-wrap: wrap;
-            }
+            }}
             
-            button {
+            button {{
                 background: #333;
                 color: white;
                 border: none;
@@ -327,414 +469,240 @@ def index():
                 border-radius: 8px;
                 cursor: pointer;
                 transition: all 0.3s;
-                min-width: 100px;
+                min-width: 120px;
                 font-weight: bold;
                 border: 1px solid #444;
-            }
+            }}
             
-            button:hover {
+            button:hover {{
                 transform: translateY(-2px);
                 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
-            }
+            }}
             
-            button.active {
+            button.active {{
                 background: #4CAF50;
                 border-color: #4CAF50;
                 box-shadow: 0 0 20px #4CAF50;
-            }
+            }}
             
-            .status-panel {
+            .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-item {
+            .status-item {{
                 display: flex;
                 align-items: center;
                 gap: 10px;
-            }
+            }}
             
-            .status-label {
+            .status-label {{
                 color: #888;
                 font-size: 14px;
-            }
+            }}
             
-            .status-value {
+            .status-value {{
                 background: #333;
                 padding: 5px 12px;
                 border-radius: 20px;
                 font-size: 14px;
                 font-weight: bold;
-            }
-            
-            .browser-support {
-                font-size: 12px;
-                color: #666;
-                margin-top: 15px;
-                padding: 10px;
-                border-top: 1px solid #333;
-            }
-            
-            .badge {
-                display: inline-block;
-                padding: 3px 8px;
-                border-radius: 4px;
-                font-size: 11px;
-                margin-left: 5px;
-            }
+            }}
             
-            .badge.green {
-                background: #4CAF50;
-            }
-            
-            .badge.yellow {
-                background: #ffaa00;
-                color: black;
-            }
-            
-            .badge.red {
-                background: #ff4444;
-            }
+            .meter {{
+                width: 100%;
+                height: 25px;
+                background: #333;
+                border-radius: 12px;
+                overflow: hidden;
+                margin: 10px 0;
+            }}
             
-            .info-text {
-                color: #666;
-                font-size: 12px;
-                margin-top: 10px;
-            }
+            .meter-fill {{
+                height: 100%;
+                width: 0%;
+                background: linear-gradient(90deg, #4CAF50, #2196F3);
+                transition: width 0.05s;
+            }}
         </style>
     </head>
     <body>
         <div class="container">
-            <h1>🎮 Pygame + Multi-format Streaming</h1>
+            <h1>🎮 Pygame 720p Streaming</h1>
             
             <div class="video-container">
                 <video id="videoPlayer" autoplay controls muted></video>
-                <img id="mjpegImg" src="">
+                <img id="mjpegImg" crossorigin="anonymous">
+                <div id="mouseCoords" class="mouse-coords">X: 320, Y: 240</div>
             </div>
             
             <div class="controls">
-                <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>
+                    <button id="btnWebm" onclick="setFormat('webm')">🎥 WebM</button>
+                    <button id="btnMp4" onclick="setFormat('mp4')">🎬 MP4</button>
+                </div>
+                
+                <div class="sound-controls">
+                    <button id="btnNone" onclick="setSound('none')" class="active">🔇 None</button>
+                    <button id="btnPygame" onclick="setSound('pygame')">🎮 Pygame</button>
+                    <button id="btnBrowser" onclick="setSound('browser')">🌐 Browser</button>
+                </div>
+                
+                <div class="meter">
+                    <div id="soundMeter" class="meter-fill"></div>
                 </div>
                 
                 <div class="status-panel">
                     <div class="status-item">
-                        <span class="status-label">Current Format:</span>
+                        <span class="status-label">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>
+                        <span class="status-label">Sound:</span>
+                        <span id="currentSource" class="status-value">None</span>
                     </div>
                     <div class="status-item">
-                        <span class="status-label">Stream Status:</span>
-                        <span id="streamStatus" class="status-value">🟢 Active</span>
+                        <span class="status-label">Resolution:</span>
+                        <span class="status-value">{VIDEO_WIDTH}x{VIDEO_HEIGHT}</span>
                     </div>
                 </div>
-                
-                <div class="browser-support" id="supportDetails">
-                    Testing browser capabilities...
-                </div>
-                
-                <div class="info-text">
-                    ⚡ MJPEG: Lowest CPU, universal support<br>
-                    🎥 WebM: Efficient compression, best for Chrome/Firefox<br>
-                    🎬 MP4: Universal support, hardware accelerated
-                </div>
             </div>
         </div>
         
+        <audio id="browserAudio" loop style="display:none;">
+            <source src="/static/sound.mp3" type="audio/mpeg">
+        </audio>
+        
         <script>
             const videoPlayer = document.getElementById('videoPlayer');
             const mjpegImg = document.getElementById('mjpegImg');
+            const browserAudio = document.getElementById('browserAudio');
+            
             let currentFormat = 'mjpeg';
-            let streamActive = true;
+            let currentSource = 'none';
+            let lastMouseSend = 0;
+            
+            // Mouse tracking
+            function handleMouseMove(e) {{
+                const rect = (currentFormat === 'mjpeg' ? mjpegImg : videoPlayer).getBoundingClientRect();
+                const x = Math.round((e.clientX - rect.left) * {VIDEO_WIDTH} / rect.width);
+                const y = Math.round((e.clientY - rect.top) * {VIDEO_HEIGHT} / rect.height);
+                
+                document.getElementById('mouseCoords').innerHTML = `X: ${{x}}, Y: ${{y}}`;
+                
+                const now = Date.now();
+                if (now - lastMouseSend > 33) {{
+                    fetch('/mouse', {{
+                        method: 'POST',
+                        headers: {{'Content-Type': 'application/json'}},
+                        body: JSON.stringify({{x: x, y: y}})
+                    }});
+                    lastMouseSend = now;
+                }}
+            }}
             
-            // 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
-                };
+            // Click handling for button
+            function handleClick(e) {{
+                const rect = (currentFormat === 'mjpeg' ? mjpegImg : videoPlayer).getBoundingClientRect();
+                const x = Math.round((e.clientX - rect.left) * {VIDEO_WIDTH} / rect.width);
+                const y = Math.round((e.clientY - rect.top) * {VIDEO_HEIGHT} / rect.height);
                 
-                let supportText = '';
-                let details = '';
+                fetch('/click', {{
+                    method: 'POST',
+                    headers: {{'Content-Type': 'application/json'}},
+                    body: JSON.stringify({{x: x, y: y}})
+                }});
+            }}
+            
+            videoPlayer.addEventListener('mousemove', handleMouseMove);
+            mjpegImg.addEventListener('mousemove', handleMouseMove);
+            videoPlayer.addEventListener('click', handleClick);
+            mjpegImg.addEventListener('click', handleClick);
+            
+            // Sound handling
+            function setSound(source) {{
+                currentSource = source;
                 
-                if (support.webm) {
-                    supportText += '✓ WebM VP9 ';
-                    details += 'WebM VP9: ' + support.webm + '<br>';
-                }
-                if (support.mp4) {
-                    supportText += '✓ MP4 H.264 ';
-                    details += 'MP4 H.264: ' + support.mp4 + '<br>';
-                }
-                supportText += '✓ MJPEG';
+                document.getElementById('btnNone').className = source === 'none' ? 'active' : '';
+                document.getElementById('btnPygame').className = source === 'pygame' ? 'active' : '';
+                document.getElementById('btnBrowser').className = source === 'browser' ? 'active' : '';
+                document.getElementById('currentSource').innerHTML = 
+                    source.charAt(0).toUpperCase() + source.slice(1);
                 
-                document.getElementById('browserSupport').innerHTML = supportText;
-                document.getElementById('supportDetails').innerHTML = details;
+                if (source === 'browser') {{
+                    browserAudio.play().catch(e => console.log('Audio error:', e));
+                }} else {{
+                    browserAudio.pause();
+                    browserAudio.currentTime = 0;
+                }}
                 
-                return support;
-            }
+                fetch('/sound/source', {{
+                    method: 'POST',
+                    headers: {{'Content-Type': 'application/json'}},
+                    body: JSON.stringify({{source: source}})
+                }});
+            }}
+            
+            // Sound meter
+            function updateSoundMeter() {{
+                fetch('/sound/amp')
+                    .then(res => res.json())
+                    .then(data => {{
+                        document.getElementById('soundMeter').style.width = (data.amp * 100) + '%';
+                    }});
+                setTimeout(updateSoundMeter, 100);
+            }}
+            updateSoundMeter();
             
-            function setFormat(format) {
+            // Format switching
+            function setFormat(format) {{
                 currentFormat = format;
                 
-                // Update button states
                 document.getElementById('btnMjpeg').className = format === 'mjpeg' ? 'active' : '';
                 document.getElementById('btnWebm').className = format === 'webm' ? 'active' : '';
                 document.getElementById('btnMp4').className = format === 'mp4' ? 'active' : '';
-                
                 document.getElementById('currentFormat').innerHTML = format.toUpperCase();
                 
-                // Hide both players first
                 videoPlayer.style.display = 'none';
                 mjpegImg.style.display = 'none';
                 
-                if (format === 'mjpeg') {
-                    // Use img tag for MJPEG
+                if (format === 'mjpeg') {{
                     mjpegImg.style.display = 'block';
-                    mjpegImg.src = '/video/mjpeg?' + Date.now(); // Add timestamp to prevent caching
-                } else {
-                    // Use video tag for WebM/MP4
+                    mjpegImg.src = '/video/mjpeg?' + Date.now();
+                }} else {{
                     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.src = `/video/${{format}}?` + Date.now();
                     videoPlayer.play().catch(e => console.log('Playback error:', e));
-                }
-            }
-            
-            // 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;
-                    };
-                }
-            }
+                }}
+            }}
             
             // Initialize
-            checkBrowserSupport();
-            setFormat('mjpeg');  // Start with MJPEG for reliability
-            checkStreamHealth();
-            
-            // Reconnect on error
-            setInterval(() => {
-                if (!streamActive) {
-                    console.log('Attempting to reconnect...');
-                    setFormat(currentFormat);
-                }
-            }, 5000);
+            setFormat('mjpeg');
+            setSound('none');
         </script>
     </body>
     </html>
     ''')
 
-@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}
-
-@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')
-    return 'Sound not found', 404
-
 if __name__ == '__main__':
     print("\n" + "="*70)
-    print("🎮 Pygame + Multi-format Streaming")
+    print("🎮 Pygame 720p Streaming App")
     print("="*70)
+    print(f"📡 Resolution: {VIDEO_WIDTH}x{VIDEO_HEIGHT} @ {VIDEO_FPS}fps")
     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("   • /video/mjpeg - MJPEG stream")
+    print("   • /video/webm  - WebM stream")
+    print("   • /video/mp4   - MP4 stream")
+    print("🖱️ Interactive: mouse + clickable button")
+    print(f"\n🌐 Main page: /")
     print("="*70 + "\n")
     
-    port = int(os.environ.get('PORT', 7860))
+    port = int(os.environ.get('PORT', STREAM_PORT))
     app.run(host='0.0.0.0', port=port, debug=False, threaded=True)