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
@@ -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>