Modifying output to use H.264.

src/templates/index.html

@@ -38,23 +38,30 @@
             border: 1px solid #333;
             border-radius: 8px;
             overflow: hidden;
+            position: relative;
             display: flex;
             align-items: center;
             justify-content: center;
-            color: #555;
-            font-size: 0.9rem;
         }
 
-        #preview img {
+        #stream-video {
             width: 100%;
             height: 100%;
             object-fit: cover;
             display: none;
         }
 
+        #placeholder {
+            color: #555;
+            font-size: 0.9rem;
+        }
+
         .controls {
             display: flex;
             gap: 1rem;
+            align-items: center;
+            flex-wrap: wrap;
+            justify-content: center;
         }
 
         button {
@@ -94,7 +101,7 @@
 
     <div id="preview">
         <span id="placeholder">Stream not started</span>
-        <img id="stream-img" alt="Camera stream" />
+        <video id="stream-video" autoplay muted playsinline></video>
     </div>
 
     <div class="controls">
@@ -104,39 +111,96 @@
 
     <p id="status"></p>
 
+    <!-- hls.js from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js"></script>
     <script>
         const btnStart = document.getElementById("btn-start");
         const btnStop = document.getElementById("btn-stop");
-        const streamImg = document.getElementById("stream-img");
+        const video = document.getElementById("stream-video");
         const placeholder = document.getElementById("placeholder");
         const status = document.getElementById("status");
 
+        let hls = null;
+
         async function postAction(url) {
             const res = await fetch(url, { method: "POST" });
             return res.json();
         }
 
+        async function waitForReady(maxAttempts = 40) {
+            for (let i = 0; i < maxAttempts; i++) {
+                const res = await fetch("/camera/status");
+                const data = await res.json();
+                if (data.ready) return true;
+                await new Promise(r => setTimeout(r, 500));
+            }
+            return false;
+        }
+
+        function startHls() {
+            const src = "/camera/hls/stream.m3u8";
+
+            if (Hls.isSupported()) {
+                hls = new Hls({
+                    lowLatencyMode: false,
+                    backBufferLength: 10,
+                });
+                hls.loadSource(src);
+                hls.attachMedia(video);
+                hls.on(Hls.Events.ERROR, (event, data) => {
+                    if (data.fatal) {
+                        console.error("HLS fatal error:", data);
+                        status.textContent = "Stream error — try restarting";
+                    }
+                });
+            } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+                // Safari native HLS support
+                video.src = src;
+            } else {
+                status.textContent = "HLS not supported in this browser";
+                return;
+            }
+
+            video.style.display = "block";
+            placeholder.style.display = "none";
+            video.play().catch(e => console.warn("Autoplay blocked:", e));
+        }
+
+        function stopHls() {
+            if (hls) {
+                hls.destroy();
+                hls = null;
+            }
+            video.pause();
+            video.src = "";
+            video.style.display = "none";
+            placeholder.style.display = "block";
+        }
+
         btnStart.addEventListener("click", async () => {
             btnStart.disabled = true;
-            status.textContent = "Starting…";
+            status.textContent = "Starting camera…";
+
             await postAction("/camera/start");
 
-            // small delay to let camera initialise
-            await new Promise(r => setTimeout(r, 500));
+            status.textContent = "Waiting for first segment…";
+            const ready = await waitForReady();
 
-            streamImg.src = "/camera/stream";
-            streamImg.style.display = "block";
-            placeholder.style.display = "none";
+            if (!ready) {
+                status.textContent = "Camera timed out — check Pi logs";
+                btnStart.disabled = false;
+                return;
+            }
+
+            startHls();
             btnStop.disabled = false;
-            status.textContent = "Streaming";
+            status.textContent = "Streaming (H.264 / HLS)";
         });
 
         btnStop.addEventListener("click", async () => {
             btnStop.disabled = true;
             status.textContent = "Stopping…";
-            streamImg.style.display = "none";
-            streamImg.src = "";
-            placeholder.style.display = "block";
+            stopHls();
             await postAction("/camera/stop");
             btnStart.disabled = false;
             status.textContent = "Stream stopped";