pcnoic/refresh.html

## refresh.html
<!DOCTYPE html>
<html>
<head>
	<title>CAM1 - Peristera's Shipwreck - Alonissos Greece</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
		html, body {
			background-color: #111;
			text-align: center;
		}
	</style>

</head>
<body>
    <script type="text/javascript" src="jsmpeg.min.js"></script>
	<script type="text/javascript">
        document.body.onload = refreshStream;

        function addVideoCanvas () {
            // get the parent body element
            const parentBody = document.getElementsByTagName("body")[0];

            // create new video canvas element
            const newCanvas = document.createElement("canvas");
            newCanvas.setAttribute("id", "video-canvas");

            // add the canvas element to body
            parentBody.appendChild(newCanvas);

            // get video-canvas element for jsmplayer
            var canvas = document.getElementById("video-canvas");
            var url = 'ws://'+document.location.hostname+':9081/';
            var player = new JSMpeg.Player(url, {canvas: canvas});
        }

        function destroyVideoCanvas () {
            // get the video canvas element
            var videoCanvas = document.getElementById("canvas");
            videoCanvas.parentNode.removeChild(videoCanvas);
        }

        function refreshStream() {
            // using addVideoCanvas and destroyVideoCanvas to silently refresh video player
            addVideoCanvas();
            setInterval(() => {
                destroyVideoCanvas();
                addVideoCanvas();
            }, 60000);
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>CAM1 - Peristera's Shipwreck - Alonissos Greece</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
	html, body {
	background-color: #111;
	text-align: center;
	}
	</style>

	</head>
	<body>
	<script type="text/javascript" src="jsmpeg.min.js"></script>
	<script type="text/javascript">
	document.body.onload = refreshStream;

	function addVideoCanvas () {
	// get the parent body element
	const parentBody = document.getElementsByTagName("body")[0];

	// create new video canvas element
	const newCanvas = document.createElement("canvas");
	newCanvas.setAttribute("id", "video-canvas");

	// add the canvas element to body
	parentBody.appendChild(newCanvas);

	// get video-canvas element for jsmplayer
	var canvas = document.getElementById("video-canvas");
	var url = 'ws://'+document.location.hostname+':9081/';
	var player = new JSMpeg.Player(url, {canvas: canvas});
	}

	function destroyVideoCanvas () {
	// get the video canvas element
	var videoCanvas = document.getElementById("canvas");
	videoCanvas.parentNode.removeChild(videoCanvas);
	}

	function refreshStream() {
	// using addVideoCanvas and destroyVideoCanvas to silently refresh video player
	addVideoCanvas();
	setInterval(() => {
	destroyVideoCanvas();
	addVideoCanvas();
	}, 60000);
	}
	</script>
	</body>
	</html>