Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

156
Vistas
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

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.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda