angular - WebEx JS 集成不显示来自主机的视频

Question

我们有一个处理 webex 通信的 Angular 应用程序。一切正常。smarthpone 上的用户被要求获得 microhpone 和相机的权限。Seesion是开放的，视频和语音由用户发送。

问题是主机。语音发送，但视频只显示第一张图像，然后图像被卡住。

  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>