diff --git a/web/js/MonitorStream.js b/web/js/MonitorStream.js
index 7db6c38c0..9e64812f5 100644
--- a/web/js/MonitorStream.js
+++ b/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.
diff --git a/web/skins/classic/views/js/watch.js b/web/skins/classic/views/js/watch.js
index 3aade242e..61c438c06 100644
--- a/web/skins/classic/views/js/watch.js
+++ b/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);
diff --git a/web/skins/classic/views/js/zone.js b/web/skins/classic/views/js/zone.js
index 1b376bda5..baa280ddc 100644
--- a/web/skins/classic/views/js/zone.js
+++ b/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);
\ No newline at end of file
diff --git a/web/skins/classic/views/zone.php b/web/skins/classic/views/zone.php
index 2a5aa9a2a..f3d36b4dd 100644
--- a/web/skins/classic/views/zone.php
+++ b/web/skins/classic/views/zone.php
@@ -419,6 +419,11 @@ if ($monitor->JanusEnabled()) {
if ($monitor->Go2RTCEnabled()) {
echo ''.PHP_EOL;
}
+if ($monitor->Go2RTCEnabled() || $monitor->RTSP2WebEnabled()) {
+?>
+
+