v4l2rtspserver
/
index.html

<html>
    <link rel="shortcut icon" href="about:blank"/>
    <style>
    h3 { text-align: center }
    video { display: block; margin: 0 auto }
    </style>
    <body>
	<!--fill streamList variable with the list of streams -->
	<script src="/getStreamList?streamList" ></script>
	<h3>HLS</h3>
	<div id="videos"></div>
	<script src="hls.js/dist/hls.light.min.js" ></script>
	<script>
		if (Hls.isSupported()) {
			var videos = document.getElementById("videos")
			streamList.forEach( (stream) => {
				var title = document.createElement("h3");
				title.innerText = stream
				videos.appendChild(title)
				var video = document.createElement("video");
				videos.appendChild(video)
				var hls = new Hls();
				hls.loadSource(stream+".m3u8");
				hls.attachMedia(video);
				hls.on(Hls.Events.MANIFEST_PARSED, function() { video.play(); });
			})
		} else {
			alert("HLS not supported");
		}
	</script>
    </body>
</html>