1 document
.title
= "Strapp.io Host"
4 const conf
= {"iceServers": [{ "urls": "stun:stun.1.google.com:19302" }] }
5 const clients
= new Map([])
6 const iceCandidates
= []
8 let screenStream
/* TODO: Remove if can access localStreams */
12 /* TODO: duplicate in both client.js and host.jhs */
13 function getPublicKey() {
14 return new Promise( (resolve
, reject
) => {
15 /* Check local storage for public key */
16 if (!window
.localStorage
.getItem('public-key')) {
17 console
.log('public key is undefined')
18 /* If doesn't exist, generate public and private key pair, store in
20 crypto
.subtle
.generateKey(
23 publicExponent
: new Uint8Array([0x01, 0x00, 0x01]),
24 hash
: {name
: "SHA-256"}
27 ['encrypt', 'decrypt']
29 /* TODO: Do we need to store the private key as well? */
30 crypto
.subtle
.exportKey('jwk', keyPair
.publicKey
)
31 .then((exportedKey
) => {
32 window
.localStorage
.setItem('publicKey', exportedKey
)
33 console
.log('public key is' + window
.localStorage
.getItem('publicKey'))
40 resolve(window
.localStorage
.getItem('publicKey'))
45 function sendClientICE(clientPubKey
, hostPubKey
, iceCandidate
) {
46 console
.log('Host: Allocating ice candidate for client')
47 console
.log(iceCandidate
)
48 iceCandidates
.push(JSON
.stringify({
51 hostPubKey
: hostPubKey
, /* TODO: do we need to send this? */
52 clientPubKey
: clientPubKey
,
57 function handleNewClientConnection(offer
) {
58 /* New Client Connection*/
59 hpc
= new RTCPeerConnection(conf
)
61 clients
.set(offer
.pubKey
, hpc
)
62 hpc
.setRemoteDescription(offer
.sdp
)
64 hpc
.createAnswer().then((answer
) => {
65 return hpc
.setLocalDescription(answer
)
69 hpc
.onicecandidate
= (event
) => {
70 if (event
.candidate
) {
71 sendClientICE(offer
.pubKey
, hpk
.n
, event
.candidate
)
74 console
.log('Host: Finished allocating ICE candidates')
77 console
.log('Host: Sending answer to Client ')
78 wsock
.send(JSON
.stringify({
80 sdp
: hpc
.localDescription
,
82 clientPubKey
: offer
.pubKey
86 console
.log(`error in host answer ${err}`)
89 hpc
.oniceconnectionstatechange
= () => {
90 console
.log('iceConnectionState = ' + hpc
.iceConnectionState
)
92 hpc
.ondatachannel
= (evt
) => {
93 dataChannel
= evt
.channel
94 dataChannel
.onmessage
= (msg
) => {
95 let clientMessage
= JSON
.parse(msg
.data
)
96 console
.log(`client message is ${clientMessage}`)
97 hpc
.setRemoteDescription(clientMessage
.sdp
).then(() => {
98 console
.log('should be streaming now')
101 dataChannel
.onopen
= () => {
102 /* If !screenStream, gUM */
103 screenStream
.getTracks().forEach( (track
) => {
104 hpc
.addTrack(track
, screenStream
)
106 console
.log(hpc
.getSenders())
108 hpc
.createOffer().then((offer
) => {
109 return hpc
.setLocalDescription(offer
)
111 dataChannel
.send(JSON
.stringify({
112 "cmd": "< screen dataChannel",
113 "sdp": hpc
.localDescription
,
114 "pubKey": hpc
['hpk'].n
119 hpc
.onnegotiationneeded
= () => {
120 console
.log('negotiation needed')
125 function handleNewIceSubmission(msg
) {
126 console
.log('Host: Adding new ice candidate')
127 const hpc
= clients
.get(msg
.pubKey
)
128 let candidate
= new RTCIceCandidate(msg
.ice
)
129 hpc
.addIceCandidate(candidate
)
132 function handleIceRequest(msg
) {
133 console
.log('Host: Handling ice candidate request')
134 console
.log(iceCandidates
)
135 const hpc
= clients
.get(msg
.pubKey
)
136 const iceCandidate
= iceCandidates
.pop()
137 if (iceCandidate
!== undefined) {
138 wsock
.send(iceCandidate
)
140 if (hpc
.iceGatheringState
.localeCompare('gathering') === 0) {
141 wsock
.send(`{"cmd" : "< ice pubKey", "clientPubKey":"${msg.pubKey}", "iceState": "g"}`)
143 else if (hpc
.iceGatheringState
.localeCompare('complete') === 0) {
144 wsock
.send(`{"cmd" : "< ice pubKey", "clientPubKey":"${msg.pubKey}", "iceState": "c"}`)
150 if ("WebSocket" in window
) {
151 document
.addEventListener('DOMContentLoaded', (event
) => {
152 document
.body
.innerHTML
= '<div>Choose options for client</div> <video autoplay></video>'
153 navigator
.mediaDevices
.getUserMedia({
154 video
: { mediaSource
: "screen",
155 width
: {max
: '1920'},
156 height
: {max
: '1080'},
157 frameRate
: {max
: '10'}} })
158 .then(function(mediaStream
) {
159 let video
= document
.querySelector('video')
160 screenStream
= mediaStream
161 console
.log(mediaStream
)
162 video
.srcObject
= mediaStream
163 console
.log('Grabbed media')
164 video
.onloadedmetadata = function(e
) {
169 .catch(function(err
) {
170 document
.body
.innerHTML
= 'Help me help you. Reload the page and allow screen sharing!'
172 }); // always check for errors at the end.
178 wsock
= new WebSocket(`${_strapp_protocol}://${window.location.hostname}:${_strapp_port}`)
179 wsock
.onopen
= () => {
180 console
.log(`Strapped to ${_strapp_protocol}://${window.location.hostname}:${_strapp_port}`)
183 wsock
.onmessage
= (serverMsg
) => {
184 /* msg is either offer or ice candidate or ice candidate request*/
186 /* What if data null? */
187 console
.log(`serverMsg = ${serverMsg.data}`)
188 let msg
= JSON
.parse(serverMsg
.data
)
190 const clientID
= msg
.pubKey
192 /* TODO: redo this trash */
193 if (clients
.has(clientID
)) {
195 handleNewIceSubmission(msg
)
196 } else if (msg
.sdp
) {
197 //handleRepeatedOffer
199 handleIceRequest(msg
)
204 console
.log('Host: Client that doesnt exist is sending ice submissions')
205 } else if (msg
.sdp
) {
206 handleNewClientConnection(msg
)
208 console
.log('Host: Client that doesnt exist is sending ice requests')
218 document
.addEventListener('DOMContentLoaded', () => {
219 document
.body
.innerHTML
= 'Websockets not supported in your browser'