Fix: More correct switching of stream channels for RTSP2Web and Go2RTC with saving the selection in cookies on Watch page

web/js/MonitorStream.js

@@ -83,6 +83,7 @@ function MonitorStream(monitorData) {
   };
 
   this.player = '';
+  this.activePlayer = ''; // Variants: go2rtc, janus, rtsp2web_hls, rtsp2web_mse, rtsp2web_webrtc, zms. Relevant for this.player = ''/Auto
   this.setPlayer = function(p) {
     if (-1 != p.indexOf('go2rtc')) {
 
@@ -100,6 +101,46 @@ function MonitorStream(monitorData) {
     return this.player = p;
   };
 
+  this.manageAvailablePlayersOptions = function(action, opt) {
+    if (action == 'disable') {
+      opt.setAttribute('disabled', '');
+      opt.setAttribute('title', playerDisabledInMonitorSettings);
+    } else if (action == 'enable') {
+      opt.removeAttribute('disabled');
+      opt.removeAttribute('title');
+    }
+  };
+
+  this.manageAvailablePlayers = function() {
+    const selectPlayers = document.querySelector('[id="player"][name="codec"]');
+    const opts = selectPlayers.options;
+
+    for (var opt, j = 0; opt = opts[j]; j++) {
+      if (-1 !== opt.value.indexOf('go2rtc')) {
+        if (this.Go2RTCEnabled) {
+          this.manageAvailablePlayersOptions('enable', opt);
+        } else {
+          this.manageAvailablePlayersOptions('disable', opt);
+        }
+      } else if (-1 !== opt.value.indexOf('rtsp2web')) {
+        if (this.RTSP2WebEnabled) {
+          this.manageAvailablePlayersOptions('enable', opt);
+        } else {
+          this.manageAvailablePlayersOptions('disable', opt);
+        }
+      }
+    }
+    if (selectPlayers.options[selectPlayers.selectedIndex].value == '') {
+      // Perhaps "Auto" is left from the previous monitor, we will change it according to the cookies.
+      selectPlayers.value = getCookie('zmWatchPlayer');
+    }
+    if (selectPlayers.options[selectPlayers.selectedIndex].disabled) {
+      // Selected player is not available for the current monitor
+      selectPlayers.value = ''; // Auto
+    }
+    this.player = selectPlayers.value;
+  };
+
   this.element = null;
   this.getElement = function() {
     if (this.element) return this.element;
@@ -263,7 +304,14 @@ function MonitorStream(monitorData) {
     }
   }; // setStreamScale
 
+  /*
+  * streamChannel = 0 || Primary; 1 || Secondary.
+  */
   this.start = function(streamChannel = 'default') {
+    if (streamChannel === null || streamChannel === '' || currentView == 'montage') streamChannel = 'default';
+    if (!['default', 0, 1].includes(streamChannel)) {
+      streamChannel = (streamChannel.toLowerCase() == 'primary') ? 0 : 1;
+    }
     this.streamListenerBind = streamListener.bind(null, this);
 
     console.log('start', this.Go2RTCEnabled, (!this.player), (-1 != this.player.indexOf('go2rtc')), ((!this.player) || (-1 != this.player.indexOf('go2rtc'))));
@@ -281,7 +329,7 @@ function MonitorStream(monitorData) {
         stream.background = true; // We do not use the document hiding/showing analysis from "video-rtc.js", because we have our own analysis
         const Go2RTCModUrl = url;
         const webrtcUrl = Go2RTCModUrl;
-        this.currentChannelStream = (streamChannel == 'default') ? 0 : streamChannel;
+        this.currentChannelStream = (streamChannel == 'default') ? ((this.RTSP2WebStream == 'Secondary') ? 1 : 0) : streamChannel;
         webrtcUrl.protocol = (url.protocol=='https:') ? 'wss:' : 'ws';
         webrtcUrl.pathname += "/ws";
         //webrtcUrl.search = 'src='+this.id;
@@ -304,6 +352,7 @@ function MonitorStream(monitorData) {
 
         $j('#volumeControls').show();
         if (typeof observerMontage !== 'undefined') observerMontage.observe(stream);
+        this.activePlayer = 'go2rtc';
         return;
       } else {
         alert("ZM_GO2RTC_PATH is empty. Go to Options->System and set ZM_GO2RTC_PATH accordingly.");
@@ -332,6 +381,7 @@ function MonitorStream(monitorData) {
       this.statusCmdTimer = setInterval(this.statusCmdQuery.bind(this), statusRefreshTimeout);
       this.started = true;
       this.streamListenerBind();
+      this.activePlayer = 'janus';
       return;
     }
 
@@ -376,16 +426,19 @@ function MonitorStream(monitorData) {
           } else if (stream.canPlayType('application/vnd.apple.mpegurl')) {
             stream.src = hlsUrl.href;
           }
+          this.activePlayer = 'rtsp2web_hls';
         } else if (this.RTSP2WebType == 'MSE') {
           const mseUrl = rtsp2webModUrl;
           mseUrl.protocol = useSSL ? 'wss' : 'ws';
           mseUrl.pathname = "/stream/" + this.id + "/channel/" + this.currentChannelStream + "/mse";
           mseUrl.search = "uuid=" + this.id + "&channel=" + this.currentChannelStream + "";
           startMsePlay(this, stream, mseUrl.href);
+          this.activePlayer = 'rtsp2web_mse';
         } else if (this.RTSP2WebType == 'WebRTC') {
           const webrtcUrl = rtsp2webModUrl;
           webrtcUrl.pathname = "/stream/" + this.id + "/channel/" + this.currentChannelStream + "/webrtc";
           startRTSP2WebPlay(stream, webrtcUrl.href, this);
+          this.activePlayer = 'rtsp2web_webrtc';
         }
         clearInterval(this.statusCmdTimer); // Fix for issues in Chromium when quickly hiding/showing a page. Doesn't clear statusCmdTimer when minimizing a page https://stackoverflow.com/questions/9501813/clearinterval-not-working
         this.statusCmdTimer = setInterval(this.statusCmdQuery.bind(this), statusRefreshTimeout);
@@ -435,6 +488,7 @@ function MonitorStream(monitorData) {
     stream.onload = this.img_onload.bind(this);
     this.started = true;
     this.streamListenerBind();
+    this.activePlayer = 'zms';
   }; // this.start
 
   this.stop = function() {

web/lang/en_gb.php

@@ -487,6 +487,7 @@
     'Pixels'                => 'pixels',
     'PlayAll'               => 'Play All',
     'PlayCycle'             => 'Play Cycle',
+    'PlayerDisabledInMonitorSettings'  => 'The player is disabled in the monitor settings.',
     'PleaseWait'            => 'Please Wait',
     'PostEventImageBuffer'  => 'Post Event Image Count',
     'PreEventImageBuffer'   => 'Pre Event Image Count',

web/lang/ru_ru.php

@@ -832,7 +832,7 @@
     'ZoomIn'               => 'Приблизить',
     'ZoomOut'              => 'Отдалить',
 // *********07-2022************************************ 
-    'Storage'		   => 'Хранилище',
+    'Storage'              => 'Хранилище',
     'Back'                 => 'Вернуться',
     'ParentGroup'          => 'Родительская группа',
     'FilterUnarchiveEvents' => 'Разархивировать все совпадения',
@@ -847,6 +847,7 @@
     'PreviousMonitor'      => 'Предыдущий монитор',
     'PauseCycle'           => 'Приостановить цикл',
     'PlayCycle'            => 'Запуск цикла',
+    'PlayerDisabledInMonitorSettings'  => 'Этот плеер отключен в настройках монитора.',
     'NextMonitor'          => 'Следующий монитор',
     'Server'               => 'Сервер',
     'Servers'              => 'Сервера',

web/skins/classic/js/skin.js

@@ -1081,7 +1081,7 @@ function manageShutdownBtns(element) {
 }
 
 /* Controls the availability of options for selection*/
-function manageRTSP2WebChannelStream() {
+function manageChannelStream() {
   let select = null;
   let secondPath_ = null;
   if (currentView == 'watch') {
@@ -1721,7 +1721,7 @@ function findPos(obj, foundScrollLeft, foundScrollTop) {
 /* Handling <input> change */
 function handleChangeInputTag(evt) {
   // Managing availability of channel stream selection
-  manageRTSP2WebChannelStream();
+  manageChannelStream();
 }
 
 /* Handling a mouse click */

web/skins/classic/js/skin.js.php

@@ -36,6 +36,7 @@
 const exportFailedString = '<?php echo translate('ExportFailed') ?>';
 const exportSucceededString = '<?php echo translate('ExportSucceeded') ?>';
 const cancelString = '<?php echo translate('Cancel') ?>';
+const playerDisabledInMonitorSettings = '<?php echo translate('PlayerDisabledInMonitorSettings') ?>';
 <?php
 /* We can't trust PHP_SELF on a path like /index.php/"%3E%3Cimg src=x onerror=prompt('1');%3E which
    will still load index.php but will include the arbitrary payload after `.php/`. To mitigate this,

web/skins/classic/views/js/monitor.js

@@ -376,22 +376,39 @@ function initPage() {
 
   //Manage the RTSP2Web settings div
   const RTSP2WebEnabled = form.elements['newMonitor[RTSP2WebEnabled]'];
-  if (RTSP2WebEnabled) {
+  const Go2RTCEnabled = form.elements['newMonitor[Go2RTCEnabled]'];
+  if (RTSP2WebEnabled || Go2RTCEnabled) {
+    if (Go2RTCEnabled.checked || RTSP2WebEnabled.checked) {
+      document.getElementById("RTSP2WebStream").hidden = false;
+    } else {
+      document.getElementById("RTSP2WebStream").hidden = true;
+    }
+
     if (RTSP2WebEnabled.checked) {
       document.getElementById("RTSP2WebType").hidden = false;
-      document.getElementById("RTSP2WebStream").hidden = false;
     } else {
       document.getElementById("RTSP2WebType").hidden = true;
-      document.getElementById("RTSP2WebStream").hidden = true;
     }
 
+    Go2RTCEnabled.addEventListener('change', function() {
+      if (this.checked || RTSP2WebEnabled.checked) {
+        document.getElementById("RTSP2WebStream").hidden = false;
+      } else {
+        document.getElementById("RTSP2WebStream").hidden = true;
+      }
+    });
+
     RTSP2WebEnabled.addEventListener('change', function() {
+      if (this.checked || Go2RTCEnabled.checked) {
+        document.getElementById("RTSP2WebStream").hidden = false;
+      } else {
+        document.getElementById("RTSP2WebStream").hidden = true;
+      }
+
       if (this.checked) {
         document.getElementById("RTSP2WebType").hidden = false;
-        document.getElementById("RTSP2WebStream").hidden = false;
       } else {
         document.getElementById("RTSP2WebType").hidden = true;
-        document.getElementById("RTSP2WebStream").hidden = true;
       }
     });
   }
@@ -480,7 +497,7 @@ function initPage() {
   // Setup the thumbnail video animation
   if (!isMobile()) initThumbAnimation();
 
-  manageRTSP2WebChannelStream();
+  manageChannelStream();
 } // end function initPage()
 
 function saveMonitorData(href = '') {

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

@@ -834,12 +834,14 @@ function streamStart(monitor = null) {
   monitorStream.setup_volume(document.getElementById('volume'));
   monitorStream.setup_mute(document.getElementById('mute'));
 
-  monitorStream.setPlayer(player);
+  monitorStream.setPlayer($j('#player').val());
   monitorStream.setBottomElement(document.getElementById('dvrControls'));
+  monitorStream.manageAvailablePlayers();
+  setChannelStream();
   // Start the fps and status updates. give a random delay so that we don't assault the server
   //monitorStream.setScale($j('#scale').val(), $j('#width').val(), $j('#height').val());
   //monitorsSetScale(monitorId);
-  monitorStream.start();
+  monitorStream.start(document.getElementById('streamChannel').value);
   if (streamMode == 'single') {
     monitorStream.setup_onclick(fetchImage);
   } else {
@@ -861,21 +863,7 @@ function streamStart(monitor = null) {
     forceAlmBtn.prop('title', forceAlmBtn.prop('title') + ': disabled because cannot edit Monitors');
     enableAlmBtn.prop('title', enableAlmBtn.prop('title') + ': disabled because cannot edit Monitors');
   }
-
-  // Managing the visibility of elements
-  const streamChannel = document.getElementById('streamChannel');
-  const streamQuality = document.getElementById('streamQuality');
-  const rateControl = document.getElementById('rateControl');
-  if (currentMonitor.RTSP2WebEnabled) {
-    streamChannel.classList.remove("hidden-shift");
-    streamQuality.classList.add("hidden-shift");
-    streamChannel.value = currentMonitor.RTSP2WebStream;
-    rateControl.classList.add("hidden-shift");
-  } else {
-    streamQuality.classList.remove("hidden-shift");
-    streamChannel.classList.add("hidden-shift");
-    rateControl.classList.remove("hidden-shift");
-  }
+  manageStreamQualityVisibility(); // In order for the Auto mode AFTER the start to register the player value .activePlayer and based on this we select the correct "Stream quality", i.e. either the quality for ZMS, or the channel for go2rtc/RTSP2Web
 }
 
 function streamReStart(oldId, newId) {
@@ -917,13 +905,47 @@ function streamReStart(oldId, newId) {
 
   table.bootstrapTable('destroy');
   applyMonitorControllable();
+  //manageChannelStream();
   streamPrepareStart(currentMonitor);
   zmPanZoom.init();
   zmPanZoom.init({objString: '.imageFeed', disablePan: true, contain: 'inside', additional: true});
-  manageRTSP2WebChannelStream();
   //document.getElementById('monitor').classList.remove('hidden-shift');
 }
 
+function setChannelStream() {
+  const streamChannel = document.getElementById('streamChannel');
+  manageChannelStream();
+
+  if (-1 === monitorStream.activePlayer.indexOf('zms')) {
+    let streamChannelValue = (getCookie('zmStreamChannel') || currentMonitor.RTSP2WebStream && currentMonitor.SecondPath);
+    // When switching monitors, cookies may store a channel from the previous monitor that the current monitor does not have.
+    streamChannel.value = streamChannelValue; // This will be easier than checking for a disabled option by going through the options. That is, we set the required option and if it is disabled, then we select the 'Primary' channel
+
+    if (streamChannel.options[streamChannel.selectedIndex].disabled) {
+      streamChannelValue = 'Primary';
+    }
+    monitorStream.currentChannelStream = (streamChannelValue == 'Secondary') ? 1 : 0;
+    streamChannel.value = streamChannelValue;
+  }
+}
+
+function manageStreamQualityVisibility() {
+  const streamQuality = document.getElementById('streamQuality');
+  const streamChannel = document.getElementById('streamChannel');
+  const rateControl = document.getElementById('rateControl');
+
+  if (-1 === monitorStream.activePlayer.indexOf('zms')) {
+    streamChannel.classList.remove("hidden-shift");
+    streamQuality.classList.add("hidden-shift");
+    rateControl.classList.add("hidden-shift");
+  } else {
+    streamQuality.classList.remove("hidden-shift");
+    streamChannel.classList.add("hidden-shift");
+    rateControl.classList.remove("hidden-shift");
+  }
+  applyChosen();
+}
+
 function applyMonitorControllable() {
   const ptzToggle = document.getElementById('ptzToggle');
   if (!ptzToggle) {
@@ -1088,9 +1110,6 @@ function initPage() {
   } else {
     alert("No monitor found for id "+monitorId);
   }
-
-
-  manageRTSP2WebChannelStream();
 } // initPage
 
 function watchFullscreen() {
@@ -1291,10 +1310,13 @@ function panZoomEventPanzoomchange(event) {
 }
 
 function monitorChangeStreamChannel() {
-  if (currentMonitor.RTSP2WebEnabled) {
+  //if (currentMonitor.RTSP2WebEnabled) {
+  if ((monitorStream.player) && (-1 !== monitorStream.player.indexOf('go2rtc') || -1 !== monitorStream.player.indexOf('rtsp2web'))) {
     streamCmdStop(true);
+    const streamChannel = $j('#streamChannel').val();
+    setCookie('zmStreamChannel', streamChannel);
     setTimeout(function() {
-      monitorStream.start(($j('#streamChannel').val() == "Primary") ? 0 : 1);
+      monitorStream.start(streamChannel);
       onPlay();
     }, 300);
   }
@@ -1307,13 +1329,17 @@ function changePlayer() {
   streamCmdStop(true); // takes care of button state and calls stream.kill()
   console.log('setting to ', $j('#player').val());
   monitorStream.setPlayer($j('#player').val());
-  streamCmdPlay(true);
-  return;
+  setChannelStream();
+  setTimeout(function() {
+    streamCmdPlay(true);
+    manageStreamQualityVisibility();
+  }, 300);
+  /*return;
 
   setTimeout(function() {
     monitorStream.start();
     onPlay();
-  }, 300);
+  }, 300);*/
 }
 
 function monitorsSetScale(id=null) {