Establish handshake over rust server

web-client/answerScript.js

@@ -37,7 +37,19 @@ function createRemoteConnection(remoteDescJSON) {
         if (e.candidate) {
             const candidate = e.candidate.candidate;
             connectionInfo.candidate = candidate;
-            document.body.append(JSON.stringify(connectionInfo));
+            const body = JSON.stringify(connectionInfo)
+            fetch(
+                'http://localhost:8000/state/json',
+                {
+                    method: 'post',
+                    headers: {'Content-Type': 'application/json'},
+                    body
+                }
+            ).then(response => {
+                if (response.status !== 200) {
+                    throw new Error('bad status ' + response.status);
+                }
+            })
         }
     }
     remoteConnection.onicecandidateerror = err => {

web-client/index.html

@@ -7,10 +7,6 @@
         <h1>Web Rtc</h1>
         <button id="createConnectionBtn">Create Connection</button>
         <br/>
-        <textarea id="remoteDesc" placeholder="Enter remote JSON" style="width: 500px; height: 200px"></textarea>
-        <br/>
-        <button id="connectRemote">Connect</button>
-        <br/>
         <textarea id="sendData" placeholder="Send a message" style="width: 500px; height: 50px"></textarea>
         <br/>
         <button id="sendDataBtn">Send Data</button>

web-client/script.js

@@ -21,12 +21,31 @@ function createConnection() {
         if (e.candidate) {
             const candidate = e.candidate.candidate;
             connectionInfo.candidate = candidate;
-            const answererUrl = 'http://localhost:8000/answerer.html?connection=' + btoa(JSON.stringify(connectionInfo));
+            const answererUrl = 'http://localhost:8080/answerer.html?connection=' + btoa(JSON.stringify(connectionInfo));
             const createLink = document.createElement('a');
             createLink.setAttribute('href', answererUrl);
             createLink.setAttribute('target', 'new');
             createLink.append('Open me ;)');
             document.body.append(createLink);
+            const pollForConnection = setInterval(() => {
+                fetch(
+                    'http://localhost:8000/state/json'
+                ).then(response => {
+                    if (response.status !== 200) {
+                        throw new Error('bad status ' + response.status);
+                    }
+                    return response.json();
+                }).then(data => {
+                    if (data.description) {
+                        console.log('yes');
+                        clearInterval(pollForConnection);
+                        createRemoteConnection(data.description);
+                    }
+                    else {
+                        console.log('no');
+                    }
+                })
+            }, 5000)
         }
     }
     localConnection.onicecandidateerror = err => {
@@ -38,24 +57,17 @@ function createConnection() {
             localConnection.setLocalDescription(desc);
         }
     )
-    const connectRemote = document.getElementById('connectRemote')
 
-    function createRemoteConnection() {
-        const remoteDescText = document.getElementById('remoteDesc').value
-        const remoteDescJSON = JSON.parse(remoteDescText);
+    function createRemoteConnection(desc) {
         const remoteDesc = {
             type: "answer",
-            sdp: remoteDescJSON.description 
+            sdp: desc
         }
-
-        console.dir(remoteDescJSON)
         localConnection.setRemoteDescription(remoteDesc).then((e) => {
             console.log(e)
         });
     }
 
-    connectRemote.addEventListener('click', createRemoteConnection, false)
-
     const sendButton = document.getElementById('sendDataBtn')
     sendButton.addEventListener('click', sendMessage, false)
     function sendMessage() {