Skip to content

Improved RTSP2Web processing in HLS mode. #4968

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
connortechnology merged 2 commits into from
Jul 8, 2026
+65 −25
Merged

Improved RTSP2Web processing in HLS mode. #4968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4661239
Improved RTSP2Web processing in HLS mode (skin.js)
IgorA100 Jul 6, 2026
1eaa9e9
- When attempting to play an AAC: mp4a.40.2 audio track using RTSP2We…
IgorA100 Jul 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 45 additions & 16 deletions web/js/MonitorStream.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -744,8 +744,7 @@ function MonitorStream(monitorData) {
this.webrtc = null;
}
if (this.hls) {
this.hls.destroy();
this.hls = null;
hlsDestroy(this.hls);
}
Comment thread
IgorA100 marked this conversation as resolved.
if (-1 !== this.activePlayer.indexOf('mse')) {
this.stopMse();
Expand Down Expand Up @@ -1791,24 +1790,53 @@ function MonitorStream(monitorData) {
maxBufferLength: 10,
maxMaxBufferLength: 30,
});

/* For debug ALL events HLS
const self = this;
Object.keys(Hls.Events).forEach(function(eventName) {
self.hls.on(Hls.Events[eventName], function(event, data) {
console.debug('HLS Event = ', eventName);
console.debug('HLS Event data = ', data);
});
});
*/

this.hls.on(Hls.Events.MEDIA_ATTACHING, function(event, data) {
console.debug(`HLS Event = MEDIA_ATTACHING for monitor ID=${this.id}`);
}, this);
this.hls.on(Hls.Events.BUFFER_CODECS, function(event, data) {
// Triggers if there is an audio track.
console.log(`For monitor with ID=${this.id}, the "${data.audio.codec}" audio codec is used.`);
if (data.audio.codec.indexOf('mp4a.40.') > -1) {
// AAC: mp4a.40.2 - HLS can't play it, so the "Loading" status will always be displayed.
// PCM, G.711A, G.711Mu, G.726, G.723 - no audio track
this.updateStreamInfo('', `Error. AAC codec "${data.audio.codec}" is not supported.`); //HLS
this.streamErrorRegistration();
hlsDestroy(this.hls);
this.restart(this.currentChannelStream);
}
Comment on lines +1813 to +1817
}, this);
this.hls.on(Hls.Events.MEDIA_ATTACHED, function(event, data) {
console.log(`Video and hls.js are now bound together for monitor ID=${this.id}`);
this.updateStreamInfo('', ''); //HLS
//getTracksFromStream(this); //HLS
}, this);
this.hls.on(Hls.Events.ERROR, function(event, data) {
console.warn("HLS Event = ERROR", "\n", "event:", event, "\n", "errorType:", data.type, "\n", "errorDetails:", data.details, "\n", "errorFatal:", data.fatal);
if (!data || !data.fatal) return;
this.updateStreamInfo('', 'Error'); //HLS
this.streamErrorRegistration();
if (!data || !data.fatal) return;
this.hls.destroy();
hlsDestroy(this.hls);
this.restart(this.currentChannelStream);
Comment on lines +1824 to 1828
}, this);
this.hls.loadSource(hlsUrl.href);
this.hls.attachMedia(stream);
} else if (stream.canPlayType('application/vnd.apple.mpegurl')) {
stream.src = hlsUrl.href;
}

video_el.onplay = (event) => {
this.updateStreamInfo('', '');
this.resetCountStreamErrors(this.activePlayer);
};
this.activePlayer = 'rtsp2web_hls';
} else if (-1 !== this.player.indexOf('mse')) {
const mseUrl = rtsp2webModUrl;
Expand Down Expand Up @@ -1965,15 +1993,6 @@ function MonitorStream(monitorData) {
}
};

this.streamErrorRegistration = function() {
const currentPlayer = this.player;
for (const key in this.playerPriority) {
if (-1 !== currentPlayer.indexOf(this.playerPriority[key]['name'])) {
this.playerPriority[key]['countErrors'] = parseInt(this.playerPriority[key]['countErrors'], 10) + 1;
}
}
};

this.selectNextPlayer = function(currentPlayer = null) {
if (this.defaultPlayer == this.player) {
// This means we need to start the bypass from the beginning, since we started playback from the default player, which may be in the middle of the list.
Expand Down Expand Up @@ -2012,6 +2031,16 @@ function MonitorStream(monitorData) {
this.restart(this.currentChannelStream);
}
};

this.streamErrorRegistration = function() {
const currentPlayer = this.player;
for (const key in this.playerPriority) {
if (-1 !== currentPlayer.indexOf(this.playerPriority[key]['name'])) {
this.playerPriority[key]['countErrors'] = parseInt(this.playerPriority[key]['countErrors'], 10) + 1;
break;
}
}
};
} // end class MonitorStream

/* +++ Janus */
Expand Down Expand Up @@ -2237,7 +2266,7 @@ function startRTSP2WebPlay(videoEl, url, stream) {
}
},
error: function(xhr, status, error) {
console.warn('Error request localDescription:', error, xhr.responseText);
console.warn('RTSP2Web_webrtc Error request localDescription:', error, xhr.responseText);
stream.updateStreamInfo('', 'Error'); //WEBRTC
stream.streamErrorRegistration();
stream.restart(stream.currentChannelStream);
Expand Down
29 changes: 20 additions & 9 deletions web/skins/classic/js/skin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1581,6 +1581,7 @@ function createRtsp2webStream(container, img, monitorId, fallbackToMjpeg, eventS

if (Hls.isSupported()) {
const hls = new Hls();
video._hls = hls;
hls.loadSource(hlsUrl);
hls.attachMedia(video);

Expand All @@ -1589,6 +1590,7 @@ function createRtsp2webStream(container, img, monitorId, fallbackToMjpeg, eventS
if (infoStatusBar) infoStatusBar.innerHTML = ' [RTSP2Web Loading] ';
thumbnailVideoPlay(video, 'RTSP2Web', eventStart, statusBar);
console.debug("HLS Event = MEDIA_ATTACHED");
clearTimeout(video._fallbackTimer);
});
hls.on(Hls.Events.FRAG_LOADED, () => {
console.debug("HLS Event = FRAG_LOADED");
Expand All @@ -1605,12 +1607,11 @@ function createRtsp2webStream(container, img, monitorId, fallbackToMjpeg, eventS
hls.on(Hls.Events.ERROR, function(event, data) {
console.warn("HLS Event = ERROR", "\n", "event:", event, "\n", "errorType:", data.type, "\n", "errorDetails:", data.details, "\n", "errorFatal:", data.fatal);
if (!data || !data.fatal) return;
hls.destroy();
hlsDestroy(hls);
clearTimeout(video._fallbackTimer);
video.remove();
fallbackToMjpeg();
});
video._hls = hls;
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
// Native HLS support (Safari)
video.src = hlsUrl;
Expand All @@ -1629,7 +1630,7 @@ function createRtsp2webStream(container, img, monitorId, fallbackToMjpeg, eventS
// Fallback after 5s if video hasn't loaded
video._fallbackTimer = setTimeout(function() {
if (video.readyState < 2) {
if (video._hls) video._hls.destroy();
if (video._hls) hlsDestroy(video._hls);
video.remove();
Comment on lines 1631 to 1634
fallbackToMjpeg();
}
Expand All @@ -1640,6 +1641,19 @@ function createRtsp2webStream(container, img, monitorId, fallbackToMjpeg, eventS
});
}

const hlsDestroy = function(hls) {
if (hls && Hls) {
Object.keys(Hls.Events).forEach(function(eventName) {
hls.off(Hls.Events[eventName], function(event, data) {
});
});
hls.destroy();
hls = null;
} else {
console.warn("Hls cannot be destroyed because it is not loaded.");
}
};
Comment on lines +1644 to +1655

function thumbnailVideoPlay(video, currentMode, eventStart, statusBar) {
const infoStatusBar = (statusBar) ? statusBar.querySelector("#info-status-bar") : null;
video.play().then(() => {
Expand Down Expand Up @@ -1798,7 +1812,7 @@ function playEventHLS(container, img, monitorId, fallbackToMjpeg, statusBar, eve
// If the index.m3u8 manifest is bad, playback may not start, although there will be no errors.
if (video.readyState < 2) {
video.remove();
hls.destroy();
hlsDestroy(hls);
tryPlayMp4(container, img, monitorId, fallbackToMjpeg, statusBar);
}
}, 2000);
Expand All @@ -1819,7 +1833,7 @@ function playEventHLS(container, img, monitorId, fallbackToMjpeg, statusBar, eve
console.warn("HLS Event = ERROR", "\n", "event:", event, "\n", "errorType:", data.type, "\n", "errorDetails:", data.details, "\n", "errorFatal:", data.fatal);
if (!data || !data.fatal) return;
video.remove();
hls.destroy();
hlsDestroy(hls);
clearTimeout(video._fallbackTimer);
tryPlayMp4(container, img, monitorId, fallbackToMjpeg, statusBar);
});
Expand Down Expand Up @@ -1896,10 +1910,7 @@ function cleanupVideoElement(video) {
if (!video) return;
if (video._fallbackTimer) clearTimeout(video._fallbackTimer);
clearInterval(video._fallbackTimerTime);
if (video._hls) {
video._hls.destroy();
video._hls = null;
}
if (video._hls) hlsDestroy(video._hls);
video.pause();
video.src = '';
video.load();
Expand Down
Loading