mirror of
https://github.com/AlexxIT/go2rtc.git
synced 2025-09-26 20:31:11 +08:00
107 lines
2.9 KiB
HTML
107 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
|
<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>
|
|
<body>
|
|
<script src="main.js"></script>
|
|
<div class="header">
|
|
<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>
|
|
const baseUrl = location.origin + location.pathname.substr(
|
|
0, location.pathname.lastIndexOf("/")
|
|
);
|
|
|
|
const links = [
|
|
'<a href="webrtc.html?src={name}">webrtc</a>',
|
|
'<a href="mse.html?src={name}">mse</a>',
|
|
'<a href="api/frame.mp4?src={name}">frame.mp4</a>',
|
|
'<a href="api/streams?src={name}">info</a>',
|
|
];
|
|
|
|
function reload() {
|
|
fetch(`${baseUrl}/api/streams`).then(r => {
|
|
r.json().then(data => {
|
|
let html = '';
|
|
|
|
for (const [name, value] of Object.entries(data)) {
|
|
const online = value !== null ? value.length : 0
|
|
html += `<tr><td>${name || 'default'}</td><td>${online}</td><td>`;
|
|
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];
|
|
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>
|
|
</body>
|
|
</html> |