CEF/mediamtx
1
0
Fork 0
forked from External/mediamtx
Code Pull requests Activity

hls, webrtc: in the web page, show connection errors to users (#2957)

Browse source
This commit is contained in:
Alessandro Ros 2024-01-29 00:43:34 +01:00 • committed by GitHub
parent 7d0e702f14
commit 0433af66a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 976 additions and 1037 deletions
Download patch file Download diff file Expand all files Collapse all files

147
internal/servers/hls/index.html
View file

@ -9,21 +9,58 @@ html, body {
padding: 0;
height: 100%;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
#video {
width: 100%;
height: 100%;
background: black;
background: rgb(30, 30, 30);
}
#message {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
color: white;
pointer-events: none;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<video id="video"></video>
<div id="message"></div>
<script src="hls.min.js"></script>
<script>
const create = (video) => {
const retryPause = 2000;
const video = document.getElementById('video');
const message = document.getElementById('message');
let defaultControls = false;
const setMessage = (str) => {
if (str !== '') {
video.controls = false;
} else {
video.controls = defaultControls;
}
message.innerText = str;
};
const loadStream = () => {
// always prefer hls.js over native HLS.
// this is because some Android versions support native HLS
// but don't support fMP4s.
@ -35,7 +72,16 @@ const create = (video) => {
hls.on(Hls.Events.ERROR, (evt, data) => {
if (data.fatal) {
hls.destroy();
setTimeout(() => create(video), 2000);
if (data.details === 'manifestIncompatibleCodecsError') {
setMessage('stream makes use of codecs which are incompatible with this browser or operative system');
} else if (data.response && data.response.code === 404) {
setMessage('stream not found, retrying in some seconds');
} else {
setMessage(data.error + ', retrying in some seconds');
}
setTimeout(() => loadStream(video), retryPause);
}
});
@ -44,6 +90,7 @@ const create = (video) => {
});
hls.on(Hls.Events.MANIFEST_PARSED, () => {
setMessage('');
video.play();
});
@ -60,93 +107,33 @@ const create = (video) => {
}
};
/**
* Parses the query string from a URL into an object representing the query parameters.
* If no URL is provided, it uses the query string from the current page's URL.
*
* @param {string} [url=window.location.search] - The URL to parse the query string from.
* @returns {Object} An object representing the query parameters with keys as parameter names and values as parameter values.
*/
const parseQueryString = (url) => {
const queryString = (url || window.location.search).split("?")[1];
if (!queryString) return {};
const paramsArray = queryString.split("&");
const result = {};
for (let i = 0; i < paramsArray.length; i++) {
const param = paramsArray[i].split("=");
const key = decodeURIComponent(param[0]);
const value = decodeURIComponent(param[1] || "");
if (key) {
if (result[key]) {
if (Array.isArray(result[key])) {
result[key].push(value);
} else {
result[key] = [result[key], value];
}
} else {
result[key] = value;
}
}
}
return result;
};
/**
* Parses a string with boolean-like values and returns a boolean.
* @param {string} str The string to parse
* @param {boolean} defaultVal The default value
* @returns {boolean}
*/
const parseBoolString = (str, defaultVal) => {
const trueValues = ["1", "yes", "true"];
const falseValues = ["0", "no", "false"];
str = (str || "").toString();
str = (str || '');
if (trueValues.includes(str.toLowerCase())) {
if (['1', 'yes', 'true'].includes(str.toLowerCase())) {
return true;
} else if (falseValues.includes(str.toLowerCase())) {
return false;
} else {
return defaultVal;
}
if (['0', 'no', 'false'].includes(str.toLowerCase())) {
return false;
}
return defaultVal;
};
/**
* Sets video attributes based on query string parameters or default values.
*
* @param {HTMLVideoElement} video - The video element on which to set the attributes.
*/
const setVideoAttributes = (video) => {
let qs = parseQueryString();
video.controls = parseBoolString(qs["controls"], true);
video.muted = parseBoolString(qs["muted"], true);
video.autoplay = parseBoolString(qs["autoplay"], true);
video.playsInline = parseBoolString(qs["playsinline"], true);
const loadAttributesFromQuery = () => {
const params = new URLSearchParams(window.location.search);
video.controls = parseBoolString(params.get('controls'), true);
video.muted = parseBoolString(params.get('muted'), true);
video.autoplay = parseBoolString(params.get('autoplay'), true);
video.playsInline = parseBoolString(params.get('playsinline'), true);
defaultControls = video.controls;
};
/**
*
* @param {(video: HTMLVideoElement) => void} callback
* @param {HTMLElement} container
* @returns
*/
const initVideoElement = (callback, container) => {
return () => {
const video = document.createElement("video");
video.id = "video";
setVideoAttributes(video);
container.append(video);
callback(video);
};
const init = () => {
loadAttributesFromQuery();
loadStream();
};
window.addEventListener('DOMContentLoaded', initVideoElement(create, document.body));
window.addEventListener('DOMContentLoaded', init);
</script>