LilStreamy/clientV/scripts/rtc.js

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; 
};