多用户视频聊天应用程序 - 如果第二个用户加入视频聊天，它仅适用于断点，并且在我们运行应用程序时不起作用

问：

我开发了一个多用户视频聊天应用程序。我使用 angular 作为前端，使用 Node.js 用于后端，使用 socket.io 用于客户端 - 服务器通信。 问题是，如果第二个用户加入视频聊天，则不会显示视频，但是当我使用断点进行调试时，它工作得很好。我不知道问题出在哪里。我在这里附上了ts代码。

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()
  })
}

我认为这是因为使用了事件侦听器。它很早就触发了。建议我如何解决这个问题。