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

bluenviron · Jan 28, 2024 · 0433af6 · 0433af6
1 parent 7d0e702
commit 0433af6
Show file tree

Hide file tree

Showing 3 changed files with 1,039 additions and 1,100 deletions.
diff --git a/internal/servers/hls/index.html b/internal/servers/hls/index.html
@@ -9,21 +9,58 @@
 	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 @@
 		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 @@
 		});
 
 		hls.on(Hls.Events.MANIFEST_PARSED, () => {
+			setMessage('');
 			video.play();
 		});
 
@@ -60,93 +107,33 @@
 	}
 };
 
-/**
- * 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())) {
+	}
+	if (['0', 'no', 'false'].includes(str.toLowerCase())) {
 		return false;
-	} else {
-		return defaultVal;
 	}
+	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>