We implemented `Sinch` in an `angular 2` web application.

Everything works fine, except when I try to call a user using the `sinch` phone demo.

When the app is running in the foreground it will ring and the connection is made.

When the app is running in the background nothing happens.

In an angular application the `onCallProgressing` eventlistener is not getting triggered, the page just waits until it spits out this error message:

[![enter image description here][1]][1]&lt;br&gt;&lt;br&gt;

It seems like the problem lies in the missing `jquery` functions since I rewrote the project to angular.

I like to know what I can do to fix this issue with the sinch API.

Full stack trace of the error is as follows:

    Error: Error executing listener: onCallEnded
    at SinchError (http://cdn.sinch.com/latest/sinch.min.js:4:4093) [&lt;root&gt;]
    at g.&lt;anonymous&gt; (http://cdn.sinch.com/latest/sinch.min.js:4:18715) [&lt;root&gt;]
    at Array.forEach (native) [&lt;root&gt;]
    at g.execListener (http://cdn.sinch.com/latest/sinch.min.js:4:18650) [&lt;root&gt;]
    at g.mxpHangup (http://cdn.sinch.com/latest/sinch.min.js:4:30318) [&lt;root&gt;]
    at g.hangup (http://cdn.sinch.com/latest/sinch.min.js:5:12013) [&lt;root&gt;]
    at g.&lt;anonymous&gt; (http://cdn.sinch.com/latest/sinch.min.js:5:4195) [&lt;root&gt;]
    at Zone.runTask (http://localhost:4200/polyfills.bundle.js:6135:47) [&lt;root&gt; =&gt; &lt;root&gt;]
    at ZoneTask.invoke (http://localhost:4200/polyfills.bundle.js:6329:33) [&lt;root&gt;]
    at data.args.(anonymous function) (http://localhost:4200/polyfills.bundle.js:7360:25) [&lt;root&gt;]

This is the angular component that manages the calling using *sinch*:

    import {Component, AfterViewInit, ViewChild, OnInit, OnDestroy} from &#39;@angular/core&#39;;
    import {Router, ActivatedRoute} from &quot;@angular/router&quot;;
    import {HttpService} from &quot;../http.service&quot;;
    import &#39;rxjs/add/operator/map&#39;;
    import {Response} from &quot;@angular/http&quot;;
    import {Employee} from &quot;../employee&quot;;
    import {Subscription} from &quot;rxjs/Rx&quot;;
    import {TimeOutService} from &quot;../../time-out.service&quot;;
    
    declare var SinchClient: any;
    
    @Component({
      selector: &#39;mp-callpage&#39;,
      templateUrl: &#39;./callpage.component.html&#39;,
      styleUrls: [&#39;./callpage.component.scss&#39;]
    })
    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 = &quot;&quot;;
      public incomingVideoSource = &quot;&quot;;
      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 =&gt; {
          this.id = +params[&#39;id&#39;];
          if (this.id != 0) {
            //noinspection TypeScriptValidateTypes
            this.http.getData(&#39;employees&#39;, &#39;orderBy=&quot;id&quot;&amp;equalTo=&#39; + this.id)
              .map((response:Response) =&gt; response.json())
              .subscribe(
                (data:Employee) =&gt; {
                  for (var property in data) {
                    if (data.hasOwnProperty(property)) {
                      this.contact = data[property];
                    }
                  }
                }
              );
          } else {
            this.contact = new Employee({
              name: &quot;the reception&quot;,
              id: 0
            }, &quot;the receptionist&quot;, &quot;the receptionist&quot;, 0, false, &quot;0000&quot;)
          }
        });
    
    
        var _self = this;
    
        this.sinchClient = new SinchClient({
          applicationKey: &#39;xxx&#39;,
          capabilities: {calling: true, video: true}
        });
    
        /*** Name of session, can be anything. ***/
        var sessionName = &#39;sinchSessionVIDEO-&#39; + 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] || &#39;{}&#39;);
        console.log(sessionObj);
        if(sessionObj.userId) {
          this.sinchClient.start(sessionObj)
            .then(function() {
              localStorage[sessionName] = JSON.stringify(_self.sinchClient.getSession());
              console.log(&quot;a valid session was found&quot;)
            }).fail(function(response) {
            console.log(response);
          });
        }else {
          console.log(&quot;no user id&quot;);
        }
    
    
        /*** 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
          // $(&#39;div.frame&#39;).not(&#39;#chromeFileWarning&#39;).show();
        });
    
      }
    
      /*** Define listener for managing calls ***/
      private callListeners = {
        onCallProgressing: (call) =&gt; {
          this._audio.play();
        },
        onCallEstablished: (call) =&gt; {
          this._video.src = call.incomingStreamURL;
          this._audio.pause();
          this._audio.currentTime=0;
        },
        onCallEnded: (call) =&gt; {
          this._video.src = &#39;&#39;;
          this.onCallEnd(&#39;/&#39;);
          if(call.error) {
            console.log(&quot;there was an error&quot; + 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(&#39;video&#39;) video:any;
      @ViewChild(&#39;ringback&#39;) audio:any;
    
      ngAfterViewInit () {
        this._audio = this.audio.nativeElement;
        this._video = this.video.nativeElement;
        if(navigator.mediaDevices &amp;&amp; navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia({ video: true, audio: true })
            .then(stream =&gt; {
              this._video.src = &#39;&#39;;
              this._video.play();
              this._video.volume = 0.2;
            })
        }
    
      }
      onVolumeChange(direction: string) {
        for (var i = 0; i &lt; this.volumefade.length; i++) {
          clearTimeout(this.volumefade[i]);
        }
        this.volumefade = [];
        this.volumechange = true;
        if (direction == &#39;down&#39; &amp;&amp; this._video.volume &gt; 0.15) {
          this._video.volume -= 0.1;
          this.volume -= 0.1;
        }else if (direction == &#39;up&#39; &amp;&amp; this._video.volume &lt;= 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(() =&gt; { this.volumechange = false; }, 2000));
      }
    
      /*** Hang up a call ***/
      onCallEnd(btn) {
        if(this.call.getEndCause() != &#39;HUNG_UP&#39;){
          this.call &amp;&amp; this.call.hangup();
        }
        this.navHome(btn);
      }
    
      navHome(url) {
        setTimeout(() =&gt; { this.router.navigate([url]); }, 0);
      }
    
      ngOnDestroy() {
        this.sub.unsubscribe();
        this.timeOutService.inCall = false;
        this.timeOutService.resetTimer.push(setTimeout(() =&gt; { this.router.navigate([&#39;/&#39;]); window.location.reload() }, 100));
      }
    
    }

  [1]: https://i.stack.imgur.com/WoXWw.png


All Sinch Solutions on Gang of Coders

Total of 1 Sinch Solutions

Sinch API in an Angular 2 project times out on onCallProgressing