javascript - 传入流未显示 PeerJs

Question

我正在尝试使用 peerJs 库拨打电话。在我的应用程序中，我有两种类型的用户：Client和Streamer. 只有客户端可以呼叫流媒体。而客户端调用的时候，他只发出audiostream，streamer需要发出audio和videostream；所以我接下来要做的是：

我的客户端组件的一部分：

public peer;
public outGoingCall;
public incomingStream = new BehaviourSubject(null);

ngOnInit() {
  this.peer = new Peer();
}

public callToPeer(peerId, localClientStream) {
  this.outGoingCall = this.peer.call(peerId, localClientStream);
  this.outGoingCall.on('stream', (remoteStream: MediaStream) => {
      console.log('incoming stream from streamer ', remoteStream);
      // so here in console I see incoming stream and it is active;
      // but when I apply it in video tag I don't see anything! Why?
      this.incomingStream.next(remoteStream);

    });
}

客户端组件的 HTML 文件：

    <div class="call-holder" *ngIf="incomingStream | async as stream">
      <video [srcObject]="stream" autoplay></video>
    ...
    </div>

这里是 Streamer 组件的代码：

public peer;
public clientsCall;
public incomingClientsStream = new BehaviourSubject(null);

ngOnInit() {
  this.peer = new Peer('streamer-1'); // exact id for this streamer;

  this.peer.on('call', (mediaCon) => {
      console.log('incoming call from Client');

      // Allow only a single media
      if (this.clientsCall && this.clientsCall.open) {
        mediaCon.close();
      }

      mediaCon.on('stream', (streamFromClient: MediaStream) => {
        console.log('stream from client ', streamFromClient);
        this.incomingClientsStream.next(streamFromClient);
      });

      mediaCon.on('close', (some) => {
        console.log(some);
        console.log('client closed connections');
      });

      this.clientsCall = mediaCon;
    });
}

public answerTheCall() {
  navigator.mediaDevices.getUserMedia({audio: true, video: true})
    .then((localStream) => this.clientsCall.answer(localStream));
}

在流媒体 HTML 文件中，我收听来自客户端的音频，它可以工作：

<div *ngIf="(incomingStream | async) as clientStream">
      <audio [srcObject]="clientStream" autoplay></audio>
    </div>

所以问题是，当我接听客户的电话并向他发送我的本地流时，我可以在 Streamer 的页面上看到它，但在 Clients 页面上看不到。为什么？为什么我没有收到来自流媒体的流？

标签： javascriptwebviewwebrtcvideo-streamingpeerjs