index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Remote Input</title>
    <style>
      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
  </head>
  <body>
    <script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>

    <h1 id="status">Input-Server Loading</h1>

    Select Instance:
    <select value="alpha" id="sel"></select>

    <br />
    <span id="ping">Loading ping...</span>
    <br />
    <button class="action" data-action="toggleBorderless">Toggle borderless window</button>
    <button class="action" data-action="toggleNativeInputBlock">Native input blocking</button>
    <button class="action" data-action="toggleNativeGamepadBlock">Native gamepad blocking</button>
    <button class="action" data-action="resetInput">Reset keyboard inputs</button>

    <script>
      let savedInstances = [];

      function msg(message){
        document.getElementById("status").innerText = message;
      }

      function advStatus(message){
        document.getElementById("advanced-status").innerText = message;
      }

      function displayID(pid){
        document.getElementById("p2p-id").innerText = "Peer ID: " + pid;
      }

      function onInstanceList(instances) {
        let select = document.getElementById("sel");
        let backupVal = select.value || "";
        select.innerHTML = ""
        instances.forEach((instanceName) => {
          select.appendChild(new Option(instanceName,instanceName));
        });
        select.value = backupVal;
        savedInstances = instances;
      }

      const usp = new URLSearchParams(location.search);
      const uri = usp.get("uri");
      const socket = usp?io(uri):io();

      var firstLaunch = true;
      let peerConn = null;

      socket.on("connected", () => msg("Socket connected. " + socket.io.engine.transport.name));

      socket.on("identify", () => {
        msg("Identifier request ok");
        socket.emit("controller");
        socket.emit("instances");
        // Sync instances list
        /*setInterval(() => {
          socket.emit("instances");
        }, 10 * 1000);*/
        setInterval(() => {
          console.log("Sent ping command");
          socket.emit("loopback", Date.now());
        }, 3 * 1000);

        socket.on("loopback", (start) => {
          document.getElementById("ping").innerText = "Ping: " + (Date.now() - start) + "ms (" + socket.io.engine.transport.name + ")";
        });

        Array.from(document.getElementsByClassName("action")).forEach(element => {
          element.addEventListener("click", () => {
            socket.emit(element.getAttribute("data-action"),document.getElementById("sel").value);
            if(peerConn){
              peerConn.send({
                event: "fwd",
                args: [element.getAttribute("data-action"),document.getElementById("sel").value]
              });
            }
          });
        });
        let role = usp.get("role");

        if(role && firstLaunch){
          firstLaunch = false;
          const peer = new Peer({
            debug: parseInt(usp.get("debug")) || 2,
            config: {
              'iceServers': [
                { 'urls': [
'stun:openrelay.metered.ca',
'stun:stun.l.google.com:19302','stun:stun.ekiga.net','stun:stun.ideasip.com','stun:stun.rixtelecom.se',
'stun:stun.stunprotocol.org:3478',
'stun:stun.voiparound.com',
'stun:stun.voipbuster.com',
'stun:stun.voipstunt.com',
'stun:stun.voxgratia.org',
'stun:stunserver.org',
'stun:stun.nextcloud.com:443',
'turn:openrelay.metered.ca:80',
'turn:openrelay.metered.ca:443',
'turn:openrelay.metered.ca:443?transport=tcp'
],
username: "openrelayproject",
credential: "openrelayproject" }
              ], 'sdpSemantics': 'unified-plan'
            }
          });
          advStatus("Initalized Peer");
          peer.on("open", (id) => {
            displayID(id);
            advStatus("Obtained Peer ID");
            socket.emit("peer_created", id);

            if(role == "relay_reciever"){
            advStatus("0 connected");

            socket.emit("setMasterPeerLocal",localStorage.getItem("authkey"),peer.id);

            fetch("/set_master_peer/" + peer.id, {
              headers: {
                authorization: localStorage.getItem("authkey")
              }
            }).then((resp) => {
              if(resp.status == 200){
                advStatus("Master Peer Status set!");
              }else{
                advStatus("Master Peer Status set failed! Code: " + resp.status);
              }
            }).catch(ex => {
              alert("Fetch Error " + ex);
            });
            
            let peerConnects = 0;
            peer.on("connection", (conn) => {
              conn.send({
                event: "hello"
              });

              conn.on("data", (data) => {
                if(data.event == "ping"){
                  conn.send({
                    event: "ping",
                    time: data.time
                  });
                }else if(data.event == "instances"){
                  conn.send({
                    event: "instanceList",
                    data: savedInstances
                  });
                }else if(data.event == "fwd"){
                  // FORWARD!
                  console.log("Forward",data.args);
                  socket.emit(...data.args);
                }
              });

              peerConnects ++;
              advStatus(peerConnects + " connects total");
            })

            }else if(role == "relay_sender"){
              fetch("/get_master_peer").then(resp => {
                if(resp.status == 200){
                  resp.json().then(data => {
                    advStatus("Got master peer ID " + data.peerID);
                    let conn = peer.connect(data.peerID);
                    conn.on("open", () => {
                      advStatus("Connected to master peer!");
                      peerConn = conn;
                      conn.send({
                        event: "hello"
                      });
                      conn.send({
                        event: "instances"
                      });
                      setInterval(() => {
                        conn.send({
                          event: "ping",
                          time: Date.now()
                        });
                      }, 3 * 1000);
                    });

                    conn.on("data", (data) => {
                      if(data.event == "instanceList"){
                        onInstanceList(data.data);
                      }else if(data.event == "ping"){
                        advStatus("Direct Ping: " + (Date.now() - data.time) + "ms");
                      }
                    });
                  });
                }else{
                  alert("Fetch Error " + resp.status);
                }
              }).catch(ex => {
                alert("Fetch Errror " + ex);
              })
            }
          });
          
        }
      });

      socket.on("instanceList", onInstanceList);

      document.addEventListener('keydown', (event) => {
        if (event.key === "Escape") { event.keyCode = 27; }
        console.log("Key code",event.key,event.keyCode,"down");
        let payload = ["input",document.getElementById("sel").value,event.keyCode,true];
        socket.emit(...payload);
        peerConn.send({
          event: "fwd",
          args: payload
        });
      });

      document.addEventListener('keyup', (event) => {
        if (event.key === "Escape") { event.keyCode = 27; }
        console.log("Key code",event.key,event.keyCode,"up");
        let payload = ["input",document.getElementById("sel").value,event.keyCode,false];
        socket.emit(...payload);
        peerConn.send({
          event: "fwd",
          args: payload
        });
      });

    </script>
    <div id="advanced-status"></div>
    <div id="p2p-id"></div>
  </body>
</html>