peers / peerjs

Simple peer-to-peer with WebRTC.
https://peerjs.com
MIT License
12.46k stars 1.43k forks source link

Display error when receive call with angular #1059

Open TuanLeAnh1003 opened 1 year ago

TuanLeAnh1003 commented 1 year ago

This is my code

ngOnInit() {
    this.getPeerId()
}

getPeerId = () => {
    this.peer.on('open', (id) => {
      console.log(id);

      this.peerId = id;
    });

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

        call.answer(stream);
        call.on('stream', (remoteStream:any) => {
          if (!this.peerList.includes(call.peer)) {
            console.log("getPeerId", remoteStream); // It is still working

            this.streamRemoteVideo(remoteStream);
            this.currentPeer = call.peerConnection;
            this.peerList.push(call.peer);
          }
        });

      }).catch(err => {
        console.log(err + 'Unable to get media');
      });
    });
  }

streamRemoteVideo(stream: any) {
    const video = document.createElement('video');
    video.classList.add('video');
    video.style.width = "100%";
    video.srcObject = stream;
    video.play();

    this.remoteVideo?.nativeElement.append(video);
  }

callPeer(id: string): void {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then((stream) => {
      this.lazyStream = stream;

      stream.getVideoTracks().forEach((track) => {
        track.stop();
        track.enabled = false;
      });

      const call = this.peer.call(id, stream);

      call.on('stream', (remoteStream: any) => {
        if (!this.peerList.includes(call.peer)) {
          console.log("callPeer", remoteStream);
          this.streamRemoteVideo(remoteStream);
          this.currentPeer = call.peerConnection;
          this.peerList.push(call.peer);
        }
      });
    }).catch(err => {
      console.log(err + 'Unable to connect');
    });
  }

My issue is when I fill the peerId of receiver side, sender will display stream of receiver side but the opposite is not. Although, in console log, the receiver side still catch the action call from sender side but its still not display the video in UI.

Sender side: sender side

Receiver side: receiver side

Please help me!!!

thejus557 commented 2 weeks ago

im having same issue, any fix for this ?