wow

2026-07-04 13:07:10 +09:00 · 2026-07-04 13:07:10 +09:00 · ce348a71ac
commit ce348a71ac
parent 88cb745937
4 changed files with 123 additions and 8 deletions
--- a/hosts/server/natsu/services/stream.html
+++ b/hosts/server/natsu/services/stream.html
@ -0,0 +1,85 @@
+<!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>