Client prototype, signaling server & PWA client

clientV/scripts/rtc.js

@@ -0,0 +1,220 @@
+var name; 
+var connectedUser;
+
+var loginInput = document.querySelector('#loginInput'); 
+var loginBt = document.querySelector('#loginBt'); 
+
+var callToUsernameInput = document.querySelector('#callInput');
+var callBtn = document.querySelector('#callBt'); 
+
+var hangUpBtn = document.querySelector('#disconnectBt');
+
+const remoteVideo = document.querySelector('#video'); 
+const remoteVideo2 = document.querySelector('#video2'); 
+
+var videoInput = document.querySelector('#videoInput');
+
+var yourConn; 
+var stream;
+
+var reader;
+
+const configuration = { 
+    iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
+}; 
+
+const offerOptions = {
+    offerToReceiveAudio: 1,
+    offerToReceiveVideo: 1
+};
+
+videoInput.addEventListener("change", function (event) {
+   var file = this.files[0]
+   var type = file.type
+   var videoNode = remoteVideo2
+   var canPlay = videoNode.canPlayType(type)
+   if (canPlay === '') canPlay = 'no'
+   var message = 'Can play type "' + type + '": ' + canPlay
+   var isError = canPlay === 'no'
+   //displayMessage(message, isError)
+
+   if (isError) {
+     return
+   }
+
+   var fileURL = URL.createObjectURL(file)
+   videoNode.src = fileURL
+
+   
+});
+
+remoteVideo.onplay = function() {
+   if(remoteVideo.mozCaptureStream()) stream = remoteVideo.mozCaptureStream();
+   else stream = remoteVideo.captureStream();
+
+   //remoteVideo2.srcObject = stream;
+
+   stream.getTracks().forEach((track) => {
+      console.log("ADDED TRACK");
+      yourConn.addTrack(track, stream);
+   });
+
+   //yourConn.addStream(stream); 
+}
+  
+// Login when the user clicks the button 
+loginBt.addEventListener("click", function (event) { 
+   name = loginInput.value;
+	
+   if (name.length > 0) { 
+      send({ 
+         type: "login", 
+         name: name 
+      }); 
+   }
+	
+});
+  
+function handleLogin(success) { 
+    if (success === false) { 
+        alert("Ooops...try a different username"); 
+    } else { 		
+      //********************** 
+      //Starting a peer connection 
+      //********************** 
+      
+      yourConn = new RTCPeerConnection(configuration);
+      
+      yourConn.ontrack = function (event) {
+         console.log("GOT TRACK");
+         remoteVideo.srcObject = event.streams[0];
+      }
+
+      if (stream) {
+         remoteVideo2.srcObject = stream;
+
+         stream.getTracks().forEach((track) => {
+            yourConn.addTrack(track, stream);
+         });
+      }
+
+      // setup stream listening 
+      //yourConn.addStream(stream); 
+
+      
+      // Setup ice handling 
+      yourConn.onicecandidate = function (event) { 
+         if (event.candidate) { 
+            send({ 
+               type: "candidate", 
+               candidate: event.candidate 
+            }); 
+         } 
+      };		
+
+      yourConn.onnegotiationneeded = handleNegotiationNeededEvent;
+
+      window.setInterval(getConnectionStats, 1000);
+      
+   } 
+};
+
+function getConnectionStats() {
+   /*yourConn.getStats().then(stats => {
+      var statsOutput = "";
+      stats.forEach(report => {
+         statsOutput += report;
+      });
+      console.log(statsOutput);
+   });*/
+   console.log(yourConn.connectionState);
+   
+}
+
+//initiating a call 
+callBtn.addEventListener("click", function () { 
+   var callToUsername = callToUsernameInput.value;
+	
+   if (callToUsername.length > 0) {
+	
+      connectedUser = callToUsername;
+		
+      // create an offer 
+      yourConn.createOffer(function (offer) { 
+         send({ 
+            type: "offer", 
+            offer: offer 
+         }); 
+			
+         yourConn.setLocalDescription(offer); 
+      }, function (error) { 
+         alert("Error when creating an offer"); 
+      },
+      offerOptions);
+		
+   } 
+});
+  
+//when somebody sends us an offer 
+function handleOffer(offer, name) { 
+   console.log("GOT OFFER");
+   connectedUser = name; 
+   yourConn.setRemoteDescription(new RTCSessionDescription(offer));
+	
+   //create an answer to an offer 
+   yourConn.createAnswer(function (answer) { 
+      yourConn.setLocalDescription(answer); 
+		
+      send({ 
+         type: "answer", 
+         answer: answer 
+      }); 
+		
+   }, function (error) { 
+      alert("Error when creating an answer"); 
+   }); 
+};
+  
+//when we got an answer from a remote user
+function handleAnswer(answer) { 
+   console.log("GOT ANSWER");
+   yourConn.setRemoteDescription(new RTCSessionDescription(answer)); 
+};
+  
+//when we got an ice candidate from a remote user 
+function handleCandidate(candidate) { 
+   console.log("GOT CANDIDATE");
+   yourConn.addIceCandidate(new RTCIceCandidate(candidate)); 
+};
+   
+function handleNegotiationNeededEvent() {
+   console.log("NEGOTIATION NEEDED");
+   yourConn.createOffer().then(function(offer) {
+      return yourConn.setLocalDescription(offer);
+   })
+   .then(function() {
+      send({
+         type: "video-offer",
+         sdp: yourConn.localDescription
+      });
+   });
+}
+
+//hang up 
+hangUpBtn.addEventListener("click", function () { 
+
+   send({ 
+      type: "leave" 
+   });  
+	
+   handleLeave(); 
+});
+  
+function handleLeave() { 
+   connectedUser = null; 
+   remoteVideo.src = null; 
+	
+   yourConn.close(); 
+   yourConn.onicecandidate = null; 
+   //yourConn.onaddstream = null; 
+};