pimhwang
/
mediamtx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add video player options via query string (#2145) 

* Add video player options via query string.

* use arrow-style functions

* remove redundant check

---------

Co-authored-by: aler9 <46489434+aler9@users.noreply.github.com>
pull/2178/head
Daniel 2 years ago committed by GitHub
parent
a3e5dff488
commit
36e608902d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 178 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 94
      internal/core/hls_index.html
  2. 95
      internal/core/webrtc_read_index.html

94
internal/core/hls_index.html
Unescape View File

@ -19,15 +19,11 @@ html, body { @@ -19,15 +19,11 @@ html, body {
</head>
<body>
<video id="video" muted controls autoplay playsinline></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.4.10"></script>
<script>
const create = () => {
const video = document.getElementById('video');
const create = (video) => {
// always prefer hls.js over native HLS.
// this is because some Android versions support native HLS
// but don't support fMP4s.
@ -60,7 +56,93 @@ const create = () => { @@ -60,7 +56,93 @@ const create = () => {
}
};
window.addEventListener('DOMContentLoaded', create);
/**
* 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();
if (trueValues.includes(str.toLowerCase())) {
return true;
} else if (falseValues.includes(str.toLowerCase())) {
return false;
} else {
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);
};
/**
*
* @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);
};
};
window.addEventListener('DOMContentLoaded', initVideoElement(create, document.body));
</script>

95
internal/core/webrtc_read_index.html
Unescape View File

@ -19,8 +19,6 @@ html, body { @@ -19,8 +19,6 @@ html, body {
</head>
<body>
<video id="video" muted controls autoplay playsinline></video>
<script>
const restartPause = 2000;
@ -97,7 +95,8 @@ const generateSdpFragment = (offerData, candidates) => { @@ -97,7 +95,8 @@ const generateSdpFragment = (offerData, candidates) => {
}
class WHEPClient {
constructor() {
constructor(video) {
this.video = video;
this.pc = null;
this.restartTimeout = null;
this.eTag = '';
@ -132,7 +131,7 @@ class WHEPClient { @@ -132,7 +131,7 @@ class WHEPClient {
this.pc.ontrack = (evt) => {
console.log("new track:", evt.track.kind);
document.getElementById("video").srcObject = evt.streams[0];
this.video.srcObject = evt.streams[0];
};
this.pc.createOffer()
@ -249,7 +248,93 @@ class WHEPClient { @@ -249,7 +248,93 @@ class WHEPClient {
}
}
window.addEventListener('DOMContentLoaded', () => new WHEPClient());
/**
* 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();
if (trueValues.includes(str.toLowerCase())) {
return true;
} else if (falseValues.includes(str.toLowerCase())) {
return false;
} else {
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);
};
/**
*
* @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);
};
};
window.addEventListener('DOMContentLoaded', initVideoElement((video) => new WHEPClient(video), document.body));
</script>

Write Preview
Loading…
Cancel
Save