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

Update web interface

Browse Source
This commit is contained in:
Alexey Khit
2022-08-21 09:28:26 +03:00
parent c7128897b8
commit a81bf0daa8
3 changed files with 92 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/README.md
+4
View File
@@ -47,3 +47,7 @@ pc.ontrack = ev => {
video.srcObject = ev.streams[0]; video.srcObject = ev.streams[0];
} }
``` ```
## Useful links
- https://divtable.com/table-styler/
www/index.html
+81 -19
View File
@@ -1,44 +1,106 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="utf-8">
<meta name="viewport" <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>go2rtc</title> <title>go2rtc</title>
<style>
table {
background-color: white;
text-align: left;
border-collapse: collapse;
}
table td, table th {
border: 1px solid black;
padding: 5px 5px;
}
table tbody td {
font-size: 13px;
}
table thead {
background: #CFCFCF;
background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
border-bottom: 3px solid black;
}
table thead th {
font-size: 15px;
font-weight: bold;
color: black;
text-align: center;
}
.header {
padding: 5px 5px;
}
</style>
</head> </head>
<body> <body>
<div id="header"></div> <div class="header">
<table id="items"></table> <input id="src" type="text" placeholder="url">
<a id="add" href="#">add</a>
</div>
<table id="streams">
<thead>
<tr>
<th>Name</th>
<th>Online</th>
<th>Commands</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script> <script>
const baseUrl = location.origin + location.pathname.substr( const baseUrl = location.origin + location.pathname.substr(
0, location.pathname.lastIndexOf("/") 0, location.pathname.lastIndexOf("/")
); );
const header = document.getElementById('header');
header.innerHTML = `<a href="api/stats">stats</a>`;
const links = [ const links = [
'<a href="webrtc-async.html?url={name}">webrtc-async</a>', '<a href="webrtc.html?url={name}">webrtc</a>',
// '<a href="webrtc-sync.html?url={name}">webrtc-sync</a>',
'<a href="api/frame.mp4?url={name}">frame.mp4</a>',
'<a href="api/frame.raw?url={name}">frame.raw</a>',
'<a href="mse.html?url={name}">mse</a>', '<a href="mse.html?url={name}">mse</a>',
'<a href="api/frame.mp4?url={name}">frame.mp4</a>',
'<a href="api/streams?src={name}">info</a>',
]; ];
fetch(`${baseUrl}/api/stats`).then(r => { function reload() {
fetch(`${baseUrl}/api/streams`).then(r => {
r.json().then(data => { r.json().then(data => {
const content = document.getElementById('items'); let html = '';
for (let name in data.streams) { for (const [name, value] of Object.entries(data)) {
let html = `<tr><td>${name || 'default'}</td>`; const online = value !== null ? value.length : 0
html += `<tr><td>${name || 'default'}</td><td>${online}</td><td>`;
links.forEach(link => { links.forEach(link => {
html += `<td>${link.replace('{name}', name)}</td>` html += link.replace('{name}', encodeURIComponent(name)) + ' ';
}) })
html += `</tr>`; html += `<a href="#" onclick="deleteStream('${name}')">delete</a>`;
content.innerHTML += html html += `</td></tr>`;
} }
let content = document.getElementById('streams').getElementsByTagName('tbody')[0];
content.innerHTML = html
}); });
}) })
}
function deleteStream(src) {
fetch(`${baseUrl}/api/streams?src=${encodeURIComponent(src)}`, {method: 'DELETE'}).then(reload);
}
const addButton = document.querySelector('a#add');
addButton.onclick = () => {
let src = document.querySelector('input#src');
fetch(`${baseUrl}/api/streams?src=${encodeURIComponent(src.value)}`, {method: 'PUT'}).then(reload);
}
reload();
</script> </script>
</body> </body>
</html> </html>
www/webrtc-async.html → www/webrtc.html
View File