X-Git-Url: https://git.kengrimes.com/?p=henge%2Fkiak.git;a=blobdiff_plain;f=client-test.js;fp=client-test.js;h=503ac14e36223ca3ebf045d6f9a3277cc82f5c22;hp=0000000000000000000000000000000000000000;hb=5ae8bb9adc37111641414da912600ea97d834874;hpb=6e147610b0a69225f15e09dcbdac29adb4ed66fc

diff --git a/client-test.js b/client-test.js
new file mode 100644
index 0000000..503ac14
--- /dev/null
+++ b/client-test.js
@@ -0,0 +1,222 @@
+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" }] }
+
+/* TODO: This is duplicated in both client.js and host.js */
+function getPublicKey() {
+  return new Promise( (resolve, reject) => {
+    /* Check local storage for public key */
+    if (!window.localStorage.getItem('public-key')) {
+      /* If doesn't exist, generate public and private key pair, store in
+      local storage */
+      crypto.subtle.generateKey(
+        { name:'RSA-OAEP',
+        modulusLength: 2048,
+        publicExponent: new Uint8Array([0x01, 0x00, 0x01]),
+        hash: {name: "SHA-256"}
+      },
+      true,
+      ['encrypt', 'decrypt']
+    ).then((keyPair) => {
+      /* TODO: Do we need to store the private key as well? */
+      crypto.subtle.exportKey('jwk', keyPair.publicKey)
+      .then((exportedKey) => {
+        window.localStorage.setItem('publicKey', exportedKey)
+        console.log('public key is' + window.localStorage.getItem('publicKey'))
+        resolve(exportedKey)
+      })
+
+    })
+  }
+  else {
+    resolve(window.localStorage.getItem('publicKey'))
+  }
+})
+
+}
+
+function sendHost(url, data) {
+  const request = new XMLHttpRequest()
+  request.open('POST', url, true)
+  request.setRequestHeader('Content-Type', 'application/json' )
+  request.setRequestHeader('X-Strapp-Type', 'ice-candidate-submission')
+  request.send(data)
+}
+
+/* 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 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.setRequestHeader('X-Strapp-Offer', JSON.stringify(data.sdp))
+    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)
+      }
+    }
+    request.send()
+  })
+}
+
+/* Poll server for ice candidates until ice is complete */
+function requestHostICE(cpc, url, pubKey) {
+  let intervalID = window.setInterval(() => {
+    if (cpc.iceConnectionState.localeCompare('connected') !== 0
+    && cpc.iceConnectionState.localeCompare('completed') !== 0) {
+      console.log('Client: Polling server begin for intervalID = ' + intervalID)
+      console.log('Client: Requesting ICE Candidates from server')
+      const request = new XMLHttpRequest()
+      request.open('GET', url, true)
+      request.setRequestHeader('Content-Type', 'application/json' )
+      request.setRequestHeader('X-Strapp-Type', 'ice-candidate-request')
+      request.setRequestHeader('X-client-pubkey', pubKey)
+      request.onreadystatechange = () => {
+        if (request.status === 200) {
+          if(request.readyState === 4) {
+            console.log('Client: Recieved ICE response from Host')
+            let response = JSON.parse(request.response)
+            switch(response['iceState']) {
+              case "a":
+              cpc.addIceCandidate(new RTCIceCandidate(response.ice))
+              break
+              case "g": /* Gathering so let interval keep polling */
+              break
+              case "c": /* host iceState == Complete, stop bugging it */
+              clearInterval(intervalID)
+              clearTimeout()
+              break
+              default:
+              console.log('Unhandled iceState in requestHostICE()' + response['iceState'])
+              break
+            }
+          }
+        }
+        else {
+          console.log('server unhandled response of status ' + request.status)
+          clearInterval(intervalID)
+        }
+      }
+      request.send()
+    }
+    else {
+      clearTimeout()
+      clearInterval(intervalID)
+    }
+  }, 5000)
+}
+
+/* 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)
+
+  cpc.oniceconnectionstatechange = () => {
+    console.log('iceConnectionState = ' + cpc.iceConnectionState)
+  }
+
+  cpc.onnegotiationneeded = () => {
+    console.log('negotiation needed!')
+    cpc.createOffer().then((offer) => {
+      return cpc.setLocalDescription(offer)
+    })
+    .then(() => {
+      console.log('Client: Sending offer to host')
+      let offer = {
+        cmd: '> sdp pubKey',
+        sdp: cpc.localDescription,
+        pubKey: cpk.n
+      }
+      console.log(offer)
+      return requestHostAnswer(window.location, offer)
+    })
+    .then((serverResponse) => {
+      const answer = JSON.parse(serverResponse)
+      console.log('Client: Polling for ICE candidates')
+      requestHostICE(cpc, window.location, cpk.n)
+      cpc.setRemoteDescription(answer.sdp)
+      cpc.onicecandidate = (event) => {
+        if (event.candidate) {
+          console.log('Client: Sending ice candidate to host')
+          sendHost(window.location, JSON.stringify({
+            cmd: '> ice pubkey',
+            ice: event.candidate,
+            pubKey: cpk.n
+          }))
+        }
+        else {
+          console.log('Client: No more Ice Candidates to send')
+        }
+      }
+
+
+    }).catch( (err) => {
+      console.log('error in sdp handshake: ' + err)
+    })
+  }
+  /* Start data channel, triggers on negotiation needed */
+  dataChannel = cpc.createDataChannel("sendChannel");
+
+  /* Triggered when Host adds track to peer connection */
+  cpc.ontrack = (event) => {
+    let remoteRTPReceivers = cpc.getReceivers()
+    let hostScreen
+    let video = document.querySelector('video')
+    /* TODO: Audio, video, or other track? */
+    console.log(remoteRTPReceivers)
+    console.log(video)
+    hostScreen = new MediaStream([remoteRTPReceivers[0].track])
+    if(!video.srcObject) {
+      video.srcObject = hostScreen
+    }
+    console.log(hostScreen.getVideoTracks())
+    console.log(video.srcObject)
+    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)
+      }).then(() => {
+        dataChannel.send(JSON.stringify({
+          "cmd": "> screen dataChannel",
+          "sdp": cpc.localDescription
+        }))
+      })
+    })
+
+
+  }
+  dataChannel.onopen = () => {
+    document.body.innerHTML = (`<div><button> Connection with host established! </button></div> <video controls></video>`)
+  }
+
+})
+document.addEventListener('DOMContentLoaded', () => {
+
+  document.body.innerHTML = `<button> Setting up connection with host  </button>`
+
+});