letteka/birdcam
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Updating html to allow for multiple clients

Browse Source
This commit is contained in:
Andrew Kettel
2026-03-18 10:43:13 -07:00
parent 91dcdc4825
commit 9f055f6fa3
1 changed files with 278 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

451
src/templates/index.html
View File

@@ -2,210 +2,315 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pi Camera</title> <title>Pi Camera</title>
<style> <style>
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body {
font-family: sans-serif; font-family: sans-serif;
background: #0f0f0f; background: #0f0f0f;
color: #f0f0f0; color: #f0f0f0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
gap: 1.5rem; gap: 1.5rem;
padding: 2rem; padding: 2rem;
} }
h1 { h1 {
font-size: 1.4rem; font-size: 1.4rem;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
#preview { #preview {
width: 100%; width: 100%;
max-width: 720px; max-width: 720px;
aspect-ratio: 16/9; aspect-ratio: 16/9;
background: #1a1a1a; background: #1a1a1a;
border: 1px solid #333; border: 1px solid #333;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
#stream-video { #stream-video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
display: none; display: none;
} }
#placeholder { #placeholder {
color: #555; color: #555;
font-size: 0.9rem; font-size: 0.9rem;
} }
.controls { .controls {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
button { button {
padding: 0.6rem 2rem; padding: 0.6rem 2rem;
font-size: 1rem; font-size: 1rem;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
button:disabled { button:disabled {
opacity: 0.35; opacity: 0.35;
cursor: not-allowed; cursor: not-allowed;
} }
#btn-start { #btn-start {
background: #22c55e; background: #22c55e;
color: #000; color: #000;
} }
#btn-stop { #btn-stop {
background: #ef4444; background: #ef4444;
color: #fff; color: #fff;
} }
#status { #status {
font-size: 0.85rem; font-size: 0.85rem;
color: #888; color: #888;
min-height: 1.2em; min-height: 1.2em;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>Pi Camera Stream</h1> <h1>Pi Camera</h1>
<div id="preview"> <div id="preview">
<span id="placeholder">Stream not started</span> <div id="placeholder">
<video id="stream-video" autoplay muted playsinline></video> <div class="dot" id="status-dot"></div>
<span id="placeholder-text">Checking stream...</span>
</div> </div>
<video id="stream-video" autoplay muted playsinline></video>
</div>
<div class="controls"> <div class="controls" id="controls"></div>
<button id="btn-start">Start</button>
<button id="btn-stop" disabled>Stop</button>
</div>
<p id="status"></p> <p id="status"></p>
<!-- hls.js from CDN --> <!-- hls.js from CDN -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js"></script>
<script> <script>
const btnStart = document.getElementById("btn-start"); const video = document.getElementById("stream-video");
const btnStop = document.getElementById("btn-stop"); const placeholder = document.getElementById("placeholder");
const video = document.getElementById("stream-video"); const placeholderText = document.getElementById("placeholder-text");
const placeholder = document.getElementById("placeholder"); const statusDot = document.getElementById("status-dot");
const status = document.getElementById("status"); const controls = document.getElementById("controls");
const statusEl = document.getElementById("status");
let hls = null; let hls = null;
let pollInterval = null;
async function postAction(url) { function renderControls(running) {
const res = await fetch(url, { method: "POST" }); controls.innerHTML = "";
return res.json();
}
async function waitForReady(maxAttempts = 40) { if (running) {
for (let i = 0; i < maxAttempts; i++) { const stop = document.createElement("button");
const res = await fetch("/camera/status"); stop.id = "btn-stop";
const data = await res.json(); stop.textContent = "Stop";
if (data.ready) return true; stop.addEventListener("click", stopStream);
await new Promise(r => setTimeout(r, 500)); controls.appendChild(stop);
}
return false;
}
function startHls() { const badge = document.createElement("span");
const src = "/camera/hls/stream.m3u8"; badge.className = "badge live";
badge.textContent = "● Live";
controls.appendChild(badge);
} else {
const start = document.createElement("button");
start.id = "btn-start";
start.textContent = "Start";
start.addEventListener("click", startStream);
controls.appendChild(start);
}
}
if (Hls.isSupported()) { function showOffline(message = "Stream is offline") {
hls = new Hls({ video.style.display = "none";
lowLatencyMode: false, video.src = "";
backBufferLength: 10, placeholder.style.display = "flex";
}); placeholderText.textContent = message;
hls.loadSource(src); statusDot.classList.remove("live");
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"; function showLive() {
placeholder.style.display = "none"; placeholder.style.display = "none";
video.play().catch(e => console.warn("Autoplay blocked:", e)); video.style.display = "block";
} statusDot.classList.add("live");
}
function stopHls() { // ── HLS ─────────────────────────────────────────────────────────────────
if (hls) {
hls.destroy();
hls = null;
}
video.pause();
video.src = "";
video.style.display = "none";
placeholder.style.display = "block";
}
btnStart.addEventListener("click", async () => { function startHls() {
btnStart.disabled = true; const src = "/camera/hls/stream.m3u8";
status.textContent = "Starting camera…";
await postAction("/camera/start"); if (hls) { hls.destroy(); hls = null; }
status.textContent = "Waiting for first segment…"; if (Hls.isSupported()) {
const ready = await waitForReady(); hls = new Hls({ lowLatencyMode: false, backBufferLength: 10 });
hls.loadSource(src);
if (!ready) { hls.attachMedia(video);
status.textContent = "Camera timed out — check Pi logs"; hls.on(Hls.Events.MANIFEST_PARSED, () => {
btnStart.disabled = false; video.play().catch(e => console.warn("Autoplay blocked:", e));
return; showLive();
} setStatus("Streaming");
startHls();
btnStop.disabled = false;
status.textContent = "Streaming (H.264 / HLS)";
}); });
hls.on(Hls.Events.ERROR, (event, data) => {
btnStop.addEventListener("click", async () => { if (data.fatal) {
btnStop.disabled = true; console.error("HLS fatal error:", data);
status.textContent = "Stopping…"; showOffline("Stream error — reloading...");
stopHls(); setTimeout(attachToStream, 3000);
await postAction("/camera/stop"); }
btnStart.disabled = false;
status.textContent = "Stream stopped";
}); });
</script> } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = src;
video.play().catch(e => console.warn("Autoplay blocked:", e));
showLive();
setStatus("Streaming");
} else {
setStatus("HLS not supported in this browser");
}
}
function stopHls() {
if (hls) { hls.destroy(); hls = null; }
video.pause();
video.src = "";
video.style.display = "none";
}
// ── Status polling ───────────────────────────────────────────────────────
async function fetchStatus() {
const res = await fetch("/camera/status");
return res.json();
}
function setStatus(msg) {
statusEl.textContent = msg;
}
async function waitForReady(maxAttempts = 40) {
for (let i = 0; i < maxAttempts; i++) {
const data = await fetchStatus();
if (data.ready) return true;
await new Promise(r => setTimeout(r, 500));
}
return false;
}
// Called on page load and after stream errors — attach if already live
async function attachToStream() {
const data = await fetchStatus();
if (data.ready) {
startHls();
renderControls(true);
} else if (data.running) {
setStatus("Stream starting...");
placeholderText.textContent = "Stream starting...";
const ready = await waitForReady();
if (ready) {
startHls();
renderControls(true);
} else {
showOffline("Stream timed out");
renderControls(false);
}
} else {
showOffline("Stream is offline");
renderControls(false);
}
}
function startOfflinePoll() {
stopOfflinePoll();
pollInterval = setInterval(async () => {
const data = await fetchStatus();
if (data.running || data.ready) {
stopOfflinePoll();
await attachToStream();
}
}, 5000);
}
function stopOfflinePoll() {
if (pollInterval) { clearInterval(pollInterval); pollInterval = null; }
}
// ── Stream start / stop ──────────────────────────────────────────────────
async function startStream() {
// guard: re-check status in case another client just started it
const current = await fetchStatus();
if (current.running || current.ready) {
await attachToStream();
return;
}
const btn = document.getElementById("btn-start");
if (btn) btn.disabled = true;
setStatus("Starting camera...");
placeholderText.textContent = "Starting...";
await fetch("/camera/start", { method: "POST" });
setStatus("Waiting for first segment...");
const ready = await waitForReady();
if (!ready) {
showOffline("Camera timed out — check Pi logs");
renderControls(false);
startOfflinePoll();
return;
}
startHls();
renderControls(true);
stopOfflinePoll();
}
async function stopStream() {
stopHls();
showOffline("Stream is offline");
setStatus("Stopping...");
renderControls(false);
await fetch("/camera/stop", { method: "POST" });
setStatus("Stream stopped");
startOfflinePoll();
}
// ── Init ────────────────────────────────────────────────────────────────
(async () => {
await attachToStream();
const data = await fetchStatus();
if (!data.running && !data.ready) {
startOfflinePoll();
}
})();
</script>
</body> </body>
</html> </html>