camera1.html

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<h1 style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; text-align: center; font-weight: 500; line-height: 1.1; font-size: 30px; color: rgb(51,51,51);">ZIRC Cam 1</h1>
<video id="video" style="width:100%;"></video>
<button id="button1" style="display:none;">PLAY</button>
<script>
  window.addEventListener("DOMContentLoaded", function() {
     var videoSource = '/stream/camera1.m3u8';
     var video = document.getElementById('video');
     var button = document.getElementById('button1');
     //button.addEventListener('click', () => { console.log("clicked the video"); video.play(); });

     if(Hls.isSupported()) {
       console.log("Playing using HLS library");
       var hls = new Hls();
       hls.loadSource(videoSource);
       hls.attachMedia(video);
       hls.on(Hls.Events.MANIFEST_PARSED,function() {
	 video.play();
       });
     }
    // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
    // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
    // This is using the built-in support of the plain video element, without using hls.js.
     else if (video.canPlayType('application/vnd.apple.mpegurl')) {
       console.log("Playing using built in hls support");
       video.src = videoSource;
       // ios safari wont play video with an audio stream unless the user clicks on something.. so make
       // a button
       button.style.display = "block";
       button.addEventListener('click', () => { console.log("clicked the video"); video.play(); });
     }
     else {
       console.log("Cannot play this video, hls.isSupported is false and canPlayType is false");
     }
  }, false);
</script>