cyberdeck 0.1.3

A library for easily creating WebRTC data channel connections
Documentation 
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<html>
  <body>
    Message: <textarea id="message">This is my DataChannel message!</textarea>
    <br />
    <button onclick="window.sendMessage()">Send Message</button> <br />

    <div id="logs"></div>
  </body>
  <script>
    async function run() {
      let pc = new RTCPeerConnection({
        iceServers: [
          {
            urls: "stun:stun.l.google.com:19302",
          },
        ],
      });
      let log = (msg) => {
        document.getElementById("logs").innerHTML += msg + "<br>";
      };

      let sendChannel = pc.createDataChannel("foo");
      sendChannel.onclose = () => console.log("sendChannel has closed");
      sendChannel.onopen = () => console.log("sendChannel has opened");
      sendChannel.onmessage = (e) =>
        log(
          `Message from DataChannel '${sendChannel.label}' payload '${e.data}'`
        );

      pc.oniceconnectionstatechange = (e) => log(pc.iceConnectionState);
      pc.onicecandidate = async (event) => {
        if (event.candidate === null) {
          const localDescription = btoa(JSON.stringify(pc.localDescription));
          const result = await fetch("/connect", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(localDescription),
          });
          const answer = await result.json();
          pc.setRemoteDescription(
            new RTCSessionDescription(JSON.parse(atob(answer)))
          );
        }
      };

      pc.onnegotiationneeded = (e) =>
        pc
          .createOffer()
          .then((d) => pc.setLocalDescription(d))
          .catch(log);

      window.sendMessage = () => {
        let message = document.getElementById("message").value;
        if (message === "") {
          return alert("Message must not be empty");
        }

        sendChannel.send(message);
      };
    }
    run().then();
  </script>
</html>