nix-flakes/hosts/server/natsu/services/stream.html
imnyang ce348a71ac
Some checks failed
CI / check (push) Has been cancelled
CI / ida (push) Has been cancelled
CI / cpt (push) Has been cancelled
CI / build-nixos (ena) (push) Has been cancelled
CI / build-nixos (hako) (push) Has been cancelled
CI / build-nixos (kazusa) (push) Has been cancelled
CI / build-nixos (mizuki) (push) Has been cancelled
wow
2026-07-04 13:07:10 +09:00

85 lines
2.7 KiB
HTML

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>stream.mizuki.guru</title>
<style>
:root {
color-scheme: dark;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #0f0f14;
color: #f4f4f5;
font-family: system-ui, sans-serif;
}
main {
width: min(100vw - 2rem, 960px);
}
video {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 12px;
}
p {
color: #a1a1aa;
}
code {
color: #f9a8d4;
}
</style>
</head>
<body>
<main>
<video id="player" controls autoplay playsinline></video>
<p id="publish"></p>
</main>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
<script>
const video = document.getElementById("player");
const publish = document.getElementById("publish");
const streamName =
decodeURIComponent(
location.pathname
.replace(/^\/live\/?/, "")
.replace(/^\/+|\/+$/g, ""),
) || "stream";
const source = `/hls/${encodeURIComponent(streamName)}.m3u8`;
document.title = `${streamName} - stream.mizuki.guru`;
publish.innerHTML = `Publish: <code>rtmps://stream.mizuki.guru/live/${escapeHtml(streamName)}</code>`;
if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = source;
} else if (Hls.isSupported()) {
const hls = new Hls({ liveDurationInfinity: true });
hls.loadSource(source);
hls.attachMedia(video);
} else {
video.outerHTML =
"<p>이</p> 브라우저는 HLS 재생을 지원하지 않습니다.</p>";
}
function escapeHtml(value) {
return value.replace(
/[&<>"']/g,
(ch) =>
({
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': "&quot;",
"'": "&#39;",
})[ch],
);
}
</script>
</body>
</html>