Ionic 2 and ApiRTC

Question

我目前正在尝试在 ionic 2 应用程序中使用 ApiRTC API，我希望被调用方能够在发送任何媒体流之前接受或拒绝调用。我正在尝试复制此示例，但就我而言，即使在文档中建议的设置了webRTCClient.setUserAcceptOnIncomingCall(true(之后，调用也会自动接受，而无需被调用者单击接受按钮。请参阅下面的我的实现。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var apiRTC: any
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  showCall: boolean;
  showHangup: boolean;
  showAnswer: boolean;
  showReject: boolean;
  showStatus: boolean;
  showRemoteVideo: boolean = true;
  showMyVideo: boolean = true;
  session;
  webRTCClient;
  incomingCallId = 0;
  myCallId;
  status;
  calleeId;
  constructor(public navCtrl: NavController) {
    this.InitializeApiRTC();
  }
  InitializeApiRTC() {
    //apiRTC initialization
    apiRTC.init({
      apiKey: "<APIKEY>",
      //apiCCId : "1",
      onReady: (e) => {
        this.sessionReadyHandler(e);
      }
    });
  }
  sessionReadyHandler(e) {
    this.myCallId = apiRTC.session.apiCCId;
    this.InitializeControls();
    this.AddEventListeners();
    this.InitializeWebRTCClient();
  }
  InitializeControls() {
    this.showCall = true;
    this.showAnswer = false;
    this.showHangup = false;
    this.showReject = false;
  }
  InitializeControlsForIncomingCall() {
    this.showCall = false;
    this.showAnswer = true;
    this.showReject = true;
    this.showHangup = true;
  }
  InitializeControlsForHangup() {
    this.showCall = true;
    this.showAnswer = false;
    this.showReject = false;
    this.showHangup = false;
  }
  UpdateControlsOnAnswer() {
    this.showAnswer = false;
    this.showReject = false;
    this.showHangup = true;
    this.showCall = false;
  }
  UpdateControlsOnReject() {
    this.showAnswer = false;
    this.showReject = false;
    this.showHangup = false;
    this.showCall = true;
  }
  RemoveMediaElements(callId) {
    this.webRTCClient.removeElementFromDiv('mini', 'miniElt-' + callId);
    this.webRTCClient.removeElementFromDiv('remote', 'remoteElt-' + callId);
  }
  AddStreamInDiv(stream, callType, divId, mediaEltId, style, muted) {
    let mediaElt = null;
    let divElement = null;
    if (callType === 'audio') {
      mediaElt = document.createElement("audio");
    } else {
      mediaElt = document.createElement("video");
    }
    mediaElt.id = mediaEltId;
    mediaElt.autoplay = true;
    mediaElt.muted = muted;
    mediaElt.style.width = style.width;
    mediaElt.style.height = style.height;
    divElement = document.getElementById(divId);
    divElement.appendChild(mediaElt);
    this.webRTCClient.attachMediaStream(mediaElt, stream);
  }
  AddEventListeners() {
    apiRTC.addEventListener("userMediaSuccess", (e) => {
      this.status = "You are calling " + e.detail.remoteId + "<br/>";
      this.status = this.status + "CallID = " + e.detail.callId + "<br/>";
      this.status = this.status + "Call Type = " + e.detail.callType;
      this.showStatus = true;
      this.showMyVideo = true;
      this.webRTCClient.addStreamInDiv(e.detail.stream, e.detail.callType, "mini", 'miniElt-' + e.detail.callId, {
        width: "128px",
        height: "96px"
      }, true);
/*      this.AddStreamInDiv(e.detail.stream, e.detail.callType, "mini", 'miniElt-' + e.detail.callId, {
        width: "128px",
        height: "96px"
      }, true);*/
    });
    apiRTC.addEventListener("userMediaError", (e) => {
      this.InitializeControlsForHangup();
      this.status = this.status + "<br/> The following error has occurred <br/> " + e;
    });
    apiRTC.addEventListener("incomingCall", (e) => {
      this.InitializeControlsForIncomingCall();
      this.incomingCallId = e.detail.callId;
    });
    apiRTC.addEventListener("hangup", (e) => {
      if (e.detail.lastEstablishedCall === true) {
        this.InitializeControlsForHangup();
      }
      this.status = this.status + "<br/> The call has been hunged up due to the following reasons <br/> " + e.detail.reason;
      this.RemoveMediaElements(e.detail.callId);
    });
    apiRTC.addEventListener("remoteStreamAdded", (e) => {
      this.webRTCClient.addStreamInDiv(e.detail.stream, e.detail.callType, "remote", 'remoteElt-' + e.detail.callId, {
        width: "300px",
        height: "225px"
      }, false);
    });
  }
  InitializeWebRTCClient() {
    this.webRTCClient = apiRTC.session.createWebRTCClient({
      status: "status" //Optionnal
    });
    this.webRTCClient.setAllowMultipleCalls(true);
    this.webRTCClient.setVideoBandwidth(300);
    this.webRTCClient.setUserAcceptOnIncomingCall(true);
  }
  MakeCall(calleeId) {
    var callId = this.webRTCClient.call(calleeId);
    if (callId != null) {
      this.incomingCallId = callId;
      this.showHangup = true;
    }
  }
  HangUp() {
    this.webRTCClient.hangUp(this.incomingCallId);
  }
  AnswerCall(incomingCallId) {
    this.webRTCClient.acceptCall(incomingCallId);
    this.UpdateControlsOnAnswer();
  }
  RejectCall(incomingCallId) {
    this.webRTCClient.refuseCall(incomingCallId);
    this.UpdateControlsOnReject();
    this.RemoveMediaElements(incomingCallId);
  }
}

<ion-header>
    <ion-navbar color="dark">
        <ion-title>
            Call Demo - {{myCallId}}
        </ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>
    <ion-list>
        <ion-item>
            <ion-label floating>Call ID:</ion-label>
            <ion-input type="text" [(ngModel)]="calleeId"></ion-input>
        </ion-item>
    </ion-list>
    <ion-grid>
        <ion-row>
            <ion-col>
                <button *ngIf="showCall" ion-button block (click)='MakeCall(calleeId)'>Call</button>
            </ion-col>
            <ion-col>
                <button *ngIf="showHangup" ion-button block color="danger" (click)='HangUp()'>Hangup</button>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <button *ngIf="showAnswer" ion-button block color="secondary" (click)='AnswerCall(incomingCallId)'>Answer</button>
            </ion-col>
            <ion-col>
                <button *ngIf="showReject" ion-button block color="danger">Reject</button>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <p *ngIf="showStatus" [innerHtml]="status"></p>
            </ion-col>
        </ion-row>
        <ion-row *ngIf="showRemoteVideo">
            <ion-col>
                <p>Remote Stream</p>
                <div id="remote" style="width:100%;"></div>
            </ion-col>
        </ion-row>
        <ion-row *ngIf="showMyVideo">
            <ion-col>
                <p>My Stream</p>
                <div id="mini"></div>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

请协助检查我是否做错了什么。

Answer 1

您必须在sessionReadyHandler中再设置一个步骤。

尝试使用此功能。

webRTCClient.setUserAcceptOnIncomingCallBeforeGetUserMedia(true);

我面临着同样的问题.这个功能帮助了我，效果很好。也许它会为你工作。

Answer 2

也许，应用程序中的代码存在异步问题：webRTCClient 创建可能尚未完成，因为我们现在检查音频/视频设备是否存在。

我建议在使用webRTCClient之前先听听"webRTCClientCreated"事件：

function webRTCClientCreatedHandler(e) {
   this.webRTCClient.setAllowMultipleCalls(true);
   this.webRTCClient.setVideoBandwidth(300);
   this.webRTCClient.setUserAcceptOnIncomingCall(true);
}
apiRTC.addEventListener("webRTCClientCreated", webRTCClientCreatedHandler);

让我们知道这是否有帮助。