troykelly/stream.html

## stream.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>go2rtc - Stream</title>
    <style>
        body {
            background: black;
            margin: 0;
            padding: 0;
            display: flex;
            font-family: Arial, Helvetica, sans-serif;
            height: 100vh;
            width: 100vw;
        }
        .main-display, .multi-display-grid {
            display: flex;
            flex-flow: row wrap;
            width: 50%;
            height: 100%;
        }
    </style>
</head>
<body>
    <script type="module">
        // Conditional loading of server and module with proper checks
        const params = new URLSearchParams(location.search);
        let ws_URL, scriptURL;
        let server = params.get("server");
        if (server) {
            ws_URL = `https://${server}/live/webrtc/api/`;
            scriptURL = `https://${server}/live/webrtc/video-stream.js`;
        } else {
            ws_URL = '/api/';
            scriptURL = './video-stream.js';
        }

        const streams = params.getAll("src");
        const modes = params.getAll("mode");
        const multidisplay = params.get("multidisplay") !== null;
        if (modes.length === 0) modes.push("");

        while (modes.length > streams.length) {
            streams.push(streams[0]);
        }
        while (streams.length > modes.length) {
            modes.push(modes[0]);
        }

        const background = params.get("background") !== "false";
        const width = params.get("width") || "100%";

        const mainDiv = document.createElement('div');
        mainDiv.className = 'main-display';
        document.body.appendChild(mainDiv);

        const video_main = document.createElement("video-stream");
        video_main.style.flex = `0 0 ${multidisplay?'100%':width}`;
        video_main.background = background;
        video_main.mode = modes[0] || video_main.mode;
        video_main.src = `${ws_URL}ws?src=` + encodeURIComponent(streams[0]);
        mainDiv.appendChild(video_main);

        if(multidisplay){
            const remainingDiv = document.createElement('div');
            remainingDiv.className = 'multi-display-grid';
            document.body.appendChild(remainingDiv);

            for (let i = 1, len = streams.length; i < len; i++) {
                const video = document.createElement("video-stream");
                video.style.flex = `1 1 ${width}`;
                video.background = background;
                video.mode = modes[i] || video.mode;
                video.src = `${ws_URL}ws?src=` + encodeURIComponent(streams[i]);
                remainingDiv.appendChild(video);
            }
        }

        import(scriptURL).then(() => {
            // Nothing to be done here as video-stream.js has no exports
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>go2rtc - Stream</title>
	<style>
	body {
	background: black;
	margin: 0;
	padding: 0;
	display: flex;
	font-family: Arial, Helvetica, sans-serif;
	height: 100vh;
	width: 100vw;
	}
	.main-display, .multi-display-grid {
	display: flex;
	flex-flow: row wrap;
	width: 50%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<script type="module">
	// Conditional loading of server and module with proper checks
	const params = new URLSearchParams(location.search);
	let ws_URL, scriptURL;
	let server = params.get("server");
	if (server) {
	ws_URL = `https://${server}/live/webrtc/api/`;
	scriptURL = `https://${server}/live/webrtc/video-stream.js`;
	} else {
	ws_URL = '/api/';
	scriptURL = './video-stream.js';
	}

	const streams = params.getAll("src");
	const modes = params.getAll("mode");
	const multidisplay = params.get("multidisplay") !== null;
	if (modes.length === 0) modes.push("");

	while (modes.length > streams.length) {
	streams.push(streams[0]);
	}
	while (streams.length > modes.length) {
	modes.push(modes[0]);
	}

	const background = params.get("background") !== "false";
	const width = params.get("width") \|\| "100%";

	const mainDiv = document.createElement('div');
	mainDiv.className = 'main-display';
	document.body.appendChild(mainDiv);

	const video_main = document.createElement("video-stream");
	video_main.style.flex = `0 0 ${multidisplay?'100%':width}`;
	video_main.background = background;
	video_main.mode = modes[0] \|\| video_main.mode;
	video_main.src = `${ws_URL}ws?src=` + encodeURIComponent(streams[0]);
	mainDiv.appendChild(video_main);

	if(multidisplay){
	const remainingDiv = document.createElement('div');
	remainingDiv.className = 'multi-display-grid';
	document.body.appendChild(remainingDiv);

	for (let i = 1, len = streams.length; i < len; i++) {
	const video = document.createElement("video-stream");
	video.style.flex = `1 1 ${width}`;
	video.background = background;
	video.mode = modes[i] \|\| video.mode;
	video.src = `${ws_URL}ws?src=` + encodeURIComponent(streams[i]);
	remainingDiv.appendChild(video);
	}
	}

	import(scriptURL).then(() => {
	// Nothing to be done here as video-stream.js has no exports
	});
	</script>
	</body>
	</html>