Fixed light client & added Docker config

client/src/components/usernameChooser.vue

@@ -3,7 +3,7 @@
     <h3>Enter a username</h3>
     <b-field position="is-centered">
       <b-input :value="name" v-model="name" placeholder="..."></b-input>
-      <button class="button is-success" @click="connect">Login</button>
+      <button class="button is-success" @click="sendName">Login</button>
     </b-field>
   </div>
 </template>
@@ -18,7 +18,12 @@ export default {
   },
   methods: {
     async sendName () {
-
+      if (this.name.length > 0) {
+        this.$rtc.send({
+          type: "login",
+          name: this.name 
+        })
+      }
     }
   }
 }

client/src/scripts/rtc.js

@@ -1,5 +1,6 @@
 var name
 var connections = {}
+var stream
 
 const configuration = {
   iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
@@ -11,181 +12,177 @@ const offerOptions = {
 }
 
 function handleLogin (success) {
-  if (success === false) { 
+  if (success === false) {
     alert('try a different username')
   } else {
   }
 }
 
 async function createPeerConnection (target) {
-    console.log('CREATED PEER CONNECTION')
-    var connection = new RTCPeerConnection(configuration)
-    connections[target] = connection
+  console.log('CREATED PEER CONNECTION')
+  var connection = new RTCPeerConnection(configuration)
+  connections[target] = connection
 
-    connection.onicecandidate = function(event) { 
-        if (event.candidate) { 
-            send({ 
-                type: 'candidate',
-                name: name,
-                target: target,
-                candidate: event.candidate
-            })
-        }
+  connection.onicecandidate = function (event) {
+    if (event.candidate) {
+      send({
+        type: 'candidate',
+        name: name,
+        target: target,
+        candidate: event.candidate
+      })
     }
+  }
 
-    connection.onnegotiationneeded = function() { handleNegotiationNeededEvent(target); }
-    connection.ontrack = function(event) { handleTrackEvent(event); }
-    connection.onsignalingstatechange = function() { handleSignalingStateChangeEvent(connection); }
-    connection.oniceconnectionstatechange = function() { handleICEConnectionStateChangeEvent(connection); }
-    connection.onicegatheringstatechange = function() { handleICEGatheringStateChangeEvent(connection); }
+  connection.onnegotiationneeded = function () { handleNegotiationNeededEvent(target) }
+  connection.ontrack = function (event) { handleTrackEvent(event) }
+  connection.onsignalingstatechange = function () { handleSignalingStateChangeEvent(connection) }
+  connection.oniceconnectionstatechange = function () { handleICEConnectionStateChangeEvent(connection) }
+  connection.onicegatheringstatechange = function () { handleICEGatheringStateChangeEvent(connection) }
 }
 
 function handleICEConnectionStateChangeEvent (connection) {
-    console.log('ICE CONNECTION CHANGE '+connection.iceConnectionState)
+  console.log('ICE CONNECTION CHANGE ' + connection.iceConnectionState)
 }
 
 function handleICEGatheringStateChangeEvent (connection) {
-    console.log('ICE GATHERING CHANGE '+connection.iceGatheringState)
+  console.log('ICE GATHERING CHANGE ' + connection.iceGatheringState)
 }
 
 async function makeOffer (target) {
-    createPeerConnection(target)
-    
-    var connection = connections[target]
+  createPeerConnection(target)
 
-    var offer = await connection.createOffer()
-    send({ 
-        type: 'offer',
-        name: name,
-        target: target,
-        offer: offer 
-    }); 
-    await connection.setLocalDescription(offer)
-    
+  var connection = connections[target]
+
+  var offer = await connection.createOffer()
+  send({
+    type: 'offer',
+    name: name,
+    target: target,
+    offer: offer
+  })
+  await connection.setLocalDescription(offer)
 }
 
-async function handleOffer (offer, target) { 
-    console.log('GOT OFFER FROM '+target)
-    await createPeerConnection(target)
+async function handleOffer (offer, target) {
+  console.log('GOT OFFER FROM ' + target)
+  await createPeerConnection(target)
 
-    var connection = connections[target]
+  var connection = connections[target]
 
-    await connection.setRemoteDescription(new RTCSessionDescription(offer))
+  await connection.setRemoteDescription(new RTCSessionDescription(offer))
 
-    if (stream) {
-        console.log('STREAM DETECTED')
-        stream.getTracks().forEach((track) => {
-            console.log('ADDED TRACK')
-            connection.addTrack(track, stream)
-        });
-    }
-        
-    //create an answer to an offer 
-    var answer = await connection.createAnswer()
-    
-    await connection.setLocalDescription(answer)
-            
-    send({ 
-        type: 'answer',
-        name: name,
-        target: target,
-        answer: answer 
-    });
-};
+  if (stream) {
+    console.log('STREAM DETECTED')
+    stream.getTracks().forEach((track) => {
+      console.log('ADDED TRACK')
+      connection.addTrack(track, stream)
+    })
+  }
 
-async function handleAnswer (answer, target) { 
-    console.log('GOT ANSWER FROM '+target)
-    var connection = connections[target]
-    await connection.setRemoteDescription(new RTCSessionDescription(answer))
-};
+  var answer = await connection.createAnswer()
 
-async function handleCandidate (candidate, target) { 
-    console.log('GOT CANDIDATE FROM '+target)
-    var connection = connections[target]
-    await connection.addIceCandidate(new RTCIceCandidate(candidate))
-};
+  await connection.setLocalDescription(answer)
+
+  send({
+    type: 'answer',
+    name: name,
+    target: target,
+    answer: answer
+  })
+}
+
+async function handleAnswer (answer, target) {
+  console.log('GOT ANSWER FROM ' + target)
+  var connection = connections[target]
+  await connection.setRemoteDescription(new RTCSessionDescription(answer))
+}
+
+async function handleCandidate (candidate, target) {
+  console.log('GOT CANDIDATE FROM ' + target)
+  var connection = connections[target]
+  await connection.addIceCandidate(new RTCIceCandidate(candidate))
+}
 
 async function handleNegotiationNeededEvent (target) {
-    console.log('NEGOTIATION NEEDED FROM '+target)
+  console.log('NEGOTIATION NEEDED FROM ' + target)
 
-    var connection = connections[target]
-    var offer = await connection.createOffer(offerOptions)
-    
-    await connection.setLocalDescription(offer)
-    
-    send({
-        type: 'video-offer',
-        name: name,
-        target: target,
-        sdp: connection.localDescription
-    });
+  var connection = connections[target]
+  var offer = await connection.createOffer(offerOptions)
+
+  await connection.setLocalDescription(offer)
+
+  send({
+    type: 'video-offer',
+    name: name,
+    target: target,
+    sdp: connection.localDescription
+  })
 }
 
 function handleLeave () {
-    connections.foreach( (connection) => {
-        connection.close()
-        connection.onicecandidate = null
-        //connection.onaddstream = null
-        connection = null
-    });
-    connections = {};
-    
-    remoteVideo.src = null
-};
+  connections.foreach((connection) => {
+    connection.close()
+    connection.onicecandidate = null
+    // connection.onaddstream = null
+    connection = null
+  })
+  connections = {}
+  remoteVideo.src = null
+}
 
 function handleUserlist (list) {
-    console.log('GOT USER LIST')
-
+  console.log('GOT USER LIST')
 }
 
 async function handleVideoOffer (sdp, target) {
-    console.log('GOT VIDEO OFFER FROM '+target)
-    await createPeerConnection(target)
-    var connection = connections[target]
-    await connection.setRemoteDescription(new RTCSessionDescription(sdp))
+  console.log('GOT VIDEO OFFER FROM '+target)
+  await createPeerConnection(target)
+  var connection = connections[target]
+  await connection.setRemoteDescription(new RTCSessionDescription(sdp))
 
-    if (stream) {
-        console.log('STREAM DETECTED')
-        stream.getTracks().forEach((track) => {
-            console.log('ADDED TRACK')
-            connection.addTrack(track, stream)
-        });
-    }
+  if (stream) {
+    console.log('STREAM DETECTED')
+    stream.getTracks().forEach((track) => {
+      console.log('ADDED TRACK')
+      connection.addTrack(track, stream)
+    })
+  }
 
-    var answer = await connection.createAnswer()
-    await connection.setLocalDescription(answer)
+  var answer = await connection.createAnswer()
+  await connection.setLocalDescription(answer)
 
-    send({
-        type: 'video-answer',
-        name: name,
-        target: target,
-        sdp: answer
-    });    
+  send({
+    type: 'video-answer',
+    name: name,
+    target: target,
+    sdp: answer
+  });    
 }
 
 async function handleVideoAnswer (sdp, target) {
-    console.log('GOT VIDEO ANSWER FROM '+target)
+  console.log('GOT VIDEO ANSWER FROM '+target)
 
-    var connection = connections[target]
-    await connection.setRemoteDescription(new RTCSessionDescription(sdp))
+  var connection = connections[target]
+  await connection.setRemoteDescription(new RTCSessionDescription(sdp))
 }
 
 async function handleSignalingStateChangeEvent (connection) {
-    console.log('STATE CHANGED TO : ' + connection.signalingState)
-    switch(connection.signalingState) {
-        case 'closed':
-            await connection.close()
-            break
-    }
+  console.log('STATE CHANGED TO : ' + connection.signalingState)
+  switch(connection.signalingState) {
+    case 'closed':
+      await connection.close()
+      break
+  }
 }
 
 function handleTrackEvent (event) {
-    console.log('GOT TRACK')
-    remoteVideo.srcObject = event.streams[0]
+  console.log('GOT TRACK')
+  remoteVideo.srcObject = event.streams[0]
 }
 
 //connecting to our signaling server
-var conn = new WebSocket('ws://localhost:9090')
+const conn = new WebSocket('ws://localhost:9090')
   
 conn.onopen = function () { 
    console.log('Connected to the signaling server')
@@ -193,46 +190,46 @@ conn.onopen = function () {
   
 //when we got a message from a signaling server 
 conn.onmessage = function (msg) { 
-    console.log('Got message', msg.data)
+  console.log('Got message', msg.data)
 
-    var data = JSON.parse(msg.data)
+  var data = JSON.parse(msg.data)
 
-    switch(data.type) { 
-        case 'login': 
-            handleLogin(data.success)
-            break
-        
-        case 'offer': 
-            handleOffer(data.offer, data.name)
-            break
-
-        case 'answer': 
-            handleAnswer(data.answer, data.name)
-            break
-        
-        case 'candidate': 
-            handleCandidate(data.candidate, data.name)
-            break
-
-        case 'userlist':
-            handleUserlist(data)
-            break
-
-        case 'leave': 
-            handleLeave()
-            break
-
-        case 'video-offer':
-            handleVideoOffer(data.sdp, data.name)
-            break
+  switch(data.type) { 
+    case 'login': 
+      handleLogin(data.success)
+      break
     
-        case 'video-answer':
-            handleVideoAnswer(data.sdp, data.name)
-            break
+    case 'offer': 
+      handleOffer(data.offer, data.name)
+      break
 
-        default: 
-            break
-    }
+    case 'answer': 
+      handleAnswer(data.answer, data.name)
+      break
+    
+    case 'candidate': 
+      handleCandidate(data.candidate, data.name)
+      break
+
+    case 'userlist':
+      handleUserlist(data)
+      break
+
+    case 'leave': 
+      handleLeave()
+      break
+
+    case 'video-offer':
+      handleVideoOffer(data.sdp, data.name)
+      break
+  
+    case 'video-answer':
+      handleVideoAnswer(data.sdp, data.name)
+      break
+
+    default: 
+      break
+  }
 }
   
 conn.onerror = function (err) { 
@@ -244,7 +241,8 @@ function send (message) {
   conn.send(JSON.stringify(message))
 }
 
-export {
+export default{
+  conn,
   send,
   makeOffer
 }

client/src/scripts/signal.js

@@ -0,0 +1,62 @@
+const connection = new WebSocket('ws://localhost:9090')
+  
+connection.onopen = function () { 
+   console.log('connectionected to the signaling server')
+};
+  
+//when we got a message from a signaling server 
+connection.onmessage = function (msg) { 
+  console.log('Got message', msg.data)
+
+  var data = JSON.parse(msg.data)
+
+  switch(data.type) { 
+    case 'login': 
+      handleLogin(data.success)
+      break
+    
+    case 'offer': 
+      handleOffer(data.offer, data.name)
+      break
+
+    case 'answer': 
+      handleAnswer(data.answer, data.name)
+      break
+    
+    case 'candidate': 
+      handleCandidate(data.candidate, data.name)
+      break
+
+    case 'userlist':
+      handleUserlist(data)
+      break
+
+    case 'leave': 
+      handleLeave()
+      break
+
+    case 'video-offer':
+      handleVideoOffer(data.sdp, data.name)
+      break
+  
+    case 'video-answer':
+      handleVideoAnswer(data.sdp, data.name)
+      break
+
+    default: 
+      break
+  }
+}
+  
+connection.onerror = function (err) { 
+   console.log('Got error', err)
+}
+
+function send (message) {     
+  console.log('Sended message', message)
+  connection.send(JSON.stringify(message))
+}
+
+export default {
+  send
+}