<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="https://go2rtc.org/icons/apple-touch-icon-180x180.png" sizes="180x180">
<link rel="icon" href="https://go2rtc.org/icons/favicon.ico">
<link rel="manifest" href="https://go2rtc.org/manifest.json">
<title>stream - go2rtc</title>
<style>
body {
background: black;
margin: 0;
padding: 0;
display: flex;
font-family: Arial, Helvetica, sans-serif;
}
html, body {
height: 100%;
width: 100%;
}
.flex {
flex-wrap: wrap;
align-content: flex-start;
align-items: flex-start;
}
</style>
</head>
<body>
<script type="module" src="./video-stream.js"></script>
<script type="module">
const params = new URLSearchParams(location.search);
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') !== 'false';
const width = '1 0 ' + (params.get('width') || '320px');
for (let i = 0; i < streams.length; i++) {
const video = document.createElement('video-stream');
video.background = background;
video.mode = modes[i] || video.mode;
video.style.flex = width;
video.src = new URL('api/ws?src=' + encodeURIComponent(streams[i]), location.href);
document.body.appendChild(video);
}
document.title = streams.join('/') + ' - go2rtc';
</script>
</body>
</html>