Desarrollé una aplicación de chat de video multiusuario. Usé angular para el front-end, Node.js para el backend y socket.io para la comunicación cliente-servidor. El problema es que si el segundo usuario se une al chat de video, el video no se muestra, pero cuando uso el punto de interrupción para depurar, funciona perfectamente bien. No sé cuál es el problema. He adjuntado el código ts aquí.

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

Creo que es por usar el eventlistener. Se activó temprano. Sugiérame cómo arreglar esto.