gaming

client/App.tsx

@@ -1,61 +1,56 @@
-import { openWindow, deleteWindow } from "corium";
-import { h, render, Component, Fragment } from 'preact';
+import { Component, Fragment, h, render } from "preact";
 import { RTCConnection } from "./rtc";
 
-
-import { setOffer, setCallback } from "./firebase";
-
+const _ = [h, render, Component, Fragment];
 
 export default class App extends Component {
   rtc = new RTCConnection({
     onmessage: console.log,
     onopen: () => {
       this.rtc.dataChannel.send("test message");
-    }
+    },
   });
 
-  state = {
-
+  state = {};
 
+  onInput = (e) => {
+    const { value } = e.target;
+    this.setState((prev) => ({ ...prev, answer: value }));
   };
 
-  onInput = e => {
-    const { value } = e.target;
-    this.setState(prev => ({ ...prev, answer: value }));
-  }
-
   render(props, state) {
-    setCallback(this.rtc.answer.bind(this.rtc));
-    return <>
-      <div>
+    // setCallback(this.rtc.answer.bind(this.rtc));
+    return (
+      <>
+        <div></div>
+        <button
+          onClick={async () => {
+            let offer = await this.rtc.createOffer();
+            console.log("offer created", offer);
+            console.log(JSON.stringify(offer));
 
-      </div>
-
-      <button onClick={async () => {
-        let offer = await this.rtc.createOffer();
-        console.log("offer created", offer);
-
-        setOffer(JSON.stringify(offer));
-
-        // this.setState(prev => ({ ...prev, offer: JSON.stringify(offer) }));
-
-
-      }}>create offer</button>
-      <p>
-        offer: <code>{state.offer}</code>
-      </p>
-
-      paste answer: <input type="text" value={state.answer} onInput={this.onInput} />
-
-      <button onClick={async () => {
-        let { answer, candidates } = JSON.parse(state.answer);
-        await this.rtc.answer(answer, candidates);
-        alert("connected");
-      }}>
-        connect
-      </button>
-
-    </>;
+            // setOffer(JSON.stringify(offer));
 
+            // this.setState(prev => ({ ...prev, offer: JSON.stringify(offer) }));
+          }}
+        >
+          create offer
+        </button>
+        <p>
+          offer: <code>{state.offer}</code>
+        </p>
+        paste answer:{" "}
+        <input type="text" value={state.answer} onInput={this.onInput} />
+        <button
+          onClick={async () => {
+            let { answer, candidates } = JSON.parse(state.answer);
+            await this.rtc.answer(answer, candidates);
+            alert("connected");
+          }}
+        >
+          connect
+        </button>
+      </>
+    );
   }
 }

package.json

@@ -16,6 +16,7 @@
     "esbuild": "0.19.0",
     "firebase": "^10.1.0",
     "preact": "^10.16.0",
+    "ts-node": "^10.9.1",
     "wrtc": "^0.4.7"
   }
 }

server/main.ts

@@ -1,16 +1,6 @@
 import dotenv from "dotenv";
 import * as wrtc from "wrtc";
 
-
-import { app } from "../firebase-config";
-console.log(app);
-import { getDatabase, ref, onValue, set } from "firebase/database";
-
-const db = getDatabase();
-let reff = ref(db, "/peers/demo");
-
-
-
 const configuration = {
   iceServers: [
     {
@@ -38,18 +28,19 @@ async function connect(offer, candidates) {
     };
   };
   peer.onconnectionstatechange = () => {
-    console.log('Connection state:', peer.connectionState);
+    console.log("Connection state:", peer.connectionState);
   };
   peer.onsignalingstatechange = () => {
-    console.log('Signaling state:', peer.signalingState);
+    console.log("Signaling state:", peer.signalingState);
   };
   peer.oniceconnectionstatechange = () => {
-    console.log('ICE connection state:', peer.iceConnectionState);
+    console.log("ICE connection state:", peer.iceConnectionState);
   };
   peer.onicegatheringstatechange = () => {
-    console.log('ICE gathering state:', peer.iceGatheringState);
+    console.log("ICE gathering state:", peer.iceGatheringState);
   };
   peer.onicecandidate = (event: any) => {
+    console.log("onicecandidate");
     if (event.candidate) {
       localCandidates.push(event.candidate);
       return;
@@ -58,26 +49,44 @@ async function connect(offer, candidates) {
       answer: peer.localDescription,
       candidates: localCandidates,
     };
-    let string = JSON.stringify(payload)
-
-    set(reff, string);
+    let string = JSON.stringify(payload);
+    console.log(string);
   };
   await peer.setRemoteDescription(offer);
   let answer = await peer.createAnswer();
   await peer.setLocalDescription(answer);
   for (let candidate of candidates) {
+    if (!candidate.candidate) continue;
+    console.log({ candidate });
     await peer.addIceCandidate(candidate);
   }
 }
-onValue(reff, (snapshot) => {
-  const rawdata = snapshot.val();
-
-  let data = JSON.parse(rawdata);
-  console.log(data);
 
+function addPeer(data) {
   if (data && data.offer && data.localCandidates) {
     const { offer, localCandidates } = data;
     connect(offer, localCandidates);
   }
-});
+}
 
+addPeer({
+  offer: {
+    type: "offer",
+    sdp: "v=0\r\no=mozilla...THIS_IS_SDPARTA-99.0 1516055380756088130 0 IN IP4 0.0.0.0\r\ns=-\r\nt=0 0\r\na=fingerprint:sha-256 A1:67:6E:32:56:AC:94:67:35:BF:55:F9:A5:53:F7:73:42:82:9F:85:80:F6:CA:FB:2E:97:52:04:42:2C:9E:E2\r\na=group:BUNDLE 0\r\na=ice-options:trickle\r\na=msid-semantic:WMS *\r\nm=application 9 UDP/DTLS/SCTP webrtc-datachannel\r\nc=IN IP4 0.0.0.0\r\na=sendrecv\r\na=ice-pwd:4e784021c6dce7679ceb6493b1fcaa15\r\na=ice-ufrag:8e234e4a\r\na=mid:0\r\na=setup:actpass\r\na=sctp-port:5000\r\na=max-message-size:1073741823\r\n",
+  },
+  localCandidates: [
+    {
+      candidate:
+        "candidate:1 1 UDP 1686052863 64.98.208.26 44197 typ srflx raddr 0.0.0.0 rport 0",
+      sdpMid: "0",
+      sdpMLineIndex: 0,
+      usernameFragment: "8e234e4a",
+    },
+    {
+      candidate: "",
+      sdpMid: "0",
+      sdpMLineIndex: 0,
+      usernameFragment: "8e234e4a",
+    },
+  ],
+});