WebEx JS Integration is not showing video from host

Question

we have an Angular app which handles webex communications. ALl is working fine. User on smarthpone is asked for permissions on microhpone and camera. Seesion is open, video and voice is send by user.

Problem is the host. Voice is send, but video only the first image is shown and then the image is stucked.

  private connect(): void {
    this.webex.meetings.create(this.meetingURL)
      .then((meeting) => {
        // Call our helper function for binding events to meetings
        this.meeting = meeting;
        this.bindMeetingEvents(meeting);
        this.joinMeeting(meeting);


      }).catch((error) => {
      // Report the error
      console.error('Connection Errors', error);
    });
  }

  private joinMeeting(meeting): void {
    meeting.join({ pin: this.meetingPin, moderator: false })
      .then(() => {
        const mediaSettings = {
          receiveVideo: true,
          receiveAudio: true,
          receiveShare: true,
          sendVideo: true,
          sendAudio: true,
          sendShare: false,
        };
        // Get our local media stream and add it to the meeting
        return meeting.getMediaStreams(mediaSettings).then((mediaStreams) => {
          const [localStream, localShare] = mediaStreams;
          meeting.addMedia({
            localShare,
            localStream,
            mediaSettings,
          });
        });
      })
      .catch((error) => {
        this.errorMessage = error;
        this.cdr.detectChanges();
      });
  }

  private bindMeetingEvents(meeting) {
    meeting.on('error', (err) => {
      console.error('Event errors', err);
    });

    meeting.on('meeting:media:remote:start', () => {
      this.isConnecting = false;
      this.cdr.detectChanges();
    });

    meeting.on('meeting:stateChanged', (curr, prev) => {
      console.log('currentState', curr);
      console.log('prevState', prev);
    });

    meeting.on('meeting:self:lobbyWaiting', () => {
      console.log('User is guest to space, waiting to be admitted, wait to use addMedia');
    });

    meeting.on('meeting:self:guestAdmitted', () => {
      console.log('Admitted to meeting as guest to call.');
    });

    meeting.on('meeting:reconnectionStarting', () => {
      console.log('reconnecting in progress');
    });

    meeting.on('meeting:reconnectionSuccess', () => {
      console.log('reconnection successful');
    });

    meeting.on('meeting:reconnectionFailure', () => {
      console.log('reconnection failure');
    });

    // Handle media streams changes to ready state
    meeting.on('media:ready', (media) => {
      if (!media) {
        return;
      }

      if (media.type === 'remoteVideo') {
        const remoteVideo = (document.getElementById('remote-video') as HTMLMediaElement);
        remoteVideo.onplaying = () => {
          console.log('video playing');
          this.isSharing = false;
          this.cdr.detectChanges();
        };
        remoteVideo.srcObject = media.stream;
      }
      if (media.type === 'remoteAudio') {
        (document.getElementById('remote-audio') as any).srcObject = media.stream;
      }
      if (media.type === 'remoteShare') {
        const remoteScreen = (document.getElementById('remote-screen') as HTMLMediaElement);
        remoteScreen.onplaying = () => {
          this.isSharing = true;
          this.cdr.detectChanges();
        };
        remoteScreen.srcObject = media.stream;
      }
    });

    // Handle media streams stopping
    meeting.on('media:stopped', (media) => {
      console.log(media);
      // Remove media streams
      if (media.type === 'local') {
        if (!this.meetingAlreadyLeaved) {
          this.leave(true);
        }
      }
      if (media.type === 'remoteVideo') {
        (document.getElementById('remote-video') as HTMLMediaElement).srcObject = null;
      }
      if (media.type === 'remoteAudio') {
        (document.getElementById('remote-audio') as HTMLMediaElement).srcObject = null;
      }
      if (media.type === 'remoteShare') {
        (document.getElementById('remote-screen') as HTMLMediaElement).srcObject = null;
        this.isSharing = false;
      }
    });
  }

<ion-content>
    <div class="loading-container" *ngIf="isConnecting">
        <div *ngIf="!errorMessage" fxLayout="column" fxLayoutAlign="center center" >
            <ion-spinner></ion-spinner>
            <ion-label>Loading...</ion-label>
        </div>
        <div *ngIf="errorMessage" fxLayout="column" fxLayoutAlign="center center">
            <ion-label>{{errorMessage}}</ion-label>
        </div>
    </div>
    <div fxLayout="column" [fxHide]="isConnecting" style="transform: rotate(-90deg);
            transform-origin: left top;
            width: 100vh;
            overflow-x: hidden;
            position: absolute;
            top: 100%;
            left: 0;">
        <div>
            <audio id="remote-audio" autoplay></audio>
            <video class="remote-user"[fxHide]="isSharing" id="remote-video" autoplay></video>
        </div>
        <video [fxHide]="!isSharing" class="screen-share" id="remote-screen" muted autoplay playsinline></video>
    </div>
    <div class="controls" fxLayout="row" fxLayoutAlign="center center" *ngIf="!isConnecting">
        <ion-button (click)="leave(false)" color="danger">
            <ion-icon name="close-circle-outline"></ion-icon>
        </ion-button>
        <ion-button (click)="mute()">
            <ion-icon *ngIf="!this.isMuted" name="mic"></ion-icon>
            <ion-icon *ngIf="this.isMuted" name="mic-off"></ion-icon>
        </ion-button>
    </div>
</ion-content>