Angular 2项目中的 Sinch API 在 onCallProgress 上超时

我们在一个 angular 2 web 应用程序中实现了 Sinch。

一切工作正常，除了当我尝试使用 sinch电话演示呼叫一个用户。

当应用程序在前台运行时，它会响起并建立连接。

当应用程序在后台运行时，什么都不会发生。

在有角度的应用程序中，onCallProgressing事件监听器没有被触发，页面只是等待，直到它发出这个错误消息:

似乎问题在于缺少 jquery函数，因为我重写了项目的角度。

我想知道我可以做些什么来修复这个问题与 sinchAPI。

错误的完整堆栈跟踪如下:

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

这是使用 辛奇管理呼叫的角度分量:

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


}