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