gilles/go2rtc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update main Web UI page

Browse Source
This commit is contained in:
Alexey Khit
2022-12-06 01:34:24 +03:00
parent cfe20925ac
commit d334551591
1 changed files with 79 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/index.html
+79 -34
View File
@@ -8,6 +8,10 @@
<title>go2rtc</title> <title>go2rtc</title>
<style> <style>
body {
font-family: Arial, Helvetica, sans-serif;
}
table { table {
background-color: white; background-color: white;
text-align: left; text-align: left;
@@ -36,9 +40,23 @@
text-align: center; text-align: center;
} }
label {
display: flex;
align-items: center;
}
.header { .header {
padding: 5px 5px; padding: 5px 5px;
} }
.controls {
display: flex;
padding: 5px;
}
.controls > label {
margin-left: 10px;
}
</style> </style>
</head> </head>
<body> <body>
@@ -47,6 +65,13 @@
<input id="src" type="text" placeholder="url"> <input id="src" type="text" placeholder="url">
<a id="add" href="#">add</a> <a id="add" href="#">add</a>
</div> </div>
<div class="controls">
<button>stream</button>
<label><input type="checkbox" name="webrtc" checked>webrtc</label>
<label><input type="checkbox" name="mse" checked>mse</label>
<label><input type="checkbox" name="mp4" checked>mp4</label>
<label><input type="checkbox" name="mjpeg" checked>mjpeg</label>
</div>
<table id="streams"> <table id="streams">
<thead> <thead>
<tr> <tr>
@@ -59,50 +84,70 @@
</tbody> </tbody>
</table> </table>
<script> <script>
const baseUrl = location.origin + location.pathname.substr( const templates = [
0, location.pathname.lastIndexOf("/") '<a href="stream.html?src={name}">stream</a>',
);
const links = [
'<a href="webrtc.html?src={name}">webrtc</a>',
'<a href="mse.html?src={name}">mse</a>',
// '<a href="video.html?src={name}">video</a>',
'<a href="api/stream.mp4?src={name}">mp4</a>', '<a href="api/stream.mp4?src={name}">mp4</a>',
'<a href="api/frame.mp4?src={name}">frame</a>',
`<a href="rtsp://${location.hostname}:8554/{name}">rtsp</a>`,
'<a href="api/stream.mjpeg?src={name}">mjpeg</a>', '<a href="api/stream.mjpeg?src={name}">mjpeg</a>',
`<a href="rtsp://${location.hostname}:8554/{name}">rtsp</a>`,
'<a href="api/streams?src={name}">info</a>', '<a href="api/streams?src={name}">info</a>',
'<a href="#" data-name="{name}">delete</a>',
]; ];
function reload() { document.querySelector("#add")
fetch(`${baseUrl}/api/streams`).then(r => { .addEventListener("click", () => {
r.json().then(data => { const src = document.querySelector("#src");
let html = ''; const url = new URL("api/streams", location.href);
url.searchParams.set("src", src.value);
fetch(url, {method: "PUT"}).then(reload);
});
for (const [name, value] of Object.entries(data)) { document.querySelector(".controls > button")
const online = value !== null ? value.length : 0 .addEventListener("click", () => {
html += `<tr><td>${name || 'default'}</td><td>${online}</td><td>`; const url = new URL("stream.html", location.href);
links.forEach(link => {
html += link.replace('{name}', encodeURIComponent(name)) + ' ';
})
html += `<a href="#" onclick="deleteStream('${name}')">delete</a>`;
html += `</td></tr>`;
}
let content = document.getElementById('streams').getElementsByTagName('tbody')[0]; const streams = document.querySelectorAll("#streams input");
content.innerHTML = html streams.forEach(i => {
if (i.checked) url.searchParams.append("src", i.name);
}); });
})
}
function deleteStream(src) { if (!url.searchParams.has("src")) return;
fetch(`${baseUrl}/api/streams?src=${encodeURIComponent(src)}`, {method: 'DELETE'}).then(reload);
}
const addButton = document.querySelector('a#add'); let mode = document.querySelectorAll(".controls input");
addButton.onclick = () => { mode = Array.from(mode).filter(i => i.checked).map(i => i.name).join(",");
let src = document.querySelector('input#src');
fetch(`${baseUrl}/api/streams?src=${encodeURIComponent(src.value)}`, {method: 'PUT'}).then(reload); window.location.href = `${url}&mode=${mode}`;
});
const tbody = document.querySelector("#streams > tbody");
tbody.addEventListener("click", ev => {
if (ev.target.innerText !== "delete") return;
ev.preventDefault();
const url = new URL("api/streams", location.href);
url.searchParams.set("src", ev.target.dataset.name);
fetch(url, {method: "DELETE"}).then(reload);
});
function reload() {
const url = new URL("api/streams", location.href);
fetch(url).then(r => r.json()).then(data => {
tbody.innerHTML = "";
for (const [name, value] of Object.entries(data)) {
const online = value ? value.length : 0;
const links = templates.map(link => {
return link.replace("{name}", encodeURIComponent(name));
}).join(" ");
const tr = document.createElement("tr");
tr.dataset["id"] = name;
tr.innerHTML =
`<td><label><input type="checkbox" name="${name}">${name}</label></td>` +
`<td>${online}</td><td>${links}</td>`;
tbody.appendChild(tr);
}
});
} }
reload(); reload();