Updating html to allow for multiple clients
This commit is contained in:
@@ -2,210 +2,315 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Pi Camera</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Pi Camera</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background: #0f0f0f;
|
||||
color: #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
gap: 1.5rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background: #0f0f0f;
|
||||
color: #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
gap: 1.5rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
#preview {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
aspect-ratio: 16/9;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#preview {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
aspect-ratio: 16/9;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#stream-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: none;
|
||||
}
|
||||
#stream-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#placeholder {
|
||||
color: #555;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#placeholder {
|
||||
color: #555;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.6rem 2rem;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
button {
|
||||
padding: 0.6rem 2rem;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
button:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#btn-start {
|
||||
background: #22c55e;
|
||||
color: #000;
|
||||
}
|
||||
#btn-start {
|
||||
background: #22c55e;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#btn-stop {
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
}
|
||||
#btn-stop {
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#status {
|
||||
font-size: 0.85rem;
|
||||
color: #888;
|
||||
min-height: 1.2em;
|
||||
}
|
||||
</style>
|
||||
#status {
|
||||
font-size: 0.85rem;
|
||||
color: #888;
|
||||
min-height: 1.2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Pi Camera Stream</h1>
|
||||
<h1>Pi Camera</h1>
|
||||
|
||||
<div id="preview">
|
||||
<span id="placeholder">Stream not started</span>
|
||||
<video id="stream-video" autoplay muted playsinline></video>
|
||||
<div id="preview">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button id="btn-start">Start</button>
|
||||
<button id="btn-stop" disabled>Stop</button>
|
||||
</div>
|
||||
<div class="controls" id="controls"></div>
|
||||
|
||||
<p id="status"></p>
|
||||
<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 video = document.getElementById("stream-video");
|
||||
const placeholder = document.getElementById("placeholder");
|
||||
const status = document.getElementById("status");
|
||||
<!-- hls.js from CDN -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js"></script>
|
||||
<script>
|
||||
const video = document.getElementById("stream-video");
|
||||
const placeholder = document.getElementById("placeholder");
|
||||
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) {
|
||||
const res = await fetch(url, { method: "POST" });
|
||||
return res.json();
|
||||
}
|
||||
function renderControls(running) {
|
||||
controls.innerHTML = "";
|
||||
|
||||
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;
|
||||
}
|
||||
if (running) {
|
||||
const stop = document.createElement("button");
|
||||
stop.id = "btn-stop";
|
||||
stop.textContent = "Stop";
|
||||
stop.addEventListener("click", stopStream);
|
||||
controls.appendChild(stop);
|
||||
|
||||
function startHls() {
|
||||
const src = "/camera/hls/stream.m3u8";
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
function showOffline(message = "Stream is offline") {
|
||||
video.style.display = "none";
|
||||
video.src = "";
|
||||
placeholder.style.display = "flex";
|
||||
placeholderText.textContent = message;
|
||||
statusDot.classList.remove("live");
|
||||
}
|
||||
|
||||
video.style.display = "block";
|
||||
placeholder.style.display = "none";
|
||||
video.play().catch(e => console.warn("Autoplay blocked:", e));
|
||||
}
|
||||
function showLive() {
|
||||
placeholder.style.display = "none";
|
||||
video.style.display = "block";
|
||||
statusDot.classList.add("live");
|
||||
}
|
||||
|
||||
function stopHls() {
|
||||
if (hls) {
|
||||
hls.destroy();
|
||||
hls = null;
|
||||
}
|
||||
video.pause();
|
||||
video.src = "";
|
||||
video.style.display = "none";
|
||||
placeholder.style.display = "block";
|
||||
}
|
||||
// ── HLS ─────────────────────────────────────────────────────────────────
|
||||
|
||||
btnStart.addEventListener("click", async () => {
|
||||
btnStart.disabled = true;
|
||||
status.textContent = "Starting camera…";
|
||||
function startHls() {
|
||||
const src = "/camera/hls/stream.m3u8";
|
||||
|
||||
await postAction("/camera/start");
|
||||
if (hls) { hls.destroy(); hls = null; }
|
||||
|
||||
status.textContent = "Waiting for first segment…";
|
||||
const ready = await waitForReady();
|
||||
|
||||
if (!ready) {
|
||||
status.textContent = "Camera timed out — check Pi logs";
|
||||
btnStart.disabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
startHls();
|
||||
btnStop.disabled = false;
|
||||
status.textContent = "Streaming (H.264 / HLS)";
|
||||
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");
|
||||
});
|
||||
|
||||
btnStop.addEventListener("click", async () => {
|
||||
btnStop.disabled = true;
|
||||
status.textContent = "Stopping…";
|
||||
stopHls();
|
||||
await postAction("/camera/stop");
|
||||
btnStart.disabled = false;
|
||||
status.textContent = "Stream stopped";
|
||||
hls.on(Hls.Events.ERROR, (event, data) => {
|
||||
if (data.fatal) {
|
||||
console.error("HLS fatal error:", data);
|
||||
showOffline("Stream error — reloading...");
|
||||
setTimeout(attachToStream, 3000);
|
||||
}
|
||||
});
|
||||
</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>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user