Learn Skype Web SDK Day 22 : Receiving an Incoming Audio Call
[contemplate-1]
View Demo
We’ve previously covered how to identify and respond to incoming Instant Message conversations. Doing the same thing for Audio calls is fairly similar – the only real difference is that instead of using chatService, instead it’s audioService.
When a new conversation request is received by the Skype for Web API, it is added to the list of conversations managed by the conversationsManager. By monitoring new conversations being added here you can then take actions when they appear.
You can register an event listener for new conversations being added with the event listener:
[code language=”javascript”]
var client = new Skype.Web.Model.Application;
//perform sign in
client.conversationsManager.conversations.added(function (newConversation) {
//do something with newConversation
});
[/code]
Obviously there is only one conversationsManager and if you’re starting your own conversations as well then conversations will be being added and removed from this fairly regularly. There are two important things you should check for to know whether this is a incoming conversation you need to act on. You should check that you are able to accept the conversation, and that the conversation is in the right state to be accepted.
The first thing you need to do is check to see whether this is an audio call which you are able to accept, by evaluating:
[code language=”javascript”]
newConversation.audioService.accept.enabled()
[/code]
Secondly, you should evaluate the state of the conversation. A conversation moves through various states during its lifetime and checking the current state will make sure you don’t try and accept or reject a conversation that isn’t ready for it. If the conversation state is Notified then it means that the conversation is waiting for an invitation decision to be made: i.e. it’s ready to be accepted or declined:
[code language=”javascript”]
newConversation.audioService.state() == ‘Notified’
[/code]
Putting the two together gives you:
[code language=”javascript”]
var client;
//instantiate client object and perform sign in
client.conversationsManager.conversations.added(function (newConversation) {
if (newConversation.audioService.accept.enabled() && newConversation.audioService.state() == ‘Notified’)
{
//accept or reject invite
}
});
[/code]
Actually accepting or rejecting the conversation invitation is easy:
[code language=”javascript”]
newConversation.audioService.accept();
[/code]
or
[code language=”javascript”]
newConversation.audioService.reject();
[/code]
Because we’ve already done something pretty similar for Instant Messaging, I though this time it would be more fun to use toastr.js to actually display the incoming alert. This was actually pretty easy:
[code language=”javascript”]
var msg = ‘
‘;
var $toast = toastr[“info”](msg, “Accept”);
if ($toast.find(‘#btnAccept’).length) {
$toast.delegate(‘#btnAccept’, ‘click’, function () {
AcceptConversation();
$toast.remove();
});
}
if ($toast.find(‘#btnReject’).length) {
$toast.delegate(‘#btnReject’, ‘click’, function () {
RejectConversation();
$toast.remove();
});
}
[/code]
First I build up the content of toast, containing the name of the caller, and two buttons to accept or reject the call. Then I call toastr and get a handle to the actual toast object. This causes the toast to be displayed. Finally, I add the functions for the button clicks to accept or reject the conversation. Have a look at the example for this post to see this, including the extra initialising stuff to set the style etc.
[code language=”javascript”]
Audio Status:
var pageTitle = 'Receiving a New Audio Conversation'; var blogPostLocation = "http://thoughtstuff.co.uk"; var githubLocation = "http://github.com";
var activeConversation;
var client; $(function () { 'use strict';
Skype.initialize({ apiKey: 'SWX-BUILD-SDK', }, function (api) { client = new api.application();
// whenever client.state changes, display its value client.signInManager.state.changed(function (state) { $('#loginStatus').text("Login State: " + state); });
}, function (err) { alert('Error loading Skype Web SDK: ' + err); });
$('#btnLogIn').click(function () {
// start signing in client.signInManager.signIn({ username: $('#username').val(), password: $('#password').val() }).then(function () { //log in worked! alert('Logged in!');
}, function (error) { //Something went wrong. alert(error); }); });
$('#btnLogOut').click(function () { // start signing out client.signInManager.signOut() .then(function () { //log out worked! alert('Logged out!'); $('#btnStartConversation').prop('disabled', true); $('#btnSendIM').prop('disabled', true); }, function (error) { //Something went wrong. alert(error); }); });
client.conversationsManager.conversations.added(function (conversation) { if (conversation.audioService.accept.enabled() && conversation.audioService.state() == 'Notified') { //incoming audio call activeConversation = conversation;
//wire up audio state events conversation.selfParticipant.audio.state.changed(function (newState) { $('#lblAudioStatus').text(newState); });
var msg = '
'; var $toast = toastr["info"](msg, "Accept");
if ($toast.find('#btnAccept').length) { $toast.delegate('#btnAccept', 'click', function () { AcceptConversation(); $toast.remove(); }); }
if ($toast.find('#btnReject').length) { $toast.delegate('#btnReject', 'click', function () { RejectConversation(); $toast.remove(); }); }
} })
});
function InitialiseToastr() { toastr.options = { "closeButton": true, "debug": false, "newestOnTop": false, "progressBar": false, "positionClass": "toast-bottom-right", "preventDuplicates": false, "timeOut": "15000", "extendedTimeOut": "15000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut",
};
}
function AcceptConversation() { activeConversation.audioService.accept(); }
function RejectConversation() { activeConversation.audioService.reject(); }
[/code]
Demo Online
You can try this code out against your own Skype for Business environment by going to the demo page. From here you can also download the code from GitHub if you want to host it locally, or take it and use it in your next project.
[contemplate-2]


