X-Git-Url: https://git.kengrimes.com/?p=henge%2Fkiak.git;a=blobdiff_plain;f=client.js;h=6cdf1504ef6c6b407ee8b1558d2b64ec24fa836b;hp=19ad38f4a802e004788e3b1c136070a744b85d18;hb=a8bdc6c150c4f3417b2f18a480552a4015c248b1;hpb=251ee2d932ad53039e8fc6b99424dc84ad18bbc3

diff --git a/client.js b/client.js
index 19ad38f..6cdf150 100644
--- a/client.js
+++ b/client.js
@@ -2,10 +2,8 @@ const body = document.createElement('body')
 const root = document.createElement('div')
 document.title = "Strapp.io Client"
 const conf = {"iceServers": [{ "urls": "stun:stun.1.google.com:19302" }] }
-let dataChannel
-let hostScreen
 
-/* TODO: duplicate in both client.js and host.js */
+/* TODO: This is duplicated in both client.js and host.js */
 function getPublicKey() {
   return new Promise( (resolve, reject) => {
     /* Check local storage for public key */
@@ -38,7 +36,7 @@ function getPublicKey() {
 
 }
 
-function postServer(url, data) {
+function sendHost(url, data) {
   const request = new XMLHttpRequest()
   request.open('POST', url, true)
   request.setRequestHeader('Content-Type', 'application/json' )
@@ -46,44 +44,38 @@ function postServer(url, data) {
   request.send(data)
 }
 
-/* TODO: All this does is wrap a function in a promise. Allows pollServerForAnswer
-to call itself recursively with the same promise */
-function pollServer(url, clientPubKey, func) {
-  return new Promise((resolve, reject) => {
-    func(url, clientPubKey, resolve, reject )
-  })
-}
-
 /* Poll the server. Send get request, wait for timeout, send another request.
 Do this until...? Can be used for either reconnecting or waiting for answer*/
-function pollServerForAnswer(url, data, resolve, reject) {
-  const request = new XMLHttpRequest()
-  request.open('GET', url, true)
-  /* But there is no JSON? */
-  request.setRequestHeader('Content-Type', 'application/json' )
-  request.setRequestHeader('X-Strapp-Type', 'client-sdp-offer')
-  request.setRequestHeader('X-Client-Offer', JSON.stringify(data))
-  request.onreadystatechange = () => {
-    if (request.status === 200) {
-      if(request.readyState === 4) {
-        console.log('Client: Recieved Answer from Host')
-        console.log(request)
-        resolve(request.response)
+function requestHostAnswer(url, data) {
+  return new Promise((resolve, reject) => {
+    const request = new XMLHttpRequest()
+    request.open('GET', url, true)
+    /* But there is no JSON? */
+    request.setRequestHeader('Content-Type', 'application/json' )
+    request.setRequestHeader('X-Strapp-Type', 'client-sdp-offer')
+    request.setRequestHeader('X-Strapp-Pubkey', data.pubKey)
+    request.onreadystatechange = () => {
+      if (request.status === 200) {
+        if(request.readyState === 4) {
+          console.log('Client: Recieved Answer from Host')
+          console.log(request)
+          resolve(request.response)
+        }
+      }
+      else if (request.status === 504) {
+        console.log('timed out, resending')
+        resolve(requestHostAnswer(url, data))
+      }
+      else {
+        reject('server unhandled response of status ' + request.status)
       }
     }
-    else if (request.status === 504) {
-      console.log('timed out, resending')
-      pollServerForAnswer(url, data, resolve, reject)
-    }
-    else {
-      reject('server unhandled response of status ' + request.status)
-    }
-  }
-  request.send()
+    request.send(data)
+  })
 }
 
 /* Poll server for ice candidates until ice is complete */
-function pollServerForICECandidate(cpc, url, pubKey) {
+function requestHostICE(cpc, url, pubKey) {
   let intervalID = window.setInterval(() => {
     if (cpc.iceConnectionState.localeCompare('connected') !== 0
     && cpc.iceConnectionState.localeCompare('completed') !== 0) {
@@ -101,17 +93,17 @@ function pollServerForICECandidate(cpc, url, pubKey) {
             let response = JSON.parse(request.response)
             switch(response['iceState']) {
               case "a":
-                cpc.addIceCandidate(new RTCIceCandidate(response.ice))
-                break
+              cpc.addIceCandidate(new RTCIceCandidate(response.ice))
+              break
               case "g": /* Gathering so let interval keep polling */
-                break
+              break
               case "c": /* host iceState == Complete, stop bugging it */
-                clearInterval(intervalID)
-                clearTimeout()
-                break
+              clearInterval(intervalID)
+              clearTimeout()
+              break
               default:
-                console.log('Unhandled iceState in pollServerForICECandidate()' + response['iceState'])
-                break
+              console.log('Unhandled iceState in requestHostICE()' + response['iceState'])
+              break
             }
           }
         }
@@ -131,6 +123,7 @@ function pollServerForICECandidate(cpc, url, pubKey) {
 
 /* Create and send offer -> Send ICE Candidates -> Poll for ICE Candidates */
 getPublicKey().then((cpk) => {
+  let dataChannel
   console.log('Client: Create and send offer')
   const cpc = new RTCPeerConnection(conf)
 
@@ -150,16 +143,17 @@ getPublicKey().then((cpk) => {
         sdp: cpc.localDescription,
         pubKey: cpk.n
       }
-      return pollServer(window.location, offer, pollServerForAnswer)
-    }).then((serverResponse) => {
+      return requestHostAnswer(window.location, offer)
+    })
+    .then((serverResponse) => {
       const answer = JSON.parse(serverResponse)
       console.log('Client: Polling for ICE candidates')
-      pollServerForICECandidate(cpc, window.location, cpk.n)
+      requestHostICE(cpc, window.location, cpk.n)
       cpc.setRemoteDescription(answer.sdp)
       cpc.onicecandidate = (event) => {
         if (event.candidate) {
           console.log('Client: Sending ice candidate to host')
-          postServer(window.location, JSON.stringify({
+          sendHost(window.location, JSON.stringify({
             cmd: '> ice pubkey',
             ice: event.candidate,
             pubKey: cpk.n
@@ -175,16 +169,16 @@ getPublicKey().then((cpk) => {
       console.log('error in sdp handshake: ' + err)
     })
   }
-  /* Start data channel */
+  /* Start data channel, triggers on negotiation needed */
   dataChannel = cpc.createDataChannel("sendChannel");
+
+  /* Triggered when Host adds track to peer connection */
   cpc.ontrack = (event) => {
-    console.log(`track event is ${event}`)
-    let remoteRTPSenders = cpc.getSenders()
     let remoteRTPReceivers = cpc.getReceivers()
-    console.log(remoteRTPReceivers)
-    /* Add each remoteRTPSenders.track to own stream */
+    let hostScreen
     let video = document.querySelector('video')
-    video.autoplay = true
+    /* TODO: Audio, video, or other track? */
+    console.log(remoteRTPReceivers)
     console.log(video)
     hostScreen = new MediaStream([remoteRTPReceivers[0].track])
     if(!video.srcObject) {
@@ -192,14 +186,15 @@ getPublicKey().then((cpk) => {
     }
     console.log(hostScreen.getVideoTracks())
     console.log(video.srcObject)
-    video.play()
     video.onloadedmetadata = () => {
       video.play()
     }
   }
+
   dataChannel.onmessage = (msg) => {
     /* Get mediaStream from host and add it to the video */
     let hostMessage = JSON.parse(msg.data)
+    console.log('Client: Renego')
     cpc.setRemoteDescription(hostMessage.sdp).then(() => {
       cpc.createAnswer().then((answer) => {
         return cpc.setLocalDescription(answer)
@@ -220,6 +215,6 @@ getPublicKey().then((cpk) => {
 })
 document.addEventListener('DOMContentLoaded', () => {
 
-    document.body.innerHTML = `<button> Setting up connection with host  </button>`
+  document.body.innerHTML = `<button> Setting up connection with host  </button>`
 
 });