Ionic 2とApiRTC

Question

私は現在、イオン2アプリケーションでApiRTC APIを使用しようとしています。メディアストリームを送信する前に呼び出しを受け入れるか拒否できるかをcalleeしたいと思います。私はこのexampleを複製しようとしていますが、私の場合は、受諾ボタンをクリックしても呼び出しが自動的に受け入れられます。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

アプリケーションのコードに非同期の問題がある可能性があります.WebRTCClientの作成が完了しない可能性があります。ここでは、オーディオ/ビデオデバイスの存在を確認しています。

私はwebRTCClientを使用する前に、「webRTCClientCreated」イベントに耳を傾けるアドバイスします：

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

apiRTC.addEventListener("webRTCClientCreated", webRTCClientCreatedHandler); 

このヘルプ場合はお知らせ。