Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display error when receive call with angular #1059

Open
TuanLeAnh1003 opened this issue Mar 23, 2023 · 0 comments
Open

Display error when receive call with angular #1059

TuanLeAnh1003 opened this issue Mar 23, 2023 · 0 comments
Labels
client related to peerjs client

Comments

@TuanLeAnh1003
Copy link

TuanLeAnh1003 commented Mar 23, 2023

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!!!

@irgalamarr irgalamarr added the client related to peerjs client label Feb 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
client related to peerjs client
Projects
None yet
Development

No branches or pull requests

2 participants