made changes

Dockerfile

@@ -1,16 +1,13 @@
-# Optimized Dockerfile for Dance Movement Analyzer
-# Fixes MediaPipe models and FFmpeg H.264 encoder issues
-
+# Optimized Dockerfile with full H.264 support
 FROM python:3.10-slim
 
-# Set environment variables
 ENV PYTHONUNBUFFERED=1 \
     PYTHONDONTWRITEBYTECODE=1 \
     PIP_NO_CACHE_DIR=1 \
     PIP_DISABLE_PIP_VERSION_CHECK=1 \
     DEBIAN_FRONTEND=noninteractive
 
-# Install system dependencies including FFmpeg with H.264 support
+# Install system dependencies with full ffmpeg and x264
 RUN apt-get update && apt-get install -y --no-install-recommends \
     libgl1 \
     libglib2.0-0 \
@@ -20,13 +17,14 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     libgomp1 \
     ffmpeg \
     libavcodec-extra \
+    libx264-dev \
     curl \
+    wget \
     && rm -rf /var/lib/apt/lists/*
 
 # Verify FFmpeg has H.264 encoder
-RUN ffmpeg -codecs | grep h264 || echo "Warning: H.264 encoder may not be available"
+RUN ffmpeg -codecs 2>/dev/null | grep -i h264 || echo "H.264 codec not available, will use fallback"
 
-# Create app directory
 WORKDIR /app
 
 # Copy and install Python dependencies
@@ -34,58 +32,38 @@ COPY backend/requirements.txt .
 RUN pip install --no-cache-dir --upgrade pip && \
     pip install --no-cache-dir -r requirements.txt
 
-# Pre-download MediaPipe models (as root, before creating non-root user)
+# Pre-download MediaPipe models
 RUN echo "Downloading MediaPipe Pose models..." && \
     python3 -c "import mediapipe as mp; \
-    print('Downloading Lite model...'); \
-    pose0 = mp.solutions.pose.Pose(model_complexity=0, min_detection_confidence=0.5); \
-    pose0.close(); \
-    print('✅ Lite model downloaded'); \
-    print('Downloading Full model...'); \
-    pose1 = mp.solutions.pose.Pose(model_complexity=1, min_detection_confidence=0.5); \
-    pose1.close(); \
-    print('✅ Full model downloaded'); \
-    print('Downloading Heavy model...'); \
-    pose2 = mp.solutions.pose.Pose(model_complexity=2, min_detection_confidence=0.5); \
-    pose2.close(); \
-    print('✅ Heavy model downloaded'); \
-    print('✅ All models pre-downloaded successfully');" && \
-    echo "MediaPipe models downloaded successfully"
+    pose0 = mp.solutions.pose.Pose(model_complexity=0, min_detection_confidence=0.5); pose0.close(); \
+    pose1 = mp.solutions.pose.Pose(model_complexity=1, min_detection_confidence=0.5); pose1.close(); \
+    pose2 = mp.solutions.pose.Pose(model_complexity=2, min_detection_confidence=0.5); pose2.close(); \
+    print('✅ All models pre-downloaded');" && \
+    echo "MediaPipe models downloaded"
 
-# Set proper permissions for MediaPipe models directory
+# Set permissions
 RUN chmod -R 755 /usr/local/lib/python3.10/site-packages/mediapipe
 
-# Create necessary directories
+# Create directories
 RUN mkdir -p /app/uploads /app/outputs /app/logs
 
-# Copy application files
+# Copy application
 COPY backend/app /app/app
 COPY frontend /app/frontend
-
-# Copy startup script
 COPY startup.sh /app/startup.sh
 RUN chmod +x /app/startup.sh
 
 # Create non-root user
-RUN useradd -m -u 1000 appuser
-
-# Set ownership of app directory
-RUN chown -R appuser:appuser /app
-
-# IMPORTANT: Keep MediaPipe models readable by non-root user
-RUN chmod -R 755 /usr/local/lib/python3.10/site-packages/mediapipe && \
+RUN useradd -m -u 1000 appuser && \
+    chown -R appuser:appuser /app && \
+    chmod -R 755 /usr/local/lib/python3.10/site-packages/mediapipe && \
     chown -R root:root /usr/local/lib/python3.10/site-packages/mediapipe
 
-# Switch to non-root user
 USER appuser
 
-# Expose ports
-EXPOSE 7860
-EXPOSE 8000
+EXPOSE 7860 8000
 
-# Health check
 HEALTHCHECK --interval=30s --timeout=10s --start-period=5m --retries=3 \
     CMD python -c "import requests; requests.get('http://localhost:7860/health')" || exit 1
 
-# Start application
 CMD ["/app/startup.sh"]

backend/app/main.py

@@ -503,25 +503,30 @@ async def download_video(session_id: str):
     if not output_path.exists():
         raise HTTPException(status_code=404, detail="Output file not found")
     
-    # ✅ Use StreamingResponse to support range requests (needed by HTML5 video)
+    # Get file size for Content-Length header
+    file_size = output_path.stat().st_size
+    
+    # Use StreamingResponse with proper headers for browser video playback
     def iterfile():
         with open(output_path, mode="rb") as file_like:
-            yield from file_like
+            chunk_size = 8192  # 8KB chunks
+            while True:
+                chunk = file_like.read(chunk_size)
+                if not chunk:
+                    break
+                yield chunk
 
     return StreamingResponse(
         iterfile(),
-        media_type="video/mp4",  # ✅ Ensure correct MIME type
+        media_type="video/mp4",
         headers={
-            "Accept-Ranges": "bytes",  # ✅ Allow browser seeking
-            "Content-Disposition": f'inline; filename="analyzed_{session["filename"]}"'
+            "Accept-Ranges": "bytes",
+            "Content-Length": str(file_size),
+            "Content-Disposition": f'inline; filename="analyzed_{session["filename"]}"',
+            "Cache-Control": "no-cache",
+            "X-Content-Type-Options": "nosniff"
         }
     )
-    
-    # return FileResponse(
-    #     path=output_path,
-    #     media_type="video/mp4",
-    #     filename=f"analyzed_{session['filename']}"
-    # )
 
 
 @app.websocket("/ws/{session_id}")

backend/app/video_processor.py

@@ -112,25 +112,12 @@ class VideoProcessor:
         # Open video for reading
         cap = cv2.VideoCapture(str(video_path))
         
-        # Setup video writer
-        # # fourcc = cv2.VideoWriter_fourcc(*'mp4v')
-        # fourcc = cv2.VideoWriter_fourcc(*Config.OUTPUT_VIDEO_CODEC)
-        # out = cv2.VideoWriter(
-        #     str(output_path),
-        #     fourcc,
-        #     video_info['fps'],
-        #     (video_info['width'], video_info['height'])
-        # )
-        
-        # if not out.isOpened():
-        #     raise ValueError(f"Cannot create output video: {output_path}")
-
         # Setup video writer with codec fallback
         codecs_to_try = [
-            ('mp4v', 'MPEG-4'),          # Best compatibility
-            ('avc1', 'H.264'),           # High quality (if available)
-            ('XVID', 'Xvid'),            # Fallback option
-            ('MJPG', 'Motion JPEG')      # Last resort
+            ('avc1', 'H.264'),           # Try H.264 first
+            ('mp4v', 'MPEG-4'),          # Fallback to MPEG-4
+            ('XVID', 'Xvid'),
+            ('MJPG', 'Motion JPEG')
         ]
 
         out = None

frontend/index.html

@@ -100,16 +100,26 @@
                         </div>
                         <div class="video-container">
                             <h3>Analyzed Video</h3>
-                            <!-- <video id="analyzedVideo" controls></video> -->
-                             <video id="analyzedVideo" controls preload="metadata" playsinline>
+                            <video 
+                                id="analyzedVideo" 
+                                controls 
+                                preload="metadata" 
+                                playsinline
+                                style="max-width: 100%; height: auto; background: #000;">
                                 Your browser does not support the video tag.
                             </video>
-                            <div class="video-fallback" id="videoFallback" style="display: none; background: #ffebee; padding: 10px; border-radius: 5px; margin-top: 10px;">
-                                <p>Video cannot be played in browser. <a id="downloadFallback" href="#" style="color: #ef4444; font-weight: bold;">Download instead</a></p>
+                            <div class="video-fallback" id="videoFallback" style="display: none; background: #ffebee; padding: 15px; border-radius: 8px; margin-top: 10px; text-align: center;">
+                                <p style="margin: 0 0 10px 0; color: #c62828; font-weight: 500;">
+                                    ⚠️ Video cannot be played in browser
+                                </p>
+                                <a 
+                                    id="downloadFallback" 
+                                    href="#" 
+                                    download
+                                    style="display: inline-block; padding: 10px 20px; background: #ef4444; color: white; text-decoration: none; border-radius: 6px; font-weight: bold; transition: background 0.3s;">
+                                    💾 Download Video Instead
+                                </a>
                             </div>
-                            <!-- <button class="btn btn-download" id="downloadBtn">
-                                💾 Download
-                            </button> -->
                         </div>
                     </div>
                 </div>

frontend/js/app.js

@@ -322,7 +322,6 @@ async function handleAnalysisComplete(message) {
         
     } catch (error) {
         console.error('Error fetching results:', error);
-        // Fallback to message results if API call fails
         AppState.results = message.results;
     }
     
@@ -330,11 +329,34 @@ async function handleAnalysisComplete(message) {
     elements.processingSection.style.display = 'none';
     elements.resultsSection.style.display = 'block';
     
-    // Load analyzed video
+    // Load analyzed video with proper error handling
     const videoUrl = `${API_BASE_URL}/api/download/${AppState.sessionId}`;
+    
+    // Set up error handler BEFORE setting src
+    elements.analyzedVideo.onerror = (e) => {
+        console.error("Analyzed video failed to load:", e);
+        console.log("Video URL:", videoUrl);
+        elements.videoFallback.style.display = 'block';
+        elements.analyzedVideo.style.display = 'none';
+        document.getElementById('downloadFallback').href = videoUrl;
+        document.getElementById('downloadFallback').download = `analyzed_${AppState.uploadedFile?.name || 'video.mp4'}`;
+    };
+    
+    // Set up success handler
+    elements.analyzedVideo.onloadedmetadata = () => {
+        console.log("✅ Analyzed video loaded successfully");
+        console.log("Video duration:", elements.analyzedVideo.duration);
+        console.log("Video dimensions:", elements.analyzedVideo.videoWidth, 'x', elements.analyzedVideo.videoHeight);
+        elements.videoFallback.style.display = 'none';
+        elements.analyzedVideo.style.display = 'block';
+    };
+    
+    // Set video source
+    console.log("Loading analyzed video from:", videoUrl);
     elements.analyzedVideo.src = videoUrl;
+    elements.analyzedVideo.load(); // Force reload
     
-    // Display results with full data
+    // Display results
     displayResults(AppState.results);
     
     // Setup video sync