var loginInput = document.querySelector('#loginInput'); 
var loginBt = document.querySelector('#loginBt'); 

var callInput = document.querySelector('#callInput');
var callBt = document.querySelector('#callBt'); 

var disconnectBt = document.querySelector('#disconnectBt');

const remoteVideo = document.querySelector('#video'); 

var videoInput = document.querySelector('#videoInput');

var stream;

loginBt.addEventListener("click", function (event) { 
    name = loginInput.value;
     
    if (name.length > 0) { 
        send({ 
            type: "login", 
            name: name 
        }); 
    }
});

callBt.addEventListener("click", function () { 
    var callToUsername = callInput.value;
        
    if (callToUsername.length > 0) {
        makeOffer(callToUsername);           
    } 
});

disconnectBt.addEventListener("click", function () { 
    send({ 
        type: "leave",
        name: name
    });        
    handleLeave(); 
});

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() {
    console.log("ADD STREAM");
    if(remoteVideo.mozCaptureStream()) stream = remoteVideo.mozCaptureStream();
    else stream = remoteVideo.captureStream();
}