WebRTC cannot show a video from peer

问题:

I've tried to implement code from this sample in my app but something went wrong. The problem is my second peer, doesen't play the stream on <video>

The short description of algorithm is this: The "host" peer gets stream from camera and showing it on self <video>, then create connection with second peer and sending to him a stream. The second peer receive the stream and show on his <video>

The problem is my second peer receive stream, but couldn't play it on . Why? I don't know.

Here there are some code from my app:

Host Peer init:

var configuration ={
  'iceServers': [
    {
      "urls": "turn:numb.viagenie.ca",
      "username": "[e-mail]",
      "credential": "xxxxx"
    }
  ],RTCIceTransportPolicy:'all'
};

var offerOptions = { offerToReceiveVideo: 1, offerToReceiveAudio: 1 };
const peer = new RTCPeerConnection(configuration);
peer.addStream(this.stream);
peer.createOffer(
      (desc)=>{
        console.log("host createOffer ", desc)
        peer.setLocalDescription(desc).then(
          (data)=>{
            console.log("host setLocalDesc succes")
            this.sendInvitation(desc, user)
        },(error)=>{
            console.log("host setLocalDesc error")
        });

      },(error)=>{
        console.log("host createOffer error",error)
      },
      offerOptions
    );

this.sendInvitation(desc,user) sends via websockets the desc object to "second" peer

Host code for accepting new peer

client.setRemoteDescription(clientAnswer).then(
  (data) => console.log("host setRemote succes"),
  (error) => console.log("host setRemote succes")
)

client.onicecandidate = function(e){
  console.log("try to addIceCandidate",e);
  client.addIceCandidate(e.candidate).then(
    (data)=>console.log("host addIceCandidate succes"),
    (error)=>console.log("host addIceCandidate error")
  );
};

client.oniceconnectionstatechange = function(e){
  console.log("host connectionChange", e)
};

Client, "second" peer init

var configuration ={
  'iceServers': [
    {
      "urls": "turn:numb.viagenie.ca",
      "username": "[e-mail]",
      "credential": "xxxxx"
    }
  ],RTCIceTransportPolicy:'all'
};

this.peerClient = new RTCPeerConnection(configuration);

this.peerClient.onaddstream = (ev)=>{
  this.isConnected = true;
  console.log("client onAddStream ", ev);

  if (this.video.nativeElement.srcObject !== ev) {

    var streams = this.peerClient.getRemoteStreams();

    console.log(this.peerClient.getLocalStreams())
    console.log(this.peerClient.getRemoteStreams())
    console.log(streams[0].getTracks())
    console.log(ev.stream)

    this.video.nativeElement.srcObject = ev.stream;
    this.stream = ev.stream;
  }

  this.calculateChatHeight();
};

And the function in "client"/"second" peer side - the join button

this.peerClient.setRemoteDescription(peerOffer).then(
        (data) => console.log("client setRemote succes",data),
        (error) => console.log("client setRemote error",error)
      )

      this.peerClient.createAnswer().then(
        (desc)=>{

          this.peerClient.setLocalDescription(desc).then(
            (data) => console.log("client setLocal succes", data),
            (error) => console.log("client setLocal error", error)
          );

          this.answer = desc;

          this.sendPeerAnswer();

        },(error) => console.log("client createAnswer error", error)
      )

      this.peerClient.onicecandidate = (e)=>{
        this.peerClient.addIceCandidate(e.candidate).then(
          (data)=>console.log("client addIceCandidate succes", data),
          (error)=>console.log("client addIceCandidate error", error)
        )
      };

Now, the code looks good, but the video is not showing on client

Please have a look on this screen from client console - everything looks nice.

Do You have any idea what's wrong? Please, help

EDIT I realised that the bug is in IceConnection. The correct way for IceConnection is ICE state:new => checking => connected => completed But in my example is stopping at CHECKING. Do You know why?