Multi User Video Chat Application - If the second user joins the video chat it Works only with breakpoint and not working while we run the application

Question

I've developed a Multi - user video chat application. I used angular for front end,Node.js for backend and socket.io for client - server Communication. The issue is if the second user joins the video chat the video is not displayed but when I use breakpoint to debug it works perfectly fine.I don't know what is the issue. I've attached the ts code here.

public myVideo: HTMLVideoElement;
UserId: { chatroom: any; user: any; message: String; name: String; };
myPeer: any;
constructor(private webSocket: WebSocketService, private 
chatRoom: ChatroomService) {
    this.peerConnection();  
    this.myVideo = document.createElement('video')
    this.myVideo.muted = true;
    this.sendingToOthers();
}

ngOnInit(): void {
}

peerConnection() {
      this.myPeer = new Peer(this.chatRoom.loginId, {
      host: '/',
      port: '3001'
    })

    this.myPeer.on('open', id => {
    this.webSocket.videoCallJoining(id);
   })
}

sendingToOthers() {
  navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
  }).then(Stream => {
  this.addVideoStream(this.myVideo, Stream)

   this.myPeer.on('call', async call => {
    call.answer(Stream);
    const video = document.createElement('video');
    await call.on('stream', userVideoStream => {
      this.addVideoStream(video, userVideoStream);
    })
    })

    this.webSocket.socket.on('user-connected', id => {
      this.connectToNewUser(id, Stream)
      })
    })
  }

async addVideoStream(video: HTMLVideoElement, stream: any) {
  video.srcObject = stream;
  video.addEventListener('loadedmetadata', async function () {
    await video.play();
  })
  const videoGrid = document.getElementById('videoGrid')
  videoGrid.append(video);
}


async connectToNewUser(userId: any, Stream: any) {
  const call = this.myPeer.call(userId, Stream);
  const video = document.createElement('video')
  await call.on('stream', async userVideoStream => {
    await this.addVideoStream(video, userVideoStream);
  })
  call.on('close', () => {
    video.remove()
  })
}

I think It is because of using the eventlistener. It triggered early. Suggest me how to fix this.