我们实现了Sinch在 angular 2 Web应用程序。
一切正常，除非我尝试使用 sinch 调用用户电话演示。
当应用程序在前台运行时，它会响铃并建立连接。
当应用程序在后台运行时，没有任何 react 。
在 Angular 应用程序中，onCallProgressing eventlistener 没有被触发，页面只是等到它吐出这个错误消息:
似乎问题在于缺少 jquery功能，因为我将项目重写为 angular.
我想知道如何使用 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>]
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 对我有用正如 Savaj Patel 提到的那样。
示例:
sinchClient = new SinchClient({
applicationKey: 'YOUR KEY',
capabilities: {messaging: true},
onLogMessage: function(message) {
console.log(message);
}
});
sinchClient.start(CREDENTIALS).then(function() {
console.log('Success!');
})
