config: Add 3 and update 5 files

squashkiwi-streaming/config/docker-compose.yml

@@ -18,18 +18,45 @@ services:
       MTX_PATHS_COURT_MAIN_RECORDFORMAT: fmp4
       MTX_PATHS_COURT_MAIN_RECORDSEGMENTDURATION: 1h
       MTX_PATHS_COURT_MAIN_RECORDDELETEAFTER: 24h
-      # Sub stream configuration  
+      # Sub stream configuration (usually H264)
       MTX_PATHS_COURT_SUB_SOURCE: ${MTX_PATHS_COURT_SUB_SOURCE}
       MTX_PATHS_COURT_SUB_SOURCEPROTOCOL: tcp
-      # Legacy court path - use substream for better compatibility
+      # Legacy court path - original H265 stream
-      MTX_PATHS_COURT_SOURCE: ${MTX_PATHS_COURT_SUB_SOURCE}
+      MTX_PATHS_COURT_SOURCE: ${MTX_PATHS_COURT_SOURCE}
       MTX_PATHS_COURT_SOURCEPROTOCOL: tcp
+      # Force all paths to start immediately
+      MTX_PATHDEFAULTS_SOURCEONDEMAND: "no"
+      # Disable all authentication
+      MTX_PATHDEFAULTS_PUBLISHUSER: ""
+      MTX_PATHDEFAULTS_PUBLISHPASS: ""
+      MTX_PATHDEFAULTS_READUSER: ""
+      MTX_PATHDEFAULTS_READPASS: ""
     healthcheck:
       test: ["CMD", "wget", "-q", "-O", "-", "http://localhost:9997/v2/paths/list"]
       interval: 30s
       timeout: 10s
       retries: 3
 
+  # FFmpeg transcoder for H265 to H264
+  transcoder:
+    image: linuxserver/ffmpeg:latest
+    container_name: ${PROJECT_NAME}-transcoder
+    restart: unless-stopped
+    network_mode: host
+    command: >
+      -re
+      -rtsp_transport tcp
+      -i rtsp://localhost:8554/court
+      -c:v libx264
+      -preset ultrafast
+      -tune zerolatency
+      -b:v 2M
+      -f rtsp
+      -rtsp_transport tcp
+      rtsp://localhost:8554/court_h264
+    depends_on:
+      - mediamtx
+
   # Score overlay and recording service
   overlay-service:
     build: ./overlay
@@ -58,8 +85,7 @@ services:
     image: nginx:alpine
     container_name: ${PROJECT_NAME}-nginx
     restart: unless-stopped
-    ports:
+    network_mode: host
-      - "${HOST_PORT}:80"
     volumes:
       - ./nginx.conf:/etc/nginx/nginx.conf:ro
       - ./web:/usr/share/nginx/html:ro

squashkiwi-streaming/config/mediamtx.yml

@@ -4,9 +4,13 @@
 logLevel: info
 logDestinations: [stdout]
 
+# Authentication - disable for public access
+authMethod: none
+
 # API Configuration
 api: yes
 apiAddress: :9997
+apiAllowOrigin: '*'
 
 # Metrics
 metrics: yes
@@ -31,6 +35,7 @@ webrtcAddress: :8889
 webrtcAllowOrigin: '*'
 
 # Path Configuration
-# Paths are configured entirely via environment variables in docker-compose.yml
+paths:
-# This allows dynamic configuration without modifying this file
+  # Transcoded H264 stream
-paths: {}
+  court_h264:
+    # This path will receive the transcoded stream from ffmpeg

squashkiwi-streaming/config/nginx.conf

@@ -16,7 +16,7 @@ http {
     proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=hls_cache:10m max_size=1g inactive=60m use_temp_path=off;
 
     server {
-        listen 80;
+        listen 8880;
         server_name _;
 
         root /usr/share/nginx/html;
@@ -37,7 +37,7 @@ http {
 
         # HLS streams proxy
         location /hls/ {
-            proxy_pass http://localhost:8888/;
+            proxy_pass http://[::1]:8888/;
             proxy_http_version 1.1;
             
             # CORS headers
@@ -54,22 +54,36 @@ http {
             proxy_request_buffering off;
         }
 
-        # WebRTC signaling
+        # WebRTC signaling (WHEP)
         location /webrtc/ {
-            proxy_pass http://localhost:8889/;
+            proxy_pass http://[::1]:8889/;
             proxy_http_version 1.1;
-            proxy_set_header Upgrade $http_upgrade;
+            
-            proxy_set_header Connection "upgrade";
+            # CORS headers for WebRTC
+            add_header Access-Control-Allow-Origin * always;
+            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PATCH, DELETE" always;
+            add_header Access-Control-Allow-Headers "Authorization, Content-Type, If-Match" always;
+            add_header Access-Control-Expose-Headers "Link" always;
+            
+            # Handle OPTIONS preflight
+            if ($request_method = OPTIONS) {
+                return 204;
+            }
+            
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
             
+            proxy_buffering off;
+            proxy_request_buffering off;
             proxy_read_timeout 86400;
             proxy_send_timeout 86400;
         }
 
         # MediaMTX API
         location /api/mediamtx/ {
-            proxy_pass http://localhost:9997/;
+            proxy_pass http://[::1]:9997/;
             allow 127.0.0.1;
             allow 172.16.0.0/12;
             deny all;

squashkiwi-streaming/config/web/index.html

@@ -170,7 +170,7 @@
 
     <script>
         const config = {
-            courtId: new URLSearchParams(window.location.search).get('court') || 'court',
+            courtId: new URLSearchParams(window.location.search).get('court') || 'court_h264',
             hlsUrl: '/hls/'
         };
 

squashkiwi-streaming/config/web/test.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stream Test</title>
+    <style>
+        body {
+            font-family: monospace;
+            padding: 20px;
+            background: #1a1a1a;
+            color: #0f0;
+        }
+        .test-section {
+            margin: 20px 0;
+            padding: 15px;
+            border: 1px solid #0f0;
+            background: #000;
+        }
+        button {
+            background: #0f0;
+            color: #000;
+            border: none;
+            padding: 10px 20px;
+            margin: 5px;
+            cursor: pointer;
+            font-family: monospace;
+            font-weight: bold;
+        }
+        button:hover {
+            background: #0a0;
+        }
+        .status {
+            margin: 10px 0;
+            padding: 10px;
+            background: #111;
+        }
+        .success { color: #0f0; }
+        .error { color: #f00; }
+        .info { color: #ff0; }
+    </style>
+</head>
+<body>
+    <h1>SquashKiwi Stream Test Page</h1>
+    
+    <div class="test-section">
+        <h2>Available Paths</h2>
+        <button onclick="checkPaths()">Check MediaMTX Paths</button>
+        <div id="paths-status" class="status">Click to check available paths...</div>
+    </div>
+
+    <div class="test-section">
+        <h2>Test Streams</h2>
+        <button onclick="testStream('court')">Test 'court' (H265)</button>
+        <button onclick="testStream('court_h264')">Test 'court_h264'</button>
+        <button onclick="testStream('court_sub')">Test 'court_sub'</button>
+        <button onclick="testStream('court_main')">Test 'court_main'</button>
+        <div id="stream-status" class="status">Select a stream to test...</div>
+    </div>
+
+    <div class="test-section">
+        <h2>HLS Test</h2>
+        <video id="hls-video" controls style="width: 100%; max-width: 600px;"></video>
+        <div id="hls-status" class="status">HLS player ready...</div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <script>
+        async function checkPaths() {
+            const status = document.getElementById('paths-status');
+            status.innerHTML = '<span class="info">Checking paths...</span>';
+            
+            try {
+                // Try direct access to MediaMTX API on port 9997
+                const response = await fetch('http://' + window.location.hostname + ':9997/v3/paths/list');
+                const data = await response.json();
+                
+                let html = '<span class="success">Found ' + data.itemCount + ' path(s):</span><br>';
+                data.items.forEach(item => {
+                    html += `<br>Path: <b>${item.name}</b>`;
+                    html += `<br>  Ready: ${item.ready ? '✓' : '✗'}`;
+                    html += `<br>  Tracks: ${item.tracks ? item.tracks.join(', ') : 'none'}`;
+                    html += `<br>  Readers: ${item.readers ? item.readers.length : 0}`;
+                    html += '<br>';
+                });
+                status.innerHTML = html;
+            } catch (error) {
+                status.innerHTML = '<span class="error">Error: ' + error.message + '</span>';
+            }
+        }
+
+        async function testStream(streamName) {
+            const status = document.getElementById('stream-status');
+            const video = document.getElementById('hls-video');
+            
+            status.innerHTML = `<span class="info">Testing stream: ${streamName}...</span>`;
+            
+            // Test HLS
+            const hlsUrl = `/hls/${streamName}/index.m3u8`;
+            status.innerHTML += `<br>HLS URL: ${hlsUrl}`;
+            
+            try {
+                const response = await fetch(hlsUrl, { method: 'HEAD' });
+                if (response.ok) {
+                    status.innerHTML += '<br><span class="success">HLS playlist exists!</span>';
+                    loadHLS(hlsUrl);
+                } else {
+                    status.innerHTML += `<br><span class="error">HLS playlist not found (${response.status})</span>`;
+                }
+            } catch (error) {
+                status.innerHTML += '<br><span class="error">HLS test failed: ' + error.message + '</span>';
+            }
+            
+            // Test WebRTC
+            const webrtcUrl = `/webrtc/${streamName}/whep`;
+            status.innerHTML += `<br><br>WebRTC URL: ${webrtcUrl}`;
+            
+            try {
+                const response = await fetch(webrtcUrl, { method: 'OPTIONS' });
+                if (response.ok) {
+                    status.innerHTML += '<br><span class="success">WebRTC endpoint exists!</span>';
+                } else {
+                    status.innerHTML += `<br><span class="error">WebRTC endpoint issue (${response.status})</span>`;
+                }
+            } catch (error) {
+                status.innerHTML += '<br><span class="error">WebRTC test failed: ' + error.message + '</span>';
+            }
+        }
+
+        function loadHLS(url) {
+            const video = document.getElementById('hls-video');
+            const status = document.getElementById('hls-status');
+            
+            if (Hls.isSupported()) {
+                const hls = new Hls();
+                hls.loadSource(url);
+                hls.attachMedia(video);
+                
+                hls.on(Hls.Events.MANIFEST_PARSED, function() {
+                    status.innerHTML = '<span class="success">HLS stream loaded! Press play to start.</span>';
+                    video.play().catch(e => {
+                        status.innerHTML += '<br><span class="info">Auto-play blocked. Click play button.</span>';
+                    });
+                });
+                
+                hls.on(Hls.Events.ERROR, function(event, data) {
+                    if (data.fatal) {
+                        status.innerHTML = '<span class="error">HLS Error: ' + data.details + '</span>';
+                    }
+                });
+            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                video.src = url;
+                status.innerHTML = '<span class="info">Using native HLS support</span>';
+            } else {
+                status.innerHTML = '<span class="error">HLS not supported in this browser</span>';
+            }
+        }
+
+        // Check paths on load
+        window.onload = () => {
+            checkPaths();
+        };
+    </script>
+</body>
+</html>

squashkiwi-streaming/config/web/webrtc.html

@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SquashKiwi Court Stream - WebRTC</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: white;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        header {
+            text-align: center;
+            padding: 30px 0;
+        }
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+        .video-section {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            overflow: hidden;
+            backdrop-filter: blur(10px);
+            margin-bottom: 20px;
+        }
+        .video-container {
+            position: relative;
+            padding-bottom: 56.25%;
+            height: 0;
+            background: black;
+        }
+        video {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .video-controls {
+            padding: 15px;
+            background: rgba(0, 0, 0, 0.3);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .status-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 20px;
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+        .status-badge.live {
+            background: rgba(76, 175, 80, 0.3);
+        }
+        .status-badge.offline {
+            background: rgba(244, 67, 54, 0.3);
+        }
+        .btn {
+            padding: 8px 16px;
+            background: rgba(255, 255, 255, 0.2);
+            border: none;
+            color: white;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.85rem;
+        }
+        .btn:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+        .info-section {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            padding: 20px;
+            backdrop-filter: blur(10px);
+            margin-bottom: 20px;
+        }
+        .switch-link {
+            text-align: center;
+            padding: 10px;
+        }
+        .switch-link a {
+            color: white;
+            text-decoration: none;
+            background: rgba(255, 255, 255, 0.2);
+            padding: 8px 16px;
+            border-radius: 4px;
+            display: inline-block;
+        }
+        .switch-link a:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🎾 SquashKiwi Court Stream (WebRTC)</h1>
+        </header>
+
+        <div class="video-section">
+            <div class="video-container">
+                <video id="video" controls autoplay muted></video>
+            </div>
+            <div class="video-controls">
+                <div class="status-badge offline" id="status">
+                    <span>Connecting...</span>
+                </div>
+                <div>
+                    <button class="btn" onclick="toggleFullscreen()">📺 Fullscreen</button>
+                    <button class="btn" onclick="refreshStream()">🔄 Refresh</button>
+                </div>
+            </div>
+        </div>
+
+        <div class="switch-link">
+            <a href="/">Switch to HLS Player</a>
+        </div>
+
+        <div class="info-section">
+            <h2>WebRTC Stream</h2>
+            <p>This player uses WebRTC for lower latency streaming. It should work with H265/HEVC streams.</p>
+        </div>
+    </div>
+
+    <script>
+        const config = {
+            courtId: new URLSearchParams(window.location.search).get('court') || 'court_h264',
+            webrtcUrl: '/webrtc/'
+        };
+
+        let pc = null;
+
+        async function initPlayer() {
+            const video = document.getElementById('video');
+            
+            pc = new RTCPeerConnection({
+                iceServers: [{urls: 'stun:stun.l.google.com:19302'}]
+            });
+
+            // Add transceiver for receiving video
+            pc.addTransceiver('video', {direction: 'recvonly'});
+            pc.addTransceiver('audio', {direction: 'recvonly'});
+
+            pc.ontrack = (event) => {
+                console.log('Got track:', event.track.kind);
+                video.srcObject = event.streams[0];
+                updateStatus(true);
+            };
+
+            pc.oniceconnectionstatechange = () => {
+                console.log('ICE connection state:', pc.iceConnectionState);
+                if (pc.iceConnectionState === 'disconnected' || pc.iceConnectionState === 'failed') {
+                    updateStatus(false);
+                    setTimeout(refreshStream, 5000);
+                }
+            };
+
+            // Create offer with ICE candidates
+            const offer = await pc.createOffer();
+            await pc.setLocalDescription(offer);
+
+            // Wait for ICE gathering to complete
+            await new Promise((resolve) => {
+                if (pc.iceGatheringState === 'complete') {
+                    resolve();
+                } else {
+                    pc.onicegatheringstatechange = () => {
+                        if (pc.iceGatheringState === 'complete') {
+                            resolve();
+                        }
+                    };
+                    // Timeout after 2 seconds
+                    setTimeout(resolve, 2000);
+                }
+            });
+
+            // Send complete offer with ICE candidates to MediaMTX
+            try {
+                const response = await fetch(`${config.webrtcUrl}${config.courtId}/whep`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/sdp'
+                    },
+                    body: pc.localDescription.sdp
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const answer = await response.text();
+                await pc.setRemoteDescription({
+                    type: 'answer',
+                    sdp: answer
+                });
+
+                console.log('WebRTC connection established');
+            } catch (error) {
+                console.error('WebRTC error:', error);
+                updateStatus(false);
+                setTimeout(refreshStream, 5000);
+            }
+        }
+
+        function updateStatus(live) {
+            const statusEl = document.getElementById('status');
+            if (live) {
+                statusEl.className = 'status-badge live';
+                statusEl.innerHTML = '<span>🔴 LIVE</span>';
+            } else {
+                statusEl.className = 'status-badge offline';
+                statusEl.innerHTML = '<span>⚫ OFFLINE</span>';
+            }
+        }
+
+        function toggleFullscreen() {
+            const video = document.getElementById('video');
+            if (!document.fullscreenElement) {
+                video.requestFullscreen().catch(err => {
+                    console.error('Fullscreen error:', err);
+                });
+            } else {
+                document.exitFullscreen();
+            }
+        }
+
+        function refreshStream() {
+            if (pc) {
+                pc.close();
+            }
+            initPlayer();
+        }
+
+        // Initialize player on load
+        initPlayer();
+    </script>
+</body>
+</html>

squashkiwi-streaming/install.sh

@@ -30,7 +30,7 @@ cat > "${LOCAL_DATA_FOLDER}/config/.env" <<EOF
 # Auto-generated environment file for docker-compose
 PROJECT_NAME=${PROJECT_NAME}
 RECORDINGS_FOLDER=${RECORDINGS_FOLDER}
-MTX_PATHS_COURT_SOURCE=rtsp://${CAMERA_USER}:${CAMERA_PASSWORD}@${CAMERA_IP}:${CAMERA_RTSP_PORT}/cam/realmonitor?channel=1&subtype=1
+MTX_PATHS_COURT_SOURCE=rtsp://${CAMERA_USER}:${CAMERA_PASSWORD}@${CAMERA_IP}:${CAMERA_RTSP_PORT}/cam/realmonitor?channel=1&subtype=0
 MTX_PATHS_COURT_MAIN_SOURCE=rtsp://${CAMERA_USER}:${CAMERA_PASSWORD}@${CAMERA_IP}:${CAMERA_RTSP_PORT}/cam/realmonitor?channel=1&subtype=0
 MTX_PATHS_COURT_SUB_SOURCE=rtsp://${CAMERA_USER}:${CAMERA_PASSWORD}@${CAMERA_IP}:${CAMERA_RTSP_PORT}/cam/realmonitor?channel=1&subtype=1
 SQUASHKIWI_API=${SQUASHKIWI_API}

squashkiwi-streaming/test-substream.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+# Test script to check substream codec
+
+echo "Testing substream codec..."
+echo "RTSP URL: rtsp://admin:Squashkiwiaynsley1!@10.10.1.12:554/cam/realmonitor?channel=1&subtype=1"
+
+# Use curl to get stream info
+timeout 5 curl -I "rtsp://admin:Squashkiwiaynsley1%21@10.10.1.12:554/cam/realmonitor?channel=1&subtype=1" 2>&1 | head -20
+
+echo ""
+echo "Note: The substream (subtype=1) on Dahua cameras is typically H264"
+echo "while the main stream (subtype=0) is H265"