Webrt c с angular и firestore: видео звонящего не видно другому пользователю

Question

Привет, я пытаюсь реализовать webrt c с angular и firestore. У меня есть два видео-тега: один для вызывающего и один для удаленного.

1. Звонящий инициирует вызов.
2. Предложение от вызывающего сохраняется в документе firestore
3. Я могу см. видео вызывающего абонента в его приложении
4. вызываемый абонент щелкните присоединиться к вызову
5. вызываемый абонент получит предложение sdp и введите = предложение из firestore и задает удаленное описание
6. вызываемый createAnswer (sdp, type = answer) и обновить в том же хранилище данных do c.
7. Вызывающий абонент прослушивает обновленный снимок do c, получает ответ и добавляет в удаленное описание

Я вижу что srcObject вызова обновляется медиа, но я не вижу видео

app.component.html
<video #local autoplay></video>
<video #remote autoplay></video>

  const hasMedia = !!(navigator.getUserMedia = navigator.getUserMedia
    || navigator.webkitGetUserMedia 
    || navigator.mozGetUserMedia 
    || navigator.msGetUserMedia);

  if(!hasMedia) {
    return;
  }

  navigator.getUserMedia = navigator.getUserMedia 
    || navigator.webkitGetUserMedia
    || navigator.mozGetUserMedia 
    || navigator.msGetUserMedia;
  
  const contraints = { video: true, audio: true };
  const pc1 = new RTCPeerConnection(null);
  pc1.onnegotiationneeded = async () => {
    try {
      const offer = await pc1.createOffer();
      await pc1.setLocalDescription(offer);
      // send offer to other peer
      const type = pc1.localDescription.type;
      const sdp = pc1.localDescription.sdp;
      const room = await this
        .dataService.getRoom().ref
        .onSnapshot(async (snap) => {
          const data = snap.data();
          const sessionDescription = new RTCSessionDescription({
            sdp: data.answer.answer.sdp,
            type: data.answer.answer.type
          }) 
          await pc1.setRemoteDescription(sessionDescription);

        }, (error) => {})
      this.dataService.addRoom( { offer: {
        sdp: sdp,
        type: type
      } });
    } catch(err) {
      console.log(err);
    } 
  }

  const localStream = await navigator.mediaDevices.getUserMedia(contraints);
  localStream.getTracks().forEach((track) => {
    pc1.addTrack( track, localStream );
    this.local.nativeElement.srcObject = localStream;
  });
}
public async join() {
  const pc2 = new RTCPeerConnection(null);
  const remoteStream = new MediaStream();
  this.remote.nativeElement.srcObject = remoteStream;
  pc2.ontrack = (event) => {
    remoteStream.addTrack(event.track);
  };
  const room = await this.dataService.getRoom().ref.get();
  const desc = room.data();
  const sessionDescription = new RTCSessionDescription({
    sdp: desc.offer.offer.sdp,
    type: desc.offer.offer.type
  }) 
  await pc2.setRemoteDescription(sessionDescription);
  const answer = await pc2.createAnswer();
  this.dataService.addAnswer({ answer: {
    sdp: answer.sdp,
    type: answer.type
  }});
}```