WebEx JS Integration不显示来自主机的视频

问题描述

我们有一个处理Webex通信的Angular应用程序。 AL1工作正常。要求smarthpone的用户具有microhpone和相机的权限。对话开放，用户发送视频和语音。

问题是宿主。已发送语音，但仅显示视频，然后粘贴了视频。

  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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）