Add streaming network visualisation

2024-06-16 06:36:24 +03:00
parent 96504e2fb0
commit 734393d638
6 changed files with 232 additions and 1 deletions
@@ -139,7 +139,7 @@
                const isChecked = checkboxStates[name] ? 'checked' : '';
                tr.innerHTML =
                    `<td><label><input type="checkbox" name="${name}" ${isChecked}>${name}</label></td>` +
-                    `<td><a href="api/streams?src=${src}">${online} / info</a> / <a href="api/streams?src=${src}&video=all&audio=all&microphone">probe</a></td>` +
+                    `<td><a href="api/streams?src=${src}">${online} / info</a> / <a href="api/streams?src=${src}&video=all&audio=all&microphone">probe</a> / <a href="network.html?src=${src}">net</a></td>` +
                    `<td>${links}</td>`;
            }

@@ -138,6 +138,7 @@ body.dark-mode hr {
        <li><a href="add.html">Add</a></li>
        <li><a href="editor.html">Config</a></li>
        <li><a href="log.html">Log</a></li>
+        <li><a href="network.html">Net</a></li>
       <li><a href="#" id="darkModeToggle">
       &#127769;
        </a>
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>go2rtc - Network</title>
+    <script src="https://unpkg.com/vis-network@9.1.9/standalone/umd/vis-network.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, Helvetica, sans-serif;
+            background-color: white;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+        }
+
+        html, body, #network {
+            height: 100%;
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+<script src="main.js"></script>
+<div id="network"></div>
+<script>
+    /* global vis */
+    window.addEventListener('load', async () => {
+        const url = new URL('api/streams.dot' + location.search, location.href);
+        const r = await fetch(url, {cache: 'no-cache'});
+        const data = vis.parseDOTNetwork(await r.text());
+        const options = {
+            edges: {
+                font: {align: 'middle'},
+                smooth: false,
+            },
+            nodes: {shape: 'box'},
+            physics: false,
+        };
+        new vis.Network(document.getElementById('network'), data, options);
+    });
+</script>
+</body>
+</html>