Update stream HTML page

2022-12-04 22:38:44 +03:00
parent ea79da0d53
commit e2ecd909ab
2 changed files with 61 additions and 28 deletions
@@ -1,28 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>go2rtc - MSE</title>
    <script src="video-rtc.js"></script>
    <style>
        body {
            background: black;
            margin: 0;
            padding: 0;
        }
        html, body, video {
            height: 100%;
            width: 100%;
        }
    </style>
 </head>
 <body>
 <script>
    const url = new URL("api/ws" + location.search, location.href);
    const video = document.createElement("video-rtc");
    video.src = url.toString();
    document.body.appendChild(video);
 </script>
 </body>
 </html>
@@ -0,0 +1,61 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>go2rtc - Stream</title>
    <script src="video-rtc.js"></script>
    <style>
        body {
            background: black;
            margin: 0;
            padding: 0;
            display: flex;
        }
        html, body {
            height: 100%;
            width: 100%;
        }
        .flex {
            flex-wrap: wrap;
            align-content: flex-start;
            align-items: flex-start;
        }
    </style>
 </head>
 <body>
 <script>
    const params = new URLSearchParams(location.search);
    // support multiple streams and multiple modes
    const streams = params.getAll("src");
    const modes = params.getAll("mode");
    if (modes.length === 0) modes.push("");
    while (modes.length > streams.length) {
        streams.push(streams[0]);
    }
    while (streams.length > modes.length) {
        modes.push(modes[0]);
    }
    if (streams.length > 1) {
        document.body.className = "flex";
    }
    const background = params.get("background") === "true";
    const width = "1 0 " + (params.get("width") || "320px");
    for (let i = 0; i < streams.length; i++) {
        /** @type {VideoRTC} */
        const video = document.createElement("video-rtc");
        video.background = background;
        video.mode = modes[i] || video.mode;
        video.style.flex = width;
        video.src = new URL("api/ws?src=" + streams[i], location.href);
        document.body.appendChild(video);
    }
 </script>
 </body>
 </html>