Updating html to allow for multiple clients
This commit is contained in:
@@ -97,114 +97,219 @@
|
|||||||
</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">
|
||||||
|
<div class="dot" id="status-dot"></div>
|
||||||
|
<span id="placeholder-text">Checking stream...</span>
|
||||||
|
</div>
|
||||||
<video id="stream-video" autoplay muted playsinline></video>
|
<video id="stream-video" autoplay muted playsinline></video>
|
||||||
</div>
|
</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 btnStop = document.getElementById("btn-stop");
|
|
||||||
const video = document.getElementById("stream-video");
|
const video = document.getElementById("stream-video");
|
||||||
const placeholder = document.getElementById("placeholder");
|
const placeholder = document.getElementById("placeholder");
|
||||||
const status = document.getElementById("status");
|
const placeholderText = document.getElementById("placeholder-text");
|
||||||
|
const statusDot = document.getElementById("status-dot");
|
||||||
|
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 = "";
|
||||||
|
|
||||||
|
if (running) {
|
||||||
|
const stop = document.createElement("button");
|
||||||
|
stop.id = "btn-stop";
|
||||||
|
stop.textContent = "Stop";
|
||||||
|
stop.addEventListener("click", stopStream);
|
||||||
|
controls.appendChild(stop);
|
||||||
|
|
||||||
|
const badge = document.createElement("span");
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showOffline(message = "Stream is offline") {
|
||||||
|
video.style.display = "none";
|
||||||
|
video.src = "";
|
||||||
|
placeholder.style.display = "flex";
|
||||||
|
placeholderText.textContent = message;
|
||||||
|
statusDot.classList.remove("live");
|
||||||
|
}
|
||||||
|
|
||||||
|
function showLive() {
|
||||||
|
placeholder.style.display = "none";
|
||||||
|
video.style.display = "block";
|
||||||
|
statusDot.classList.add("live");
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── HLS ─────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function startHls() {
|
||||||
|
const src = "/camera/hls/stream.m3u8";
|
||||||
|
|
||||||
|
if (hls) { hls.destroy(); hls = null; }
|
||||||
|
|
||||||
|
if (Hls.isSupported()) {
|
||||||
|
hls = new Hls({ lowLatencyMode: false, backBufferLength: 10 });
|
||||||
|
hls.loadSource(src);
|
||||||
|
hls.attachMedia(video);
|
||||||
|
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||||
|
video.play().catch(e => console.warn("Autoplay blocked:", e));
|
||||||
|
showLive();
|
||||||
|
setStatus("Streaming");
|
||||||
|
});
|
||||||
|
hls.on(Hls.Events.ERROR, (event, data) => {
|
||||||
|
if (data.fatal) {
|
||||||
|
console.error("HLS fatal error:", data);
|
||||||
|
showOffline("Stream error — reloading...");
|
||||||
|
setTimeout(attachToStream, 3000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} 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();
|
return res.json();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setStatus(msg) {
|
||||||
|
statusEl.textContent = msg;
|
||||||
|
}
|
||||||
|
|
||||||
async function waitForReady(maxAttempts = 40) {
|
async function waitForReady(maxAttempts = 40) {
|
||||||
for (let i = 0; i < maxAttempts; i++) {
|
for (let i = 0; i < maxAttempts; i++) {
|
||||||
const res = await fetch("/camera/status");
|
const data = await fetchStatus();
|
||||||
const data = await res.json();
|
|
||||||
if (data.ready) return true;
|
if (data.ready) return true;
|
||||||
await new Promise(r => setTimeout(r, 500));
|
await new Promise(r => setTimeout(r, 500));
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function startHls() {
|
// Called on page load and after stream errors — attach if already live
|
||||||
const src = "/camera/hls/stream.m3u8";
|
async function attachToStream() {
|
||||||
|
const data = await fetchStatus();
|
||||||
if (Hls.isSupported()) {
|
if (data.ready) {
|
||||||
hls = new Hls({
|
startHls();
|
||||||
lowLatencyMode: false,
|
renderControls(true);
|
||||||
backBufferLength: 10,
|
} else if (data.running) {
|
||||||
});
|
setStatus("Stream starting...");
|
||||||
hls.loadSource(src);
|
placeholderText.textContent = "Stream starting...";
|
||||||
hls.attachMedia(video);
|
const ready = await waitForReady();
|
||||||
hls.on(Hls.Events.ERROR, (event, data) => {
|
if (ready) {
|
||||||
if (data.fatal) {
|
startHls();
|
||||||
console.error("HLS fatal error:", data);
|
renderControls(true);
|
||||||
status.textContent = "Stream error — try restarting";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
|
|
||||||
// Safari native HLS support
|
|
||||||
video.src = src;
|
|
||||||
} else {
|
} else {
|
||||||
status.textContent = "HLS not supported in this browser";
|
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;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
video.style.display = "block";
|
const btn = document.getElementById("btn-start");
|
||||||
placeholder.style.display = "none";
|
if (btn) btn.disabled = true;
|
||||||
video.play().catch(e => console.warn("Autoplay blocked:", e));
|
setStatus("Starting camera...");
|
||||||
}
|
placeholderText.textContent = "Starting...";
|
||||||
|
|
||||||
function stopHls() {
|
await fetch("/camera/start", { method: "POST" });
|
||||||
if (hls) {
|
|
||||||
hls.destroy();
|
|
||||||
hls = null;
|
|
||||||
}
|
|
||||||
video.pause();
|
|
||||||
video.src = "";
|
|
||||||
video.style.display = "none";
|
|
||||||
placeholder.style.display = "block";
|
|
||||||
}
|
|
||||||
|
|
||||||
btnStart.addEventListener("click", async () => {
|
setStatus("Waiting for first segment...");
|
||||||
btnStart.disabled = true;
|
|
||||||
status.textContent = "Starting camera…";
|
|
||||||
|
|
||||||
await postAction("/camera/start");
|
|
||||||
|
|
||||||
status.textContent = "Waiting for first segment…";
|
|
||||||
const ready = await waitForReady();
|
const ready = await waitForReady();
|
||||||
|
|
||||||
if (!ready) {
|
if (!ready) {
|
||||||
status.textContent = "Camera timed out — check Pi logs";
|
showOffline("Camera timed out — check Pi logs");
|
||||||
btnStart.disabled = false;
|
renderControls(false);
|
||||||
|
startOfflinePoll();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
startHls();
|
startHls();
|
||||||
btnStop.disabled = false;
|
renderControls(true);
|
||||||
status.textContent = "Streaming (H.264 / HLS)";
|
stopOfflinePoll();
|
||||||
});
|
}
|
||||||
|
|
||||||
btnStop.addEventListener("click", async () => {
|
async function stopStream() {
|
||||||
btnStop.disabled = true;
|
|
||||||
status.textContent = "Stopping…";
|
|
||||||
stopHls();
|
stopHls();
|
||||||
await postAction("/camera/stop");
|
showOffline("Stream is offline");
|
||||||
btnStart.disabled = false;
|
setStatus("Stopping...");
|
||||||
status.textContent = "Stream stopped";
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user