WebRTC support for XRMP

index.html

@@ -11,7 +11,7 @@
     <script src="xrmp.js"></script>
     <script src="xrmp-three.js"></script>
     <script>
-let display, fakeXrDisplay, tabs = [], tabId = 0, xrmp, lastPresseds = [false, false], lastAxes = [[0.5, 0.5], [0.5, 0.5]], lastPadToucheds = [false, false], scrollFactors = [0, 0], scaleFactors = [1, 1], viewport = new THREE.Vector4(), menuOpen = false, orbitControls, transformControls;
+let display, fakeXrDisplay, tabs = [], tabId = 0, xrmp, lastPresseds = [false, false], lastAxes = [[0.5, 0.5], [0.5, 0.5]], lastPadToucheds = [false, false], scrollFactors = [0, 0], scaleFactors = [1, 1], viewport = new THREE.Vector4(), menuOpen = false, orbitControls, transformControls, pc, dc;
 
 const links = [
   {
@@ -127,7 +127,9 @@
 ].map(({id, name, url}) => ({id, name, url, iconMesh: null}));
 let servers = [];
 let serversLoading = false;
-let serverConnectedUrl = null;
+let connectedDatachannel = null;
+
+const rtcConfig = {iceServers: [{urls: "stun:stun.1.google.com:19302"}]};
 
 const DEFAULT_URL = 'http://lol.com';
 const DEFAULT_REGISTRY_URL = 'http://xrmp.exokit.org:9001';
@@ -696,7 +698,7 @@
   rig.menuMesh.urlMesh.updateText();
   rig.menuMesh.listMesh.updateList();
 
-  if (serverConnectedUrl && local) {
+  if (connectedDatachannel && local) {
     const objectMesh = xrmp.createObjectMesh(tab.id, {
       url: tab.url,
       d,
@@ -725,8 +727,9 @@
   tabs.length = 0;
   layers.length = 0;
 };
-const _openServer = (serverUrl, host) => {
-  xrmp = new XRMultiplayerTHREE(new XRMultiplayer(serverUrl));
+const _openParty = (datachannel, host) => {
+  xrmp = new XRMultiplayerTHREE(new XRMultiplayer(datachannel));
+
   xrmp.localPlayerMesh = null;
   xrmp.onopen = () => {
     xrmp.localPlayerMesh = xrmp.createLocalPlayerMesh(undefined, {});
@@ -748,16 +751,16 @@
     }
   };
   xrmp.onsync = () => {
-    console.log('server sync', serverUrl);
+    console.log('server sync', datachannel);
 
-    serverConnectedUrl = serverUrl;
+    connectedDatachannel = datachannel;
     rig.menuMesh.listMesh.updateList();
   };
   xrmp.onclose = () => {
-    console.log('server close', serverUrl);
+    console.log('server close', datachannel);
 
     xrmp = null;
-    serverConnectedUrl = null;
+    connectedDatachannel = null;
     rig.menuMesh.listMesh.updateList();
   };
   xrmp.onobjectadd = objectMesh => {
@@ -995,6 +998,86 @@
           window.browser.setSetting(key, value);
           break;
         }
+        case 'createOffer': {
+          async function createOffer() {
+            pc = new RTCPeerConnection(rtcConfig);
+            dc = pc.createDataChannel("chat", {negotiated: true, id: 0});
+
+            dc.onopen = () => {
+              console.log("dc.onopen");
+              _openParty(dc, true);
+            }
+            dc.onmessage = e => console.log(`> ${e.data}`);
+            pc.oniceconnectionstatechange = e => console.log(pc.iceConnectionState);
+
+            await pc.setLocalDescription(await pc.createOffer());
+            pc.onicecandidate = ({candidate}) => {
+              if (candidate) return;
+              iframe.contentWindow.postMessage({
+                sdp: pc.localDescription.sdp
+              });
+            };
+          }
+          createOffer();
+
+          break;
+        }
+        case 'createAnswer': {
+          const {sdp} = m.data;
+
+          async function createAnswer() {
+            pc = new RTCPeerConnection(rtcConfig);
+            dc = pc.createDataChannel("chat", {negotiated: true, id: 0});
+
+            dc.onopen = () => {
+              console.log("dc.onopen");
+              _openParty(dc, true);
+            }
+
+            if (pc.signalingState != "stable") return;
+
+            await pc.setRemoteDescription({type: "offer", sdp: sdp});
+            await pc.setLocalDescription(await pc.createAnswer());
+
+            pc.onicecandidate = ({candidate}) => {
+              if (candidate) return;
+              iframe.contentWindow.postMessage({
+                sdp: pc.localDescription.sdp
+              });
+            };
+          }
+          createAnswer();
+
+          break;
+        }
+        case 'submitAnswer': {
+          console.log("inside of --- submit answer 1");
+
+          const {sdp} = m.data;
+          console.log("inside of --- submit answer 2");
+          console.log("inside of --- submit answer 2.5 sdp = " + sdp);
+
+
+          dc.onopen = () => console.log("------ dc.onopen");
+          console.log("inside of --- submit answer 3");
+
+          dc.onmessage = e => console.log(`> ${e.data}`);
+          console.log("inside of --- submit answer 4");
+
+          pc.oniceconnectionstatechange = e => console.log(pc.iceConnectionState);
+          console.log("inside of --- submit answer 5");
+
+          if (pc.signalingState != "have-local-offer") return;
+          console.log("inside of --- submit answer 6");
+
+
+          pc.setRemoteDescription({type: "answer", sdp: sdp});
+          console.log("inside of --- submit answer 7");
+
+          console.log("submitted answer");
+
+          break;
+        }
         case 'fakeVrMetrics': {
           const {width, height} = m.data;
           _endFakeVrDisplay()
@@ -1053,7 +1136,6 @@
     iframe,
   };
 })();
-
 // events
 
 let unbindEvents = null;
@@ -1112,13 +1194,27 @@
           transformControls = new THREE.TransformControls(camera, document.body, viewport);
           transformControls.iframe = iframe;
 
+          for(i = 0; i < tabs.length; i++){
+            if(tabs[i].iframe === iframe){
+              transformControls.transformId = tabs[i].id;
+            }
+          }
+
           transformControls.addEventListener('dragging-changed', e => {
             orbitControls.enabled = !e.value;
           });
           transformControls.addEventListener('change', e => {
             iframe.position = mesh.position.toArray();
             iframe.orientation = mesh.quaternion.toArray();
             iframe.scale = mesh.scale.toArray();
+            if (connectedDatachannel) {
+              const objectMesh = xrmp.getObjectMeshes().find(objectMesh => objectMesh.object.id === transformControls.transformId);
+              const {object} = objectMesh;
+              const {objectMatrix} = object;
+              mesh.position.toArray(objectMatrix.position);
+              mesh.quaternion.toArray(objectMatrix.quaternion);
+              object.pushUpdate();
+            }
           });
 
           const mesh = new THREE.Object3D();
@@ -1441,7 +1537,7 @@
           const tab = tabs.splice(tabIndex, 1)[0];
           const {id} = tab;
 
-          if (serverConnectedUrl) {
+          if (connectedDatachannel) {
             const objectMesh = xrmp.getObjectMeshes().find(objectMesh => objectMesh.object.id === id);
             xrmp.removeObjectMesh(objectMesh);
           }
@@ -2005,7 +2101,7 @@
 
           _renderScrollbar(links.length);
         } else if (optionsMesh.list === 'party') {
-          if (!serverConnectedUrl) {
+          if (!connectedDatachannel) {
             if (!serversLoading) {
               if (servers.length > 0) {
                 const localServers = servers.slice(mesh.scrollIndex, mesh.scrollIndex + 4);
@@ -2070,7 +2166,7 @@
             ctx.fillRect(menuWidth*0.8, 0, menuWidth*0.18, menuHeight);
 
             ctx.fillStyle = '#FFF';
-            ctx.fillText(serverConnectedUrl, 100, menuHeight/2 + 20);
+            ctx.fillText(connectedDatachannel, 100, menuHeight/2 + 20);
 
             ctx.fillStyle = '#000';
             ctx.fillText('x', menuWidth*0.88, menuHeight*0.7);
@@ -2361,7 +2457,7 @@
       // boxMesh.updateMatrixWorld();
       boxMesh.visible = true;
 
-      if (serverConnectedUrl) {
+      if (connectedDatachannel) {
         const objectMesh = xrmp.getObjectMeshes().find(objectMesh => objectMesh.object.id === moveTab.id);
         const {object} = objectMesh;
         const {objectMatrix} = object;
@@ -2839,7 +2935,7 @@
                   }
                 }
               } else if (menuMesh.optionsMesh.list === 'party') {
-                if (!serverConnectedUrl) {
+                if (!connectedDatachannel) {
                   const localServers = servers.slice(menuMesh.listMesh.scrollIndex, menuMesh.listMesh.scrollIndex + 4);
                   for (let j = 0; j < localServers.length; j++) {
                     if (y >= urlBarOffset*j && y < urlBarOffset*(j+1)) {
@@ -2860,7 +2956,7 @@
                           const server = localServers[j];
                           const {name} = server;
 
-                          _openServer(`${registryUrl}/servers/${name}`, true);
+                          // _openParty(`${registryUrl}/servers/${name}`, true);
                         }
 
                         intersectionSpecs[i] = null;
@@ -3121,7 +3217,7 @@
     vrCamera.matrixWorld.decompose(localVector, localQuaternion, localVector2);
     localSkinMesh.update(vrCamera, controllerMeshes); */
 
-    if (serverConnectedUrl) {
+    if (connectedDatachannel) {
       const vrCamera = renderer.vr.enabled ? renderer.vr.getCamera(camera).cameras[0] : camera;
       vrCamera.matrixWorld.decompose(xrmp.localPlayerMesh.hmd.position, xrmp.localPlayerMesh.hmd.quaternion, localVector2);