Angular 2 프로젝트의 Sinch API가 onCall Progressing에서 타임아웃되다

Angular 2 프로젝트의 Sinch API가 onCall Progressing에서 타임아웃되다

델은Sinch에 있어서angular 2웹 어플리케이션

모든 것이 정상적으로 동작합니다.단, 를 사용하여 사용자에게 전화를 걸려고 했을 때를 제외합니다.sinch전화 데모

앱이 포그라운드에서 실행 중일 때 호출음이 울리고 연결이 이루어집니다.

앱이 백그라운드에서 실행 중일 때는 아무 일도 일어나지 않습니다.

각도 적용에서는onCallProgressingeventlistener는 트리거되지 않습니다.페이지에서 다음 오류 메시지가 출력될 때까지 기다립니다.

문제는 실종에 있는 것 같다jquery내가 프로젝트를 각도로 다시 작성한 이후부터의 기능들.

sinch API에서 이 문제를 해결하기 위해 무엇을 할 수 있는지 알고 싶습니다.

오류의 전체 스택 트레이스는 다음과 같습니다.

Error: Error executing listener: onCallEnded
at SinchError (http://cdn.sinch.com/latest/sinch.min.js:4:4093) [<root>]
at g.<anonymous> (http://cdn.sinch.com/latest/sinch.min.js:4:18715) [<root>]
at Array.forEach (native) [<root>]
at g.execListener (http://cdn.sinch.com/latest/sinch.min.js:4:18650) [<root>]
at g.mxpHangup (http://cdn.sinch.com/latest/sinch.min.js:4:30318) [<root>]
at g.hangup (http://cdn.sinch.com/latest/sinch.min.js:5:12013) [<root>]
at g.<anonymous> (http://cdn.sinch.com/latest/sinch.min.js:5:4195) [<root>]
at Zone.runTask (http://localhost:4200/polyfills.bundle.js:6135:47) [<root> => <root>]
at ZoneTask.invoke (http://localhost:4200/polyfills.bundle.js:6329:33) [<root>]
at data.args.(anonymous function) (http://localhost:4200/polyfills.bundle.js:7360:25) [<root>]

이것은 synch를 사용하여 콜을 관리하는 각도 컴포넌트입니다.

import {Component, AfterViewInit, ViewChild, OnInit, OnDestroy} from '@angular/core';
import {Router, ActivatedRoute} from "@angular/router";
import {HttpService} from "../http.service";
import 'rxjs/add/operator/map';
import {Response} from "@angular/http";
import {Employee} from "../employee";
import {Subscription} from "rxjs/Rx";
import {TimeOutService} from "../../time-out.service";

declare var SinchClient: any;

@Component({
  selector: 'mp-callpage',
  templateUrl: './callpage.component.html',
  styleUrls: ['./callpage.component.scss']
})
export class CallpageComponent implements OnInit, OnDestroy {
  public contact: Employee;
  public _video;
  public _audio;
  public volume: number = 0.2;
  public vol: number = 20;
  public volumechange: boolean = false;
  private volumefade = [];
  id: number;
  private sub: Subscription;

  sinchClient: any;
  public callUserName = "";
  public incomingVideoSource = "";
  private callClient;
  private call;

  constructor(private router: Router, private route: ActivatedRoute, private http: HttpService, private timeOutService: TimeOutService) {
  }

  ngOnInit() {

    this.sub = this.route.params.subscribe(params => {
      this.id = +params['id'];
      if (this.id != 0) {
        //noinspection TypeScriptValidateTypes
        this.http.getData('employees', 'orderBy="id"&equalTo=' + this.id)
          .map((response:Response) => response.json())
          .subscribe(
            (data:Employee) => {
              for (var property in data) {
                if (data.hasOwnProperty(property)) {
                  this.contact = data[property];
                }
              }
            }
          );
      } else {
        this.contact = new Employee({
          name: "the reception",
          id: 0
        }, "the receptionist", "the receptionist", 0, false, "0000")
      }
    });


    var _self = this;

    this.sinchClient = new SinchClient({
      applicationKey: 'xxx',
      capabilities: {calling: true, video: true}
    });

    /*** Name of session, can be anything. ***/
    var sessionName = 'sinchSessionVIDEO-' + this.sinchClient.applicationKey;


    /*** Check for valid session. NOTE: Deactivated by default to allow multiple browser-tabs with different users. ***/
    var sessionObj = JSON.parse(localStorage[sessionName] || '{}');
    console.log(sessionObj);
    if(sessionObj.userId) {
      this.sinchClient.start(sessionObj)
        .then(function() {
          localStorage[sessionName] = JSON.stringify(_self.sinchClient.getSession());
          console.log("a valid session was found")
        }).fail(function(response) {
        console.log(response);
      });
    }else {
      console.log("no user id");
    }


    /*** Set up callClient and define how to handle incoming calls ***/
    this.callClient = this.sinchClient.getCallClient();
    this.callClient.initStream().then(function() { // Directly init streams, in order to force user to accept use of media sources at a time we choose
      // $('div.frame').not('#chromeFileWarning').show();
    });

  }

  /*** Define listener for managing calls ***/
  private callListeners = {
    onCallProgressing: (call) => {
      this._audio.play();
    },
    onCallEstablished: (call) => {
      this._video.src = call.incomingStreamURL;
      this._audio.pause();
      this._audio.currentTime=0;
    },
    onCallEnded: (call) => {
      this._video.src = '';
      this.onCallEnd('/');
      if(call.error) {
        console.log("there was an error" + call.error.message);
      }
    }
  };

  /*** Make a new data call ***/
  onCall() {
    this.call = this.callClient.callUser(this.callUserName);

    this.timeOutService.inCall = true;
    this.timeOutService.interacted();

    this.call.addEventListener(this.callListeners);
  }

  @ViewChild('video') video:any;
  @ViewChild('ringback') audio:any;

  ngAfterViewInit () {
    this._audio = this.audio.nativeElement;
    this._video = this.video.nativeElement;
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(stream => {
          this._video.src = '';
          this._video.play();
          this._video.volume = 0.2;
        })
    }

  }
  onVolumeChange(direction: string) {
    for (var i = 0; i < this.volumefade.length; i++) {
      clearTimeout(this.volumefade[i]);
    }
    this.volumefade = [];
    this.volumechange = true;
    if (direction == 'down' && this._video.volume > 0.15) {
      this._video.volume -= 0.1;
      this.volume -= 0.1;
    }else if (direction == 'up' && this._video.volume <= 0.9) {
      this._video.volume += 0.1;
      this.volume += 0.1;
    }
    this.volume = Math.round( this.volume * 10 ) / 10;
    this.vol = this.volume * 100;
    this.volumefade.push(setTimeout(() => { this.volumechange = false; }, 2000));
  }

  /*** Hang up a call ***/
  onCallEnd(btn) {
    if(this.call.getEndCause() != 'HUNG_UP'){
      this.call && this.call.hangup();
    }
    this.navHome(btn);
  }

  navHome(url) {
    setTimeout(() => { this.router.navigate([url]); }, 0);
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
    this.timeOutService.inCall = false;
    this.timeOutService.resetTimer.push(setTimeout(() => { this.router.navigate(['/']); window.location.reload() }, 100));
  }

}

이 기능을 사용하여sinch-rtc사바즈 파텔이 말했듯이

예:

sinchClient = new SinchClient({
    applicationKey: 'YOUR KEY',
    capabilities: {messaging: true},
    onLogMessage: function(message) {
        console.log(message);
    }
    });

sinchClient.start(CREDENTIALS).then(function() {
        console.log('Success!');
    })

언급URL : https://stackoverflow.com/questions/42721579/sinch-api-in-an-angular-2-project-times-out-on-oncallprogressing