Update web interface

2022-08-21 09:28:26 +03:00
parent c7128897b8
commit a81bf0daa8
3 changed files with 92 additions and 26 deletions
@@ -46,4 +46,8 @@ pc.ontrack = ev => {

    video.srcObject = ev.streams[0];
 }
-```
+```
+
+## Useful links
+
+- https://divtable.com/table-styler/
@@ -1,44 +1,106 @@
+<!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <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>
-<div id="header"></div>
-<table id="items"></table>
+<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 header = document.getElementById('header');
-    header.innerHTML = `<a href="api/stats">stats</a>`;
-
    const links = [
-        '<a href="webrtc-async.html?url={name}">webrtc-async</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="webrtc.html?url={name}">webrtc</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 => {
-        r.json().then(data => {
-            const content = document.getElementById('items');
+    function reload() {
+        fetch(`${baseUrl}/api/streams`).then(r => {
+            r.json().then(data => {
+                let html = '';

-            for (let name in data.streams) {
-                let html = `<tr><td>${name || 'default'}</td>`;
-                links.forEach(link => {
-                    html += `<td>${link.replace('{name}', name)}</td>`
-                })
-                html += `</tr>`;
-                content.innerHTML += 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>