- On the Zone page, when changePlayer() is called, execute monitorStream.start() with a 200ms delay; otherwise, the preceding stop() call might not have enough time to complete properly.

- When calling `monitorStream.manageAvailablePlayers()`, now pass the candidate player as an argument instead of determining the player from stored cookies inside `manageAvailablePlayers()`. This is necessary because cookies could belong to either the Watch page or the Zone page.
- On the Zone page, load `hls.min.js` if Go2RTC or RTSP2Web is being used for the monitor.
- `monitorStream.setPlayer()` is now executed within `monitorStream.manageAvailablePlayers()`. Previously, `manageAvailablePlayers()` only handled the assignment of `monitorStream.player`.
- Added a new function, `this.setRTSP2WebType()`, to avoid code duplication. This ensures that `RTSP2WebType` is checked and set even if `setPlayer()` is not called on the page.
- Minor optimization regarding variable usage.
- If `hls.min.js` is not loaded, attempting to play via HLS will now trigger a "The HLS library is not loaded" warning in the browser console and initiate a stream restart. Previously, this would result in an error.

web/js/MonitorStream.js

@@ -233,13 +233,7 @@ function MonitorStream(monitorData) {
     if (-1 != p.indexOf('go2rtc')) {
 
     } else if (-1 != p.indexOf('rtsp2web')) {
-      if (-1 != p.indexOf('_hls')) {
-        this.RTSP2WebType = 'HLS';
-      } else if (-1 != p.indexOf('_mse')) {
-        this.RTSP2WebType = 'MSE';
-      } else if (-1 != p.indexOf('_webrtc')) {
-        this.RTSP2WebType = 'WebRTC';
-      }
+      this.setRTSP2WebType(p);
     } else if (-1 != p.indexOf('janus')) {
 
     }
@@ -255,6 +249,16 @@ function MonitorStream(monitorData) {
     return this.player = p;
   };
 
+  this.setRTSP2WebType = function(player) {
+    if (-1 != player.indexOf('_hls')) {
+      this.RTSP2WebType = 'HLS';
+    } else if (-1 != player.indexOf('_mse')) {
+      this.RTSP2WebType = 'MSE';
+    } else if (-1 != player.indexOf('_webrtc')) {
+      this.RTSP2WebType = 'WebRTC';
+    }
+  };
+
   this.manageAvailablePlayersOptions = function(action, opt) {
     if (action == 'disable') {
       opt.setAttribute('disabled', '');
@@ -265,7 +269,7 @@ function MonitorStream(monitorData) {
     }
   };
 
-  this.manageAvailablePlayers = function() {
+  this.manageAvailablePlayers = function(candidate = '') {
     const selectPlayers = document.querySelector('[id="player"][name="codec"]');
     const opts = selectPlayers.options;
 
@@ -290,13 +294,12 @@ function MonitorStream(monitorData) {
         }
       }
     }
-    let selectedPlayerOption = selectPlayers.options[selectPlayers.selectedIndex];
+    let selectedPlayerOption = opts[selectPlayers.selectedIndex];
     if (selectedPlayerOption) {
       if (selectedPlayerOption.value == '') {
         // Perhaps "Auto" is left from the previous monitor, we will change it according to the cookies.
-        const zmWatchPlayer = getCookie('zmWatchPlayer');
-        if (zmWatchPlayer) {
-          selectPlayers.value = zmWatchPlayer;
+        if (candidate !== "" && candidate !== undefined && candidate !== null) {
+          selectPlayers.value = candidate;
           selectedPlayerOption = selectPlayers.options[selectPlayers.selectedIndex];
         }
       }
@@ -305,7 +308,7 @@ function MonitorStream(monitorData) {
         selectPlayers.value = ''; // Auto
       }
     }
-    this.player = selectPlayers.value;
+    this.setPlayer(selectPlayers.value);
   };
 
   this.element = null;
@@ -1999,6 +2002,9 @@ function MonitorStream(monitorData) {
         this.kill();
         return;
       }
+      if (!this.RTSP2WebType) { // This could happen, for example, on the Zones page, where `setPlayer` is not executed.
+        this.setRTSP2WebType(this.player);
+      }
       if (-1 !== this.player.indexOf('hls')) {
         const hlsUrl = rtsp2webModUrl;
         hlsUrl.pathname = "/stream/" + this.id + "/channel/" + numericChannel + "/hls/live/index.m3u8";
@@ -2009,6 +2015,12 @@ function MonitorStream(monitorData) {
           hlsUrl = "http://" + rtsp2webModUrl + "/stream/" + this.id + "/channel/0/hls/live/index.m3u8";
         }
         */
+        if (typeof Hls === 'undefined') {
+          console.warn("The HLS library is not loaded");
+          this.streamErrorRegistration(true);
+          this.restart(this.currentChannelStream);
+          return;
+        }
         if (Hls.isSupported()) {
           // Save the playback session ID so asynchronous HLS callbacks
           // can ignore events from obsolete playback sessions.

web/skins/classic/views/js/watch.js

@@ -890,8 +890,7 @@ function handleMouseLeave(event) {
 function streamStart(monitor = null) {
   monitorStream = new MonitorStream(monitor ? monitor : monitorData[monIdx]);
 
-  monitorStream.manageAvailablePlayers();
-  monitorStream.setPlayer($j('#player').val());
+  monitorStream.manageAvailablePlayers(getCookie('zmWatchPlayer'));
   monitorStream.setBottomElement(document.getElementById('bottomBlock'));
   const cookieMuted = getCookie('zmWatchMuted');
   monitorStream.muted = (cookieMuted === null || cookieMuted === 'true') ? true : false; // default to muted
@@ -1459,7 +1458,7 @@ function changePlayer() {
 
   monitorStream.destroyVolumeSlider();
   streamCmdStop(); // takes care of button state and calls stream.kill()
-  monitorStream.setPlayer($j('#player').val());
+  monitorStream.setPlayer(player);
   setChannelStream();
   setTimeout(function() {
     streamCmdPlay(true);

web/skins/classic/views/js/zone.js

@@ -659,7 +659,9 @@ function changePlayer() {
   for (let i = 0, length = monitors.length; i < length; i++) {
     monitors[i].stop();
     monitors[i].setPlayer(player);
-    monitors[i].start();
+    setTimeout(function() {
+      monitors[i].start();
+    }, 200);
   }
 }
 
@@ -812,14 +814,11 @@ function initPage() {
     console.log('Analyse button not found');
   }
 
-  var cookiePlayer = getCookie('zmZonePlayer');
+  const cookiePlayer = getCookie('zmZonePlayer');
 
   for ( let i = 0, length = monitorData.length; i < length; i++ ) {
     monitors[i] = new MonitorStream(monitorData[i]);
-    monitors[i].manageAvailablePlayers();
-    if (cookiePlayer !== undefined && cookiePlayer !== null) {
-      monitors[i].setPlayer(cookiePlayer);
-    }
+    monitors[i].manageAvailablePlayers(cookiePlayer);
     monitors[i].setButton('analyseBtn', analyseBtn);
     monitors[i].setStreamScale();
     monitors[i].show_analyse_frames(analyse_frames);
@@ -934,4 +933,4 @@ document.onvisibilitychange = () => {
   }
 };
 
-window.addEventListener('DOMContentLoaded', initPage);
+window.addEventListener('DOMContentLoaded', initPage);

web/skins/classic/views/zone.php

@@ -419,6 +419,11 @@ if ($monitor->JanusEnabled()) {
 if ($monitor->Go2RTCEnabled()) {
   echo '<script type="module" src="js/video-stream.js"></script>'.PHP_EOL;
 }
+if ($monitor->Go2RTCEnabled() || $monitor->RTSP2WebEnabled()) {
+?>
+  <script src="<?php echo cache_bust('js/hls-1.6.13/hls.min.js') ?>"></script>
+<?php
+}
 ?>
   <script src="<?php echo cache_bust('js/MonitorStream.js') ?>"></script>
   <script src="<?php echo cache_bust('skins/classic/views/js/zone-object-size.js') ?>"></script>