Question

我目前正在尝试在离子2应用程序中使用ApiRTC API，并且我希望被调用者能够在发送任何媒体流之前接受或拒绝该呼叫。我试图复制这个example，但在我的情况下，即使在按照建议设置了 webRTCClient.setUserAcceptOnIncomingCall（true）之后，调用也会自动被接受，而被调用者无需点击接受按钮文件。请参阅下面的实施。

＆＃13;

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);
  }

}

＆＃13;

<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>

＆＃13;

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

Answer 1

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

尝试使用此功能。

webRTCClient.setUserAcceptOnIncomingCallBeforeGetUserMedia(true);

我面临着同样的问题。此功能对我有帮助，效果很好。也许它将为您工作。

Answer 2

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

我建议听听＆＃34; webRTCClientCreated＆＃34;使用webRTCClient之前的事件：

function webRTCClientCreatedHandler(e) {
   this.webRTCClient.setAllowMultipleCalls(true);
   this.webRTCClient.setVideoBandwidth(300);
   this.webRTCClient.setUserAcceptOnIncomingCall(true);
}

apiRTC.addEventListener("webRTCClientCreated", webRTCClientCreatedHandler);

如果有帮助，请告诉我们。

Ionic 2和ApiRTC

2 个答案: