wow
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
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
This commit is contained in:
parent
3aacec0c76
commit
ef16538956
1 changed files with 263 additions and 1 deletions
|
|
@ -1,5 +1,262 @@
|
||||||
{ pkgs, ... }:
|
{ pkgs, ... }:
|
||||||
|
|
||||||
|
let
|
||||||
|
streamPlayer = pkgs.writeTextDir "index.html" ''
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Mizuki Stream</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
--bg: #101114;
|
||||||
|
--panel: #191b20;
|
||||||
|
--panel-strong: #22252c;
|
||||||
|
--text: #f5f3ee;
|
||||||
|
--muted: #aaa49b;
|
||||||
|
--line: #363943;
|
||||||
|
--accent: #f08a92;
|
||||||
|
--accent-strong: #ffb45c;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 20% 0%, rgba(240, 138, 146, 0.16), transparent 30rem),
|
||||||
|
linear-gradient(135deg, #101114 0%, #17191d 48%, #202026 100%);
|
||||||
|
color: var(--text);
|
||||||
|
font-family:
|
||||||
|
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||||
|
sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
width: min(1120px, calc(100vw - 32px));
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header,
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(1.45rem, 3vw, 2.25rem);
|
||||||
|
font-weight: 760;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
min-width: 7.5rem;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: rgba(25, 27, 32, 0.78);
|
||||||
|
color: var(--muted);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.live {
|
||||||
|
border-color: rgba(240, 138, 146, 0.65);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage {
|
||||||
|
display: grid;
|
||||||
|
align-content: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player {
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #050506;
|
||||||
|
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
max-height: calc(100vh - 190px);
|
||||||
|
background: #050506;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(25, 27, 32, 0.82);
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button {
|
||||||
|
min-height: 42px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: var(--panel-strong);
|
||||||
|
color: var(--text);
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: 0;
|
||||||
|
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
|
||||||
|
color: #1b1110;
|
||||||
|
font-weight: 760;
|
||||||
|
padding: 0 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
main {
|
||||||
|
width: min(100vw - 20px, 1120px);
|
||||||
|
padding: 12px 0;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header,
|
||||||
|
footer {
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<header>
|
||||||
|
<h1>Mizuki Stream</h1>
|
||||||
|
<div id="status" class="status">Idle</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="stage">
|
||||||
|
<div class="player">
|
||||||
|
<video id="video" controls playsinline></video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="controls">
|
||||||
|
<input id="source" name="source" type="url" autocomplete="off" />
|
||||||
|
<button type="submit">Play</button>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<span id="now">/live/stream/stream.m3u8</span>
|
||||||
|
<span><code>rtmp://stream.mizuki.guru:1935/live</code></span>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.6.7/dist/hls.min.js"></script>
|
||||||
|
<script>
|
||||||
|
const video = document.getElementById("video");
|
||||||
|
const form = document.getElementById("controls");
|
||||||
|
const source = document.getElementById("source");
|
||||||
|
const status = document.getElementById("status");
|
||||||
|
const now = document.getElementById("now");
|
||||||
|
let hls;
|
||||||
|
|
||||||
|
function defaultSource() {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const app = params.get("app") || "live";
|
||||||
|
const stream = params.get("stream") || "stream";
|
||||||
|
return params.get("src") || "/" + app + "/" + stream + "/" + stream + ".m3u8";
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStatus(text, isLive) {
|
||||||
|
status.textContent = text;
|
||||||
|
status.classList.toggle("live", isLive);
|
||||||
|
}
|
||||||
|
|
||||||
|
function play(url) {
|
||||||
|
const absolute = new URL(url, window.location.href).toString();
|
||||||
|
source.value = absolute;
|
||||||
|
now.textContent = new URL(absolute).pathname;
|
||||||
|
setStatus("Loading", false);
|
||||||
|
|
||||||
|
if (hls) {
|
||||||
|
hls.destroy();
|
||||||
|
hls = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (video.canPlayType("application/vnd.apple.mpegurl")) {
|
||||||
|
video.src = absolute;
|
||||||
|
video.play().catch(() => setStatus("Ready", false));
|
||||||
|
setStatus("Live", true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.Hls && Hls.isSupported()) {
|
||||||
|
hls = new Hls({ lowLatencyMode: true });
|
||||||
|
hls.loadSource(absolute);
|
||||||
|
hls.attachMedia(video);
|
||||||
|
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||||
|
setStatus("Live", true);
|
||||||
|
video.play().catch(() => setStatus("Ready", false));
|
||||||
|
});
|
||||||
|
hls.on(Hls.Events.ERROR, (_, data) => {
|
||||||
|
if (data.fatal) setStatus("Offline", false);
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setStatus("Unsupported", false);
|
||||||
|
}
|
||||||
|
|
||||||
|
form.addEventListener("submit", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
play(source.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
play(defaultSource());
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
'';
|
||||||
|
in
|
||||||
{
|
{
|
||||||
services.caddy = {
|
services.caddy = {
|
||||||
enable = true;
|
enable = true;
|
||||||
|
|
@ -93,7 +350,12 @@
|
||||||
'';
|
'';
|
||||||
|
|
||||||
virtualHosts."stream.mizuki.guru".extraConfig = ''
|
virtualHosts."stream.mizuki.guru".extraConfig = ''
|
||||||
reverse_proxy 127.0.0.1:10023
|
@hls path_regexp hls ^/[^/]+/[^/]+/[^/]+\.(m3u8|ts)$
|
||||||
|
reverse_proxy @hls 127.0.0.1:10023
|
||||||
|
|
||||||
|
root * ${streamPlayer}
|
||||||
|
try_files {path} /index.html
|
||||||
|
file_server
|
||||||
'';
|
'';
|
||||||
|
|
||||||
virtualHosts."netbird.mizuki.guru".extraConfig = ''
|
virtualHosts."netbird.mizuki.guru".extraConfig = ''
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue