AngularJS and ApiRTC

Question

I am currently trying to use ApiRTC (apirtc) with AngularJS and cordova.

I want the callee to "Accept" before the call starts. When the callee accepts, the caller have a different UI.

But whenever I'm trying to reproduce this example in my project with callAudio() instead of call() :

The call is established before the callee can click on a "Accept/Reject". In other words, the callEstablished event is fired to the caller before the callee clicks on the "Accept" button.

When the callee clicks on "Accept", it fires another callEstablished event.

I'm using the following instructions in that order

apiRTC.init({
  apiCCId : $scope.callData.callerId,
  apiKey : "<MY_API_KEY>",
  onReady: sessionReadyHandler,
  idConversionActivated : false,
});

then

apiRTC.addEventListener("callEstablished", callEstablishedHandler);
apiRTC.addEventListener("userMediaSuccess", userMediaSuccessHandler);
apiRTC.addEventListener("incomingCall", incomingCallHandler);
apiRTC.addEventListener("userMediaError", userMediaErrorHandler);
apiRTC.addEventListener("hangup", hangupHandler);
apiRTC.addEventListener("remoteStreamAdded", remoteStreamAddedHandler);
apiRTC.addEventListener("connectedUsersListUpdate", connectedUsersListUpdateHandler);
apiRTC.addEventListener("error", function(e) {...});

then

// webRTC client creation
webRTCClient = apiRTC.session.createWebRTCClient({
});

// Multi calls Activation
webRTCClient.setAllowMultipleCalls(true);

// Bandwitdh limitation
webRTCClient.setVideoBandwidth(300);

// Accept-Refuse
webRTCClient.setUserAcceptOnIncomingCall(true);

and finally:

webRTCClient.callAudio($scope.callData.receiverId);

And only with those instructions, the call is established (event + can listen voice/audio). Can anyone tell me what I'm doing wrong?

Answer 1

Fixed it by binding the remote stream manually.

• Caller: in the callEstablished handler
• Callee: in my acceptCall() function called on user click.

$scope.callState.active = true; webRTCClient.acceptCall($scope.callId);

  // Add streams
  if ($scope.localStreamEvent && $scope.remoteStreamEvent) {
    console.log("STREAMS:");
    console.log($scope.localStreamEvent.detail.stream.id);
    console.log($scope.remoteStreamEvent.detail.stream.id);

    webRTCClient.addStreamInDiv($scope.remoteStreamEvent.detail.stream, $scope.remoteStreamEvent.detail.callType, 
      "remote", 'remoteElt-' + $scope.remoteStreamEvent.detail.callId,
             {width : "640px", height : "480px"}, false);

    $scope.callState.active = true;
  }

$scope.localStreamEvent and $scope.remoteStreamEvent being filled here:

function userMediaSuccessHandler(e) {
    $scope.localStreamEvent = e;

    webRTCClient.addStreamInDiv($scope.localStreamEvent.detail.stream, $scope.localStreamEvent.detail.callType,
          "mini", 'miniElt-' + $scope.localStreamEvent.detail.callId,
          {width : "128px", height : "96px"}, true);

}

function remoteStreamAddedHandler(e) {
  $scope.remoteStreamEvent = e;
}

Answer 2

Are you correctly setting the following option on your client?

Try this:

webRTCClient.setUserAcceptOnIncomingCall(true);