website/vmixmon.html at master · umbc-hackafe/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Playback Monitor</title>
    <script src="https://cdn.jsdelivr.net/npm/autobahn-js-built@0.11.1/autobahn.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nipplejs/0.7.3/nipplejs.min.js"></script>
  </head>
  <body>
    <h1>Monitoring vMix Status...</h1>
    <p id="status">Waiting...</p>
    <script type="application/javascript">
        var connection = new autobahn.Connection({url: 'wss://crossbar.hackafe.net:7778/ws', realm: 'realm1'});

        var statusEl = document.getElementById("status");

        connection.onopen = function (session) {
            console.log("Connected");

            function updateStatus() {
                console.log("Updating server status...");
                fetch('http://10.13.23.200:8088/api').then(resp => {
                    return resp.text();
                }).then(text => {
                    console.log(body);
                    session.publish('com.vmixstatus', [body,]);
                    statusEl.innerHTML = "Connected";
                });
            }

            setInterval(updateStatus, 1000);
        };

        connection.open();
    </script>
  </body>
</html>