Not being able to display videostream of other user using single mediastream

So i am doing a video calling app project using node.js,peer.js,soket.io to get myself familiar with them:

here is the First Method I tried:

I tried to give call to peer and to answer that call using the stream from same place. It failed as Peer's call event didn't trigger and no answer came.(line 1) Hence no stream was sent in response.

const myVideo = document.createElement("video");
myVideo.muted = true;
var videoGrid = document.getElementById("video-grid");
navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
}).then((stream) => {
    addVideo(myVideo, stream);


    peer.on('call', (call) => {                                           //LINE 1
        call.answer(stream);
        const video = document.createElement("video");
        call.on('stream', (remoteStream) => {
            addVideo(video, remoteStream);
        });
    });


    socket.on('user-connected', (userId) => {
        const call = peer.call(userId,
            stream);
        const video = document.createElement("video");
        call.on('stream', function (remoteStream) {
            addVideo(video, remoteStream);
        });
    })

});


peer.on('open', id => {
    socket.emit('join-room', ROOM_ID, id);
})

const addVideo = (video, mediaStream) => {
    video.srcObject = mediaStream;
    video.addEventListener('loadedmetadata', () => {
        video.play();
    })
    videoGrid.append(video);
}

In following I gave call to peer,and answered it using different streams. This Worked.

const myVideo = document.createElement("video");
myVideo.muted = true;
var videoGrid = document.getElementById("video-grid");
navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
}).then((stream) => {
    addVideo(myVideo, stream);
});


peer.on('call', (call) => {
    navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
    }).then((stream) => {

        call.answer(stream);
        const video = document.createElement("video");
        call.on('stream', (remoteStream) => {
            addVideo(video, remoteStream);
        });
    })
});



const connectToNewUser = (userId) => {
    navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
    }).then((stream) => {
        const call = peer.call(userId,
            stream);
        const video = document.createElement("video");
        call.on('stream', function (remoteStream) {
            addVideo(video, remoteStream);
        });
    })
}

So why did this work? can streams not be used repeatedly???

Also I tried to add myself in a call to have two of my videos showing side by side, I noticed that as i increase the instances of myself the streams were getting more and more laggy. Is this a result of multiple streams from same camera??

(ONLY MAIN FUNCTION SHOWED ABOVE TO DECREASE CODE.)